반응형
https://github.com/Deanioche/NIPA
1. 나만의 웹페이지 만들기
채팅 기반 커뮤니티 사이트 Nlack
웹개발 기초 강의를 들으며 직접 웹사이트를 계획하고 만들어볼 수 있도록 진행되었다.
레이아웃
현재까지 결과물
영상 링크
앞으로 추가할 내용
- 채팅 기능
- 채널 기능
- 서버?
2. JS 오목 만들기
오목게임
주제 : 자바스크립트로 오목게임 만들어보기
세부내용
- Nodejs와 함께 콘솔창에서 실행되도록 사용자 입출력 도구를 사용한다.
- 오목판 사이즈는 30x30으로 고정한 후 정사각형의 형태의 오목판을 만든다.
- 사용자 입력 도구에 좌표값 (15,15)라고 입력하여 바둑돌을 둔다.
- 흑은 1로, 백은 0으로 표기하여 화면에 흑과 백이
번갈아가면서 두도록 입력 도구가 계속 뜨도록 입력 받는다. - 오목 규칙에 따라 5줄이 먼저 완성되면 “Game over”와 같이
누가 이겼는지 승패를 알리는 출력을 만든다. - 승패가 계속 나지 않을 경우 실행 후 5분이 지나면 자동 종료시킨다.
dependencies
- node : v18.16.1
- readline : ^1.3.0
실행 방법
npm install
npm start실행 영상 링크
JS 스코프 체인
예시코드
var person = {
name: '홍길동', // 이름 프로퍼티를 정의함.
birthday: '030219', // 생년월일 프로퍼티를 정의함.
age: 30,
pId: '1234567', // 개인 id 프로퍼티를 정의함.
fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.
return this.birthday + this.pId;
},
};this. 를 안 붙이면 reference Error가 뜨는데 위에 선언을 했음에도 불구하고 왜 에러가 뜨는지 원인 찾아보기
- 원인 : JS의
스코프 체인 - this는 현재 컨텍스트를 가리킨다.
- 컨텍스트란 현재 실행중인 메서드나 함수를 소유하고 있는 객체를 가리킨다. (여기서는 person 객체)
- this를 사용하지 않고 birthday 또는 pId 만 호출하려고 하면, JavaScript 엔진은 이 변수들이 현재 스코프(이 경우 fullId 함수) 내에 정의되어 있지 않다고 판단하고 에러를 발생시킨다.
- JavaScript는 변수를 찾을 때 현재 스코프에서 시작해서, 만약 그 변수를 찾지 못하면 상위 스코프로 이동하며, 이를 반복하다가 최상위 스코프(전역 스코프)에도 찾지 못하면 ReferenceError를 발생시킨다.
- birthday와 pId는 person 객체의 프로퍼티이기 때문에 this 없이는 찾을 수 없다.
- 프로퍼티란 객체의 속성을 나타내는 식별자이다. 키와 값으로 구성된다.
html <script> HTMLCollection[]
1. html 문서 앞에 <script> 태그 내에 js코드를 작성했고, 문서가 로드 되기 전에 script의 element를 가져오지 못한 상태에서 console.log로 디버그하여 개발자도구에 확인해보았을때는 왜 element를 가져와졌는지 이유에 대해서 알아보기.
- html은 코드를 순차적으로 해석하고 실행한다.
- 첫번째
<script>의 코드는<body>태그의 내용이 읽히기 전에 실행된다. - 여기서
document.getElementsByTagName("li")의 반환 데이터이 담기는selectedItem에는 HTMLCollection 객체가 할당되는데, 이 객체는 실시간으로 업데이트되는 노드 리스트를 제공한다. <body>의 내용이 읽히기 전에는<li>태그가 없기 때문에selectedItem은 빈 HTMLCollection을 가지고length도 0이 출력된다.- 하지만 이후에 페이지가 완전히 로드되고
<li>태그들이 읽히면 객체가 자동으로 업데이트되므로, 객체를 열어보면<li>태그가 들어있는 것을 확인할 수 있다. - https://github.com/Deanioche/NIPA/assets/66513003/828ba099-01c6-408a-ba1b-348054e30642
- 하지만 이후에 페이지가 완전히 로드되고
- 보통 이런 코드는
<body>태그의 마지막 부분에 위치 해야한다. - 아니면
window.onload이벤트 핸들러 안에 포함시킨다.window.onload이벤트는 웹 페이지의 모든 리소스(이미지, 스크립트, CSS 등)의 로드가 완료되면 실행된다.
2. Web-API를 이용하여 본인의 웹사이트의 기능을 구현한 후 코드와 작동되는 화면을 영상 또는 스크린샷을 찍어서 첨부하기
JS WebAPI alert(), confirm()
webAPI의 dialog box인 alert(), confirm() 메소드는 window나 document 없이 바로 사용할 수 있는 이유
JS에서 alert(), confirm() 등의 함수는 브라우저의 window 객체의 메서드이다.
웹 브라우저 환경에서 JS 코드를 실행하면, window 객체는 전역 객체 (global object)가 된다.
따라서 window 객체의 메서드와 프로퍼티는 자동적으로 전역 범위에 있게 되므로, window 키워드 없이 직접 호출할 수 있다.
즉, window.alert('Hello, World!');는 alert('Hello, World!');와 동일한 결과를 출력한다
Node.js와 같은 브라우저가 아닌 환경에서는 window 객체가 존재하지 않아서, alert()나 confirm() 메서드를 사용할 수 없다.
후기
- 웹개발의 기초적인 부분에 대해 딥하게 배울 수 있었다.
- 도전적인 실습 과제가 많아서 좋았다.
본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.
반응형