이안의 평일코딩

문제 게임개발자인 죠르디는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. 죠르디는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 1 x 1 크기의 칸들로 이루어진 N x N 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 5 x 5 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 1 x 1 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때 바구니의 가장 아래 ..

48장 모듈 p.891 - 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하고 이를 export라 한다. 모듈 사용자는 모듈이 공개(export)한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있는데 이를 import라 한다. p. 897 - 모듈에서 하나의 값만 export한다면 default 키워드를 사용할 수 있다. default 키워드를 사용하는 경우 기본적으로 이름 없이 하나의 값을 export하고 var, let, const 키워드는 사용할 수 없으며, {} 없이 임의의 이름으로 import한다. // lib.mjs export default co..

46장 p.868 - ES6에서 도입된 제너레이터(generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다. 제너레이터 함수는 function* (애스터리스크) 키워드로 선언하고 하나 이상의 yield 표현식을 포함한다. 이것을 제외하면 일반 함수를 정의하는 방법과 같다. - 제너레이터 함수는 화살표 함수로 정의할 수 없고 new 연산자와 함께 생성자 함수로 호출할 수 없다. 제너레이터 함수를 호출하면 제너레이터 객체를 생성해 반환한다. 제너레이터 함수가 반환한 제너레이터 객체는 이터러블이면서 동시에 이터레이터다. p.873 - 제너레이터 객체의 next 메서드를 호출하면 yield 표현식까지 실행되고 일시 중지된다. 이때 제너레이터 객체의 next 메서드는 ..

44장 p.830 - REST(REpresentational State Transfer)의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현한다. 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. p.831 - URI는 리소스를 표현(동사보다는 명사)하고 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다. 주로 5가지 요청 메서드(GET, POST, PUT, PATCH, DELETE)를 사용하여 CRUD를 구현한다. p.837 - load 이벤트는 요청이 성공적으로 완료된 경우 발생한다. status 프로퍼티 값이 200이면 정상적으로 응답된 상태이고, P..

41장 p.800 - 자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공한다. - setTimout 함수의 콜백 함수는 타이머가 만료되면 단 한 번 호출되고, setInterval 함수의 콜백 함수는 타이머가 만료될 때마다 반복 호출된다. setTimeout 함수가 반환한 타이머 id를 clearTimeout 함수의 인수로 전달하여 타이머를 취소할 수 있다. // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. // 이때 콜백 함수에 'Lee'가 인수로 전달된다. const timerId = setTimeout(name => console.log(`H..

* 스터디 방식 0. 알고리즘 문제를 미리 배부한 뒤 각자 풉니다. (예습) 1. ZOOM을 통해 돌아가며 풀이를 발표합니다. (스터디) 2. 정답을 배부합니다. 3. 깃허브에 풀이 또는 오답노트를 정리해서 게시합니다. (복습) 스터디 방식에 수정, 추가할 것이 있으면 스터디 시작 전 같이 결정하겠습니다. * 비용 (조건) 비용은 월 4만원이며, 한 달 8회 기준으로 1일 당 5천원 씩 차감되며 스터디 완료 후 페이백 해드립니다. 중도하차 시에는 전액 돌려받으실 수 없다는 점 꼭 확인 부탁드립니다. 개인 이익을 취할 목적이 아닌, 벌금과 같은 스터디 자극용으로 이용할 계획이며 마지막 주 차에 남은 인원분으로 금액을 나누어 지급합니다. (자바스크립트 다이버스터디에서도 투명하게 3개월 동안 관리한 이력이 있..

p.754 - 함수를 언제 호출할 지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이다. p.758 - 이벤트 핸들러(event handler, event listener)는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수다. 다시 말해, 이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러다. > 이벤트 핸들러를 등록하는 3가지 방법 1. 어트리뷰트 방식 - 이벤트 핸들러 어트리뷰트의 이름은 onclick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다. DOM 노드의 이벤트 핸들러 프로퍼티에 함수 참조를 할당하는 프로퍼티 방식과는 달리 함수 호출문 등의 문을 할당한다. Click me! 2. 프로퍼티 방식..

p.695, 699 - DOM 컬렉션 객체인 HTMLCollection과 NodeList는 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다. 스프레드 문법을 사용하여 간단히 배열로 변환할 수 있고 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 배열로 변환하여 사용하는 것을 권장한다. > 노드 정보 취득 - Node.prototype.nodeType: 노드 타입을 나타내는 상수로 반환. 1: 요소 노드 타입, 3: 텍스트 노드 타입, 9: 문서 노드 타입 - Node.prototype.nodeName: 노드의 이름을 문자열로 반환. 요소 노드, 텍스트 노드, 문서 노드 Hello > DOM 조작 - Element.prototype.innerHTML 프로퍼티는 ..