Javascript Concepts (5) 썸네일형 리스트형 RequestAnimationFrame requestAnimationFrame() Syntax window.requestAnimationFrame(callback); requestAnimationFrame() 함수를 통해 다음 리페인트 전에 실행할 애니메이션 업데이트 함수를 등록할 수 있다. 대부분의 웹 브라우저에서 콜백함수는 디스플레이의 refresh rate 에 맞춰 실행된다. (보통 1초에 60번) 브라우저 탭이 백그라운드에서 실행중이거나 숨겨진 iframe에서 실행중일 때는 requestAnimationFrame() 호출이 일지 정지된다. 콜백 함수는 현재시간을 의미하는 DOMHighResTimeStamp 라는 인자 하나를 넘겨 받는다. 만약 여러 개의 콜백이 큐에 쌓여 있어서 하나의 프레임 안에서 실행된다면, 각 콜백은 같은 타임스탬.. Message Queue and Event Loop Runtime concepts 이벤트 루프를 이해하기 위해서는 먼저 자바스크립트의 런타임 환경에 대해서 알아야 한다. 위 그림에서 볼 수 있듯이 자바스크립트 런타임은 스택(Stack), 힙(Heap), 그리고 큐(Queue) 를 사용한다. Stack 함수를 호출하면 함수 프레임이 스택에 쌓인다. 스택이라는 이름에서 알 수 있듯이 스택의 가장 위에 있는 함수부터 실행되며, 함수가 끝나면 스택에서 나간다(pop). 크롬 개발자 도구의 콘솔에서 다음 코드를 실행시켜보자. function foo() { bar(); } function bar() { baz(); } function baz() { console.log("baz"); debugger; } foo(); baz()가 끝나기 전의 콜스택에 foo(), b.. IIFE What is an IIFE? IIFE (iffy 라고 읽는다) 는 Immediately-invoked Function Expression 의 줄임말로 말 그대로 즉시 실행되는 함수이다. IIFE 에 대해서 알아보기 전에 먼저 함수 정의/선언(definition/declaration) 과 함수 표현식(expression) 의 차이에 대해 먼저 알아야 한다. Declaration vs Expression Function Declaration function foo() { console.log("foo"); } 함수를 정의하는 방법은 위와 같다. 다른 프로그래밍 언어에서도 이와 유사하게 함수를 정의하므로 이해하기 어렵지 않을 것이다. 함수 정의는 언제나 function 키워드와 함수 이름으로 시작된다. 함수.. Scope What is scope? 스코프(scope)는 변수 접근성(variable accessibility)을 결정한다. 자바스크립트에는 세 가지 스코프가 존재한다. Block scope Function scope Global scope 블락 스코프는 자바스크립트 ES6 (2015) 부터 let 과 const 키워드를 제공하면서 생겨났다. 따라서 var 은 블락 스코프를 가질 수 없다는 점을 주의해야 한다. 예시를 통해 조금 더 자세히 알아보자. Global scope 함수 바깥에서 정의된 변수는 글로벌 스코프를 가지게 된다. 따라서 자바스크립트 프로그램 내부 어디에서든 접근이 가능하다. 또한 글로벌 스코프에서는 let, const, var 로 선언된 변수들이 거의 비슷하게 동작한다. let a = 10; f.. ES Modules How do modules help? 자바스크립트 프로그래밍은 결국 변수를 관리하는 것이다. 변수에 값을 할당하고, 변경하고, 여러 변수들의 값을 조합하여 다른 변수에 할당하는 작업이다. 그렇기 때문에 이러한 변수들을 관리하는 것이 좋은 코드와 유지 보수하기 쉬운 코드에 큰 영향을 미친다. 변수들을 관리할 때 한 번에 모든 변수를 생각하는 것보다 몇 개의 변수만 고려하는 것이 편하다. 자바스크립트의 scope 는 이를 가능하게 해준다. 함수는 다른 함수에 정의된 변수들에는 접근할 수 없다. 그러나 이러한 방법은 변수를 공유하고 싶을 때 문제가 생긴다. 이를 해결하기 위한 흔한 방법은 상위 스코프(글로벌 스코프)에 변수를 정의하는 것이다. 이러한 방법은 몇 가지 문제가 있다. 첫째, script 태그의 순.. 이전 1 다음