[JS] 9. 자바스크립트 동작 방식

최재원

Apr 03, 2025

Contents

🔹 1. 코드 실행 🔹 2. DOM 트리 구성 🔹 3. 이벤트 루프 (Event Loop)🔹 4. 화면 업데이트 (Rendering)

자바스크립트는 단일 스레드 환경에서 동작하며, 이벤트 기반 비동기 처리를 수행하는 언어입니다. 이를 효과적으로 이해하기 위해 다음의 개념을 살펴보겠습니다.

🔹 1. 코드 실행

자바스크립트 코드는 순차적으로 실행되지만, 특정 작업(예: I/O, 통신, 저장장치 접근 등)이 발생하면 이벤트 큐에 추가됩니다. 이러한 작업은 동기적(Synchronous) 또는 비동기적(Asynchronous) 으로 처리될 수 있습니다.

🔹 2. DOM 트리 구성

HTML 문서는 파싱 과정을 거쳐 DOM(Document Object Model) 트리로 변환됩니다. DOM 트리는 노드(Node)로 구성되며, 계층적인 구조를 가집니다. 이 구조를 통해 요소를 선택하고 조작할 수 있습니다.

🔹 3. 이벤트 루프 (Event Loop)

이벤트 루프는 비동기적으로 실행되는 코드(예: 버튼 클릭, 네트워크 요청 응답 등)를 처리하는 핵심 메커니즘입니다.

✔ 이벤트 루프의 동작 과정 1️⃣ 실행할 대기 중인 이벤트가 있는지 확인합니다. 2️⃣ 이벤트가 존재하면 콜백 큐(Callback Queue) 에서 해당 이벤트를 가져와 실행합니다. 3️⃣ 실행이 완료되면 다시 대기 상태로 돌아갑니다. 4️⃣ 비동기 작업은 clear -> await 과정을 거쳐 다시 실행됩니다.

🔹 4. 화면 업데이트 (Rendering)

이벤트 처리 후, DOM이 변경되면 브라우저가 이를 감지하여 화면을 업데이트합니다.

📌 예를 들어, 버튼을 클릭하면 버튼의 텍스트가 변경되거나 스타일이 적용되는 등의 변화가 발생할 수 있습니다.

See more posts

[JS] 9. 자바스크립트 동작 방식

🔹 1. 코드 실행

🔹 2. DOM 트리 구성

🔹 3. 이벤트 루프 (Event Loop)

🔹 4. 화면 업데이트 (Rendering)

More articles

[JS] 11. CSR(Client-Side-Rendering)

[JS] 10. get, post, put, delete

[운영체제] 7. 프로세스 상태(휴식, 보류)와 문맥 교환

[프로그래머스] (MySQL) 33. 이름이 없는 동물의 아이디