잔잔한 물결로 파도 만들기

인터넷에서 클로저의 정의를 둘러보다보면 잘 이해가 가지 않는다. 굉장히 모호하게 서술되어있기 때문이다. 개념 자체가 모호해서 그런 것일 거다. 내가 책에서 이해한 방식대로 한번 정리하는 것이 필요할 것 같다. 클로저를 활용하는 방식은 다양한데, 솔직히 말하면 내가 아직 거기까지 다루기엔 시기상조인 것 같다. 그래서 이번에는 클로저가 어떤 개념인지를 명확히 이해하는 것에만 초점을 맞추려고 한다. 클로저(Closure)란? 클로저에 대한 서술은 저자마다 상이한데, 코어 자바스크립트 저자에 따르면 그나마 다음 문장들이 잘 정의한 것에 가깝다고 한다. 클로저는 함수를 선언할 때 만들어지는, 유효범위가 사라진 후에도 호출할 수 있는 함수 - , p116 클로저는 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는..

앞서 실행 컨텍스트의 구성 요소 중 ThisBinding도 있다고 하였다. 이는 this 키워드가 무엇을 가리킬지를 나타내는 정보이다. 코드를 짜다보면 지금 내가 호출하는 this가 무엇을 가리킬지가 머릿속에 그려져야 하는데, 자바스크립트의 this를 공부해보면 참 줏대가 없는 놈이라고 느낀다. 많은 사람들이 그럴 것이다. 특정 함수가 호출될 때 실행 컨텍스트가 형성되는데, 이때 어떤 상황이냐에 따라서 this에 다른 대상이 바인딩된다. 그 패턴에 대해서 알아보자. 선정리 후설명 전역 공간에서의 this 전역 객체를 가리킨다. (브라우저 환경에서는 window 객체, Node.js 환경에서는 global 객체) 메서드 호출에서의 this 메서드가 적용되는 객체를 가리킨다. (즉, 점(.) 앞에 붙어있는 ..

처음 JavaScript를 공부했던 1월에 자바스크립트의 동작 구조를 간단히 살펴본 바 있다. 직전 포스팅에서는 실행 컨텍스트 개념을 정리하였다. 그리고 최근에는 가비지 컬렉션(Garbage Collection)의 기본적인 개념에 대해서 살펴보았다. 이 두 개념에서 조금 더 나아가서, JavaScript에서 메모리 관리가 어떻게 이루어지는지를 전반적으로 알아보도록 하자! (잠깐 복습) 기본적으로 콜 스택(Call Stack)은 현재 실행 중인 함수의 실행 컨텍스트들을 쌓는 공간이다. [실행 컨텍스트 복습] 각 함수 호출은 실행 컨텍스트(Execution Context)라는 단위로 콜 스택에 쌓이게 된다. 실행 컨텍스트는 해당 함수의 실행에 필요한 모든 정보를 포함하는데, 여기에는 - 변수 환경(Varia..

1. 실행 컨텍스트(Execution Context) 실행 컨텍스트란? 흔히 JS의 동작원리를 그릴 때 콜 스택에 함수가 쌓이는 식으로 표현하는데, 그 쌓이는 것이 실행 컨텍스트이다. 지금 실행할 스크립트에 대한, 여러가지 필요한 정보(환경)를 객체에 담은 것이라고 보면 된다. 각 실행 컨텍스트는 변수 객체(Variable Object), 스코프 체인(Scope Chain), 그리고 this에 대한 정보를 포함한다. 실행 컨텍스트는 자바스크립트 엔진의 가장 핵심적인 부분 중 하나로, 스코프, 호이스팅, 클로저 같은 자바스크립트의 주요 동작 원리의 기반이 되는 개념이다. 실행 컨텍스트의 생성 실행 컨텍스트는 우선 1) 전역 실행 컨텍스트(Global Execution Context), 2) 함수 실행 컨텍..

최근 면접에서 가비지 컬렉션에 대한 질문을 받았다. 동적 메모리 할당을 공부할 적에 잠깐 본 적이 있는 주제라 기초적인 수준의 답변은 했으나, 짧은 경험상 GC에 대해서 제대로 들여다본 적이 없었다는 생각이 들어 아쉬웠다. 특히 '자바스크립트에서도 GC가 존재하는가?' 라는 질문을 주셨을 때, 자바스크립트를 다뤘으면서도 한번도 이를 고민해본 적이 없다는 점을 반성하게 되었다. '코드를 짜면서 free를 해준 기억은 없기에 엔진 내부적으로 GC가 동작하지 않을까 생각한다' 정도의 답변을 했으나, 이 기회에 제대로 알아야겠다는 생각을 하게 되었다. 해당 내용은 아래 포스팅에 마저 기록! JavaScript | V8 엔진의 메모리 관리 1. 가비지 컬렉션이란? 가비지 컬렉션(GC)은 동적 메모리 관리의 한 형..

