첫사랑은 아름다워서

함수형 프로그래밍 함수형 프로그래밍은 부수 효과(Side Effect)가 최대한 발생하지 않도록 하고, 함수 로직의 조합성을 강조하는 프로그래밍 패러다임입니다. 부수 효과가 발생하지 않도록 하는 이유는 예기치 못한 동작으로 인한 오류를 방지하기 위함이고, 함수 로직의 조합성을 강조하는 이유는 복잡성을 줄이면서 생산성을 높여주기 때문입니다.

싱글 스레드로 동작하는 자바스크립트 😕 자바스크립트 엔진은 단 하나의 실행 컨텍스트를 통해 함수의 호출 순서를 관리합니다. 실행 컨텍스트는 스택의 구조를 띄고 있으며, 스택의 최상위 요소는 현재 실행 중인 함수입니다. 스택 구조로 이루어져 있기 때문에 최상위에서 실행 중인 함수가 종료되어야만 다음 함수가 실행될 수 있습니다. 이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(Single thread) 방식으로 동작합니다. 동작 원리에 대해 공부하신 분들이라면 여기서 '자바스크립트는 싱글 스레드면서 어떻게 setTimeout/Interval과 같은 함수들이 비동기로 동작할 수 있는 것일까?'와 같은 의문이 생기실 겁니다. 이는 브라우저에 내장되어 있는 이벤트 루프(Event ..

자바스크립트 엔진 동작 과정 🔥 HTML 파서는 문서를 위에서부터 아래로 읽으며 필요한 리소스를 확인합니다. 그러는 중간에 자바스크립트 코드를 불러오는 script 태그를 발견하면, 제어권을 자바스크립트 엔진에게 넘기면서 클라이언트는 서버로 요청을 시작하고, 서버는 이에 따라 파일을 메모리에 적재 후 바이트 스트림(Byte Stream)을 통해 전달합니다. 자바스크립트 엔진은 바이트 스트림으로 넘어온 스크립트 파일을 디코더를 통해 해석합니다. 바이트 스크림 디코더는 바이트 값을 해석하면서, 그 자체만으로 최소한의 문법적 의미를 갖는 토큰을 생성합니다. 자바스크립트 엔진은 pre-parser와 parser 두 개의 파서를 사용합니다. 왜냐하면 웹 사이트의 로딩 속도를 높이기 위해 당장은 불필요한 코드를 분..

브라우저 렌더링 과정 🤔 자바스크립트는 현재 Node.js의 등장으로 백엔드에서도 사용되고 있지만, 그래도 웹 어플리케이션을 만들 때 주로 사용되고 있습니다. 그래서 이번에는 브라우저에서 HTML, CSS, 그리고 자바스크립트로 작성한 문서가 렌더링되는 과정을 알아 보려 합니다. 빠르고 신뢰할 수 있는 웹사이트를 구축하려면, 브라우저가 웹페이지를 렌더링하기 위해 거치는 단계들의 메커니즘을 이해하는 것이 필요하다 생각합니다. 아래에서 소개할 렌더링 과정을 요약하면 다음과 같습니다. HTML 파싱 외부 리소스 가져오기 CSS 파싱 및 CSSOM 생성 자바스크립트 실행 DOM과 CSSOM 병합 후 렌더 트리 생성 레이아웃 계산 및 페인트 렌더링(Rendering): HTML, CSS, JavaScript로 작..

유사 배열 🤔 이번에는 유사 배열, 정확히는 유사 배열 객체(Array-like object)를 만들어 보려 합니다. 유사 배열 객체는 length 프로퍼티를 가지고 있으며, for-in을 통해 요소 순회가 가능한 객체를 의미합니다. 다만 결정적으로 배열의 메소드는 사용할 수 없기 때문에 유사하다는 의미에서 유사 배열이라 부르고 있습니다. ES6 이전에는 저마다 규칙을 가지고 유사 배열을 구현했지만, ES6부터는 순회 가능한 구조에 이터레이션 프로토콜을 구현하면 유사 배열을 쉽게 만들 수 있습니다. 이터레이션 프로토콜을 구현하면 for-in, for-of와 같은 순회 문법이나 스프레드 문법, 디스트럭쳐링을 사용할 수 있습니다. 이터레이션 프로토콜 ⚡️ 이터레이션 프로토콜(Iteration Protocol..