1. 배경 오래된 스웨터의 보푸라기 같은 것을 린트(Lint)라고 부른다. 보푸라기가 많으면 옷이 보기 좋지 않은데 코드에서도 이런 보프라기가 있다. 들여쓰기를 맞추지 않은 경우, 선언한 변수를 사용하지 않은 경우…… 보프라기 있는 옷을 입을 수는 있듯이 이러한 코드로 만든 어플리케이션도 동작은 한다. 그러나 코드의 가독성이 떨어지고 점점 유지보수하...

1. 배경 1-1. 크로스 브라우징 사용하는 말이 달라서 바벨탑이 실패했듯이, 브라우저마다 사용하는 언어가 달라서 프론트엔트 코드는 일관적이지 못할 때가 많다. 스팩과 브라우저가 개선되고 있지만, 여전히 인터넷 익스플로러는 프로미스를 이해하지 못한다. 작년까지만 해도 사파리 최신 브라우져는 Promise.prototype.finally 메소드를 사용할...

1. 배경 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것 같다. 아래 덧셈 함수를 보자. function sum (a, b){ return a + b } // 전역 공간에 sum이 노출 sum(1, 2) // 3 ...

Node.js는 백엔드를 구현하는 기술이라고 생각했을지 모른다. 웹 어플리케이션 개발에 직접적으로 사용하는 것은 아니지만 개발 환경을 이해하고 구성하는데 Node.js를 모르면 언젠가는 한계에 부딪히게 될 것이다. 1. 프론트엔드 개발에 Node.js 가 필요한 이유 최신 스펙으로 개발할 수 있다. 자바스크립트 스펙의 빠른 발전에 비해 브라우저의...

async, await async, await을 사용해서 비동기 프로그래밍을 할 수 있다. async 키워드를 사용해서 함수를 선언하게 되면 함수 내부에서 await 키워드를 사용할 수 있다. await 키워드는 promise로 만든 함수에만 사용할 수 있다. await을 사용하면 다음 코드를 실행하지 않고 promise를 기다린다. 하지만 스...

Callback 다시 불리다. 정의 되고 나서 바로 실행되는게 아니라 , 특정 작업이 끝난 후 다시 불려지는 함수가 콜백함수다. setTimeout()의 첫 번째 인자가 바로 콜백함수다. function waitAndRun(){ setTimeout(()=>{ console.log('끝'); }, 2000); } console...

자바스크립트는 싱글 스레드 프로그램이기 때문에 한번에 단 한개의 작업만 할 수 있다. 이러한 싱글 스레드의 단점을 Async Programming을 이용해 많은 부분 극복할 수 있다. Thread란? CPU를 살 때 ‘8코어 16스레드’ 와 같인 스펙이 적혀있는 것을 볼 수 있다. 8개의 코어가 각각 2개의 스레드를 소유하고 있어서 16개의 스...

Closure 상위 함수 보다 하위 함수가 더 오래 살아있는 경우를 closure라고 한다. A closure is the combination of a function and the lexical environment within wiich that function was declared. 클로저는 어떤 함수와 해당 함수가 선언된 렉시컬 환...

Execution Context 실행 컨텍스트는 실행 문맥이라고도 한다. 실행 컨텍스트(Execution Context)는 실행 할 코드에 제공할 환경 정보들을 모아놓은 객체다. 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 자바스크립트 코드의 실...

this 자바스크립트에서 this는 조금 특별하다. 자바스크립트는 Lexical Scope를 사용하기 때문에 함수의 상위 스코프가 정의 시점에 평가된다. 하지만 this 키워드는 바인딩이 객체가 생성되는 시점에 결정된다. this 키워드 일반 함수 호출할 땐 this가 최상위 객체 (global 또는 window)를 가리킨다. 메서드로 호...