개발하는 단비

자바스크립트 모듈 시스템의 과거, 현재, 그리고 프론트엔드 표준 1. 모듈 시스템이 왜 필요해졌나초기의 자바스크립트는 파일 단위 스코프 개념이 없었다.모든 변수가 전역에 노출되었고, 규모가 커질수록 이름 충돌과 의존성 관리가 큰 문제가 되었다.이를 해결하기 위해 등장한 것이 모듈 시스템이며, 그 시작이 Node.js 기반의 CommonJS, 그리고 표준으로 채택된 ES Modules이다. 2. CJS (CommonJS)란 무엇인가CommonJS는 Node.js 환경에서 모듈화를 위해 만들어진 시스템이다.const fs = require('fs');module.exports = { readFile} 핵심 특징런타임 시점에 모듈 로드require / module.exports 사용동기 로딩 기반Node.j..

웹 브라우저는 단순히 HTML을 보여주는 프로그램이 아니다.사용자 입력을 처리하고, 네트워크 통신을 수행하며, 복잡한 렌더링 파이프라인을 거쳐 최종 화면을 그린다.이 글에서는 브라우저의 내부 구성에 대해 다루려고 한다.브라우저의 전체 구조 한눈에 보기아래는 브라우저를 구성하는 주요 컴포넌트와 역할을 정리한 구조도다. 이 구조를 기준으로 이후 동작 흐름을 이해하면 훨씬 수월하다.1. 사용자 인터페이스 (User Interface)사용자가 직접 상호작용하는 영역이다.주소창뒤로 / 앞으로 버튼새로고침북마크❗️중요한 점사용자 인터페이스는 렌더링 엔진과 직접 화면을 그리지 않는다.입력 이벤트를 받아 브라우저 엔진으로 전달하는 역할에 가깝다. 2. 브라우저 엔진 (Browser Engine)브라우저 엔진은 사용자 ..

JavaScript는 싱글 스레드(single-threaded) 언어다.하지만 브라우저 환경에서 우리는 비동기 네트워크 요청, 타이머, 사용자 이벤트 등 수많은 작업을 동시에 처리하는 것처럼 느낀다.이 착시를 가능하게 만드는 핵심 메커니즘이 바로 이벤트 루프(Event Loop) 와 태스크 큐(Task Queue) 다.이 글에서는 이벤트 루프의 동작 구조를 기반으로마이크로 태스크(Microtask) 와 매크로 태스크(Macrotask) 가 어떤 순서로 실행되는지,그리고 이 차이가 실무에서 왜 중요한지까지 다룬다.1. JavaScript 실행 환경의 기본 구조브라우저에서 JavaScript가 실행될 때, 내부적으로는 다음과 같은 구성 요소들이 협력한다.Call StackWeb APIsTask QueueMa..