방춘덕(고양이 키우면 지을 이름)의 개발 블로그입니다.

목차 Virtual DOM 등장 배경 Virtual DOM? 구현 방법 1. Virtual DOM 등장 배경 jQuery 등이 등장하며 JS로 DOM을 동적으로 조작해 더 많은 것들이 가능하게 되어 웹은 새로운 시대를 맞이하게 되었다. 하지만 Twitter와 Facebook 등 조금만 스크롤을 진행해도 몇천 개의 element가 생성되는 거대한 서비스들에게 DOM을 처음부터 다시 그리는 것은 극심한 퍼포먼스 저하를 일으켰고 특히나 모바일 브라우저에서 이러한 취약점이 더 대두되었다. 또한 당시 jQuery를 이용한 개발 방법이 MVC 등 데이터 모델들을 이용해 개발을 진행하기 썩 좋은 모습이 아니었던 것도 한몫했다. DOM은 데이터를 tree구조로 보여주기에 알맞을 순 있지만, 객체지향으로 사용하기 어려웠..

목차 ECMAScript란? JavaScript와 ECMAScript의 차이 ECMAScript 버전별 역사 ES 1 ~ 3 ES4 ES5 ES6 1. ECMAScript란? Ecma (European Computer Manufacturers Association) International에서 ECMA-262와 ISO / IEC 16262에 정의된 내용을 바탕으로 만든 표준화된 스크립트 언어의 사양이다. JS를 표준화하기 위해 만들어졌으며 Action Script, JScript와 같이 ECMAScript의 다른 구현체도 물론 존재한다. 우리가 JS와 관련된 내용으로 구글링 할 때 흔히 보이는 ES5, ES6등이 ECMAScript의 버전별 표준 규격을 의미한다. 2. JavaScript와 ECMAScr..

목차 polyfill transpiler polyfill과 transpiler의 차이 1. polyfill JS는 각 버전별로 문법과 동작이 매우 급변하는데, 브라우저 개발사가 항상 이에 맞게 최신 버전으로 업데이트를 하지만 소수의 사용자만이 제때 업데이트를 한다. 또한 각 브라우저들 마다 약간씩 API의 지원 범위가 차이가 나는데 이 모든 걸 개발자들이 신경 쓰기 어려운 것이 현실이다. 이를 위해 polyfill이 생겼는데, polyfill은 모던 브라우저에서만 지원하던 API들을 이전 버전의 브라우저에서도 동작하게끔 도와준다. 아래의 예를 보고 이해해보자. 'use strict'; /* http://www.ecma-international.org/ecma-262/6.0/#sec-number.isnan..

목차 시작하며 event bubbling event capturing event delegation 1. 시작하며 이 글에서 알아볼 것은 JS에서 element에 이벤트를 추가했을 때 관한 동작 방식인데, 이 내용을 이해하지 못하고 코드를 작성한다면 예상치 못한 일들이 벌어질 수 있기 때문이다. 이 텍스트는 span안에 있음. 이 코드를 실행해보면 조금 이상하다는 것을 알 수 있다. div을 클릭하지 않았지만, div의 onclick event가 호출되는 것을 볼 수 있다. 위에서도 언급했듯, 이에 관한 내용을 숙지해야 하만 프로그래머의 의도대로 코드를 작성할 수 있을 것이다. 2. event bubbling section article div 위 코드는 다음과 같은 순서로 실행된다. div -> art..

먼저 이 글을 읽기 전에 이 전에 작성했던 scope에 관해서 꼭 읽어야만 한다. 목차 closure란? first class object (일급 객체) closure를 활용해 모듈 만들어보기 자주 할만한 실수 들 JS의 모든 함수는 closure? 1. closure란? closure란 MDN에서는 "클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. (A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment))"라고 표현한다. 아래 코드를 보며 이해해보자. function greeting() { var greet..

목차 prototype 이란? prototype, [[Prototype]], __proto__ [[prototype]] prototype __proto__ constructor property prototype chain 1). prototype 이란? JS는 prototype 기반의 객체지향 언어로써, prototype을 사용하여 다른 객체지향 언어들(C++, Java 등)의 class처럼 객체지향적이고 확장 가능한 코드를 작성하게 만들어준다. (물론 ES6부터 JS도 class 문법을 지원하긴 하지만, 런타임에서 prototype으로 변환되어 실행된다.) 대표적인 예시로는 우리가 이미 코드에서 흔하게 사용 중인 Array, Object 등에서 사용하는 메서드들은 모두 prototype으로 구현되어 있..

이 글을 원활하게 읽으려면 이전 글인 execution context 와 execution context stack과 execution context의 생성과정을 읽는 것을 권장한다. 목차 scope란? global scope local scope 몇 가지 상황들 non block level scope lexical scope 1). scope란? scope는 런타임에서 함수, 변수, 객체등에 대한 접근성을 결정한다. 즉, scope는 참조하려는 식별자를 찾기 위한 규칙이다. var a = 10 function A() { var b = 20 console.log(a, b) } A() JS는 이런 코드에서 식별자에 대한 접근을 어떻게 할까? scope가 바로 어디서 어떻게 식별자에 대해 접근하는지를 결정해..

JS는 단일 스레드 기반의 언어이며 이는 한 번에 한 작업밖에 처리하지 못한다는 것을 뜻한다. (이는 정확히 JS엔진에서만 국한된 것이다. 브라우저 등의 상황에서는 다르다) 하지만 우리가 흔히 접할 수 있는 웹 애플리케이션들은 HTTP 요청을 처리하며 화면에 애니메이션을 보여주고, 이에 대한 프리징이나 다른 현상들을 찾아볼 수가 없다. 이것에 대한 해답이 위의 사진에 있듯, event loop와 그 친구들이다. 1). call stack 브라우저 안의 자바스크립트 인터프리터와 같이, 인터프리터를 위한 메커니즘이다. 현재 실행되고 있는 함수는 무엇인지, 그 함수 내에서 어떤 함수가 호출되고 있는지, 다음에 어떤 함수가 호출되는지 등을 관리한다. 보통 다음과 같은 순서로 실행된다. 함수를 호출하면 인터프리터..