javascript (26) 썸네일형 리스트형 [Node.js교과서]ES2015+ const, let var로 변수를 선언하는 방법있다. 하지만 var은 이제 const와 let이 대체한다. const와 let이 공통적으로 갖는 특징은 블록 스코프라는 것이다. if (true) { var x = 3; } console.log(x); // 3 if (true) { const y = 3; } console.log(y); // Uncaught ReferenceError: y is not defined x는 정상적으로 출력되지만 y는 에러가 발생한다. var은 함수 스코프를 가지므로 if문의 블록과 관계없이 접근할 수 있다. 하지만 const,let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없다(중괄호 {와 } 사이). 이는 코드 관리를 수월하게 했다. 그렇다면 const와 .. [Node.js교과서]노드 시작하기 노드 공식 사이트 에서는 노드를 다음과 같이 설명한다. Node.js는 Chrome V8 javascript 엔진으로 빌드된 자바스크립트 런타임입니다. 대부분은 노드를 서버로 사용하는 방법을 익히기 위해 노드를 학습할 것이다. 그런데 공식 사이트의 노드 소개 글에는 서버라는 말이 없다. 이는 노드가 서버만 실행할 수 있는 것은 아니기 때문이다. 먼저 서버와 런타임이 무엇인지 알아보자. 서버 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있지만, 노드는 서버 애플리케이션을 실행하는데 가장 많이 사용된다. 서버는 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램을 말한다. 웹 사이트의 화면은 어디에서 가져오는지, 앱 설치 파일은 어디에서 내려받는지에 대한 답이 이것이다. .. 재귀함수사용하기-지뢰찾기게임(2) 주변 지뢰 개수 세기 먼저 tbdoy에 click 이벤트에 대한 이벤트 리스너를 생성한다. 그리고, 이때 생성할 함수 onLeftClick을 구현한다. 처음엔 onRightClick과 같이 이벤트를 통해 클릭한 좌표를 얻어내는 과정이 필요하다. function onLeftClick(event) { const target = event.target; const rowIndex = target.parentNode.rowIndex; const cellIndex = target.cellIndex; const cellData = data[rowIndex][cellIndex]; }; 그다음 클릭한 칸 주변에 지뢰가 몇 개 있는지 카운트하기 위한 함수 countMine을 만들 것이다. function countMin.. 재귀함수사용하기-지뢰찾기게임(1) 순서도 그리기 처음에 표를 생성하는 절차와 칸을 좌클릭하는 절차, 우클릭하는 절차로 나뉜다. 기본 HTML 구조는 다음과 같다. td로 각 칸을 프로그래밍했다. 깃발, 물음표를 설정하거나 클릭을 통해 칸이 열린 상태들은 색으로 표현한다. 지뢰 심기 가로 10칸, 세로 10줄, 지뢰 10개로 시작할 것이다. 지뢰 데이터를 표현하는 배열을 만들고 반복문을 돌면서 tbody 태그 안에 tr과 td태그를 만들어 넣으면 된다. 칸에 데이터를 넣을 때 단순하게 4가지의 칸을 나누면 안된다. 물음표 칸과 깃발 칸에서도 지뢰 존재 여부를 구분해야 한다. 지뢰가 있는 닫힌 칸을 우클릭하면 그 칸은 물음표 칸이 되고 다시 클릭하면 깃발 칸이 된다. 다음 클릭에서는 데이텅는 단순히 깃발 칸으로 표시되어 이 칸에 지뢰가 있는.. 불변 데이터 패턴 의도치 않은 객체의 변경이 발생하는 원인의 대다수는 '레퍼런스를 참조한 다른 객체에서 객체를 변경'하기 때문이다. 다음을 통해 이를 해결할 수 있다 -객체의 방어적 복사(defensive copy) Object.assign -불변객체화를 통한 객체 변경 방지 Object.freeze Object.assign 이는 타깃 객체로 소스 객체의 프로퍼티를 복사한다. 이 때 타깃 객체의 프로퍼티 중 소스 객체의 프로퍼티에 포함되어 있는 것들이 덮어쓰기된다. 리턴 값으로 타깃 객체를 반환한다. const obj = { a: 1 }; const copy = Object.assign({}, obj); console.log(copy); // { a: 1 } console.log(obj == copy); // false .. [코어자바스크립트]클로저 클로저의 의미 및 원리 이해 클로저는 자바스크립트 고유의 개념이 아닌 함수형 프로그래밍 언어에서 등장하는 보편적 특성이다. 그래서 ECMAScript 명세에서도 클로저의 정의를 다루지 않고 자바스크립트 문헌에서도 제각각 클로저를 다르게 정의한다. 그 중 MDN(Mozilla Developer Network)에서는 클로저에 대해 "클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 상호관계에 따른 현상"이라고 소개한다. 선언될 당시의 lexical environment는 outerEnvironmentReference에 해당한다. 어떤 컨텍스트 A에 선언한 내부함수 B의 실행컨텍스트가 활성화된 시점에서는 B의 outerEnvironmentReference가 참조하는 대상인 A의 L.. [코어자바스크립트]클래스 자바스크립트는 프로토타입 기반 언어라서 '상속' 개념이 존재하지 않는다. 따라서 클래스와 비슷하게 동작하게끔 흉내 내는 여러 기법들이 탄생했으며, 이들 중 대중화가 된 문법들도 있다. 이런 니즈에 따라 ES6에는 클래스 문법이 추가됐다. 자바스크립트의 클래스 자바스크립트는 프로토타입 기반 언어이므로 클래스의 개념이 존재하지 않는다고 했다. 그렇지만 프로토타입을 클래스 관점에서 접근해보면 비슷하게 해석할 수 있는 요소가 없지 않다. 생성자 함수 Array를 new 연산자와 함께 호출하면 인스턴스가 생성된다. 프로토타입 체이닝에 의한 참조지만 결과적으로는 상속과 동일하게 동작한다. Array를 클래스라고 하고, 이의 prototype 객체 내부요소들이 '상속'된다고 볼 수 있다. 이 때 Array 내부 프로.. 이벤트 루프 이해하기-카드 짝 맞추기 게임(2) 호출 스택과 이벤트 루프 마지막 버그로 4번을 수정할 것이다. 이는 호출 스택과 이벤트 루프 라는 개념과 연관이 있다. 클릭 이벤트는 비동기 이벤트이다. 그런데 그 안에 setTimeout 같은 비동기 함수들이 또 들어 있으니 코드 실행 순서가 헷갈릴 수밖에 없다. 코드 실행 순서를 파악하려면 호출 스택(call stack)과 이벤트 루프(event loop) 개념을 알아야한다. 우선 호출 스택은 동기 코드를 담당하고, 이벤트 루프는 비동기 코드를 담당한다고 생각하면 된다. 추가로 비동기 코드 실행에는 백그라운드(background)와 태스크 큐(task queue)라는 개념이 등장한다. 백그라운드는 타이머를 처리하고 이벤트 리스너를 저장하는 공간이다. setTimeout같은 함수가 실행되면 이 곳에서 .. 이전 1 2 3 4 다음