만일 다음과 같은 코드가 있다면, const str = 'abcde'; [...str].map((e)=>console.log(e)); [...str].forEach((e)=>console.log(e)); map을 이용한 출력문과 forEach를 이용한 출력문은 각각 같은 결과를 낼 것이다. a b c d e 여기에 쓰인 스프레드 연산자, map 함수, forEach 함수는 자바스크립트 개발에서 아주 유용하게 쓰이는 것들이다. 스프레드 연산자 [... OO]에 대하여 [... OO] 구문에서 '...'에 해당하는 부분은 자바스크립트에서 '스프레드(spread) 연산자'라고 불린다. 이 연산자는 이터러블(iterable) 객체의 개별 요소를 분리하여, 각 개별 요소들을 새로운 배열에 담아 반환한다. 위 예제..

자바스크립트는 싱글 스레드 언어로 설계되었다. 그러나 Blocking I/O를 효율적으로 처리하기 위해 비동기 처리를 가능케 하는 여러 메커니즘과 함께 동작한다. 이러한 메커니즘은 자바스크립트 엔진(V8 엔진 등)과 런타임 환경(대부분의 경우 웹 브라우저, 또는 Node.js 같은 서버 사이드 환경)에 의해 제공된다. 이들을 포함한 자바스크립트의 핵심 구성 요소에는 콜 스택, 힙, 이벤트 루프, 태스크 큐(또는 이벤트 큐)가 있으며, 추가적으로 마이크로태스크 큐와 웹 API도 중요한 역할을 한다. 시간관계상 더 자세한 내용은 다음에 학습하기로 하고, 오늘은 오버뷰만 해보도록 하자! 1. 자바스크립트 엔진 내부 구성요소 자바스크립트 엔진(대표적으로 크롬의 V8) 내부의 구성요소로는 콜 스택, 힙이 있다. ..

비동기 처리 발전과정 요약 현대의 프론트엔드 개발에서 비동기 프로그래밍은 필수적이다. 서비스는 사용자의 요청에 신속하게 응답하고, 동시에 백그라운드에서 데이터를 로드하고 처리하는 등의 복잡한 작업을 수행해야 하기 때문이다. 초기의 자바스크립트에서는 이러한 비동기 작업을 주로 콜백 함수를 통해 처리했다. 그러나 서비스의 규모가 커지고 로직이 복잡할수록 콜백 지옥이라는 부작용이 발생했으며, 이는 가독성 저하와 유지 보수 난이도 상승으로 이어졌다. 이러한 문제를 해결하기 위해 ES6(ECMAscript 2015)에서 Promise가 도입되었다. Promise를 통해 비동기 작업 완료 실행될 작업을 연기하는 것이 수월해졌고(Promise 객체 리턴값을 변수에 담은 후에 나중에 활용하는 식으로), 또한 체이닝을 ..

동기 처리, 비동기 처리 자바스크립트는 기본적으로 싱글 스레드 언어이다. 따라서 하나의 작업 흐름을 따라 처리한다. 그러므로 이전 작업이 진행 중이라면, 다음 작업을 수행하지 않고 기다린다. 이를 동기적 방식, 혹은 blocking 방식 이라고 부른다. 이렇게 했을 때의 문제점이 있는데, 바로 실행 시간이 긴 하나의 함수를 뒤의 함수가 계속해서 기다리는 경우가 생긴다는 것이다. CPU 스케줄링에서 FIFO 방식의 부작용을 그대로 상상하면 된다. 사용자 경험을 위한 언어인 자바스크립트 특성상 이는 치명적인 단점이다. 따라서 비동기적 방식, Non-blocking 방식이 도입되었다. 싱글 스레드이지만 마치 병렬처리를 하는듯한 착시를 일으키자는 것! 비동기식 프로그래밍에서는 특정 작업이 백그라운드에서 실행되며..

자바스크립트 런타임 환경 자바스크립트 런타임 환경은 자바스크립트 코드가 실행되는 환경을 말하며, 크게 1) 브라우저와 2) 브라우저 밖(Node.js) 으로 구분할 수 있다. 본래 브라우저가 자바스크립트의 고향이고, Node.js 덕에 브라우저 밖에서도 자바스크립트를 구동할 수 있게 되었다. 1. 웹 브라우저 웹 브라우저는 자바스크립트의 가장 전통적인 런타임 환경이다. 여기서 자바스크립트의 목적은 HTML과 CSS로 된 정적인 웹 페이지를 동적 웹 페이지로 조작할 수 있도록 하는 것이다. (대표적으로 이벤트 처리, 실시간 화면 전환, 시각 효과 등) 이를 위해 브라우저 내에는 자바스크립트 코드를 파싱하는 자바스크립트 엔진이 내장되었는데, 이 엔진은 파싱 외에도 DOM API, 이벤트 핸들링, AJAX 통..