코어 자바스크립트

typkdev·2024년 10월 8일

자바스크립트

인터프리터 vs 컴파일

자바스크립트는 기본적으로 인터프리터 언어이지만, 최신 자바스크립트 엔진들은 두 가지 방식을 혼합하여 사용합니다.

인터프리터 방식:

코드를 한 줄씩 읽어 즉시 실행합니다.
실행 속도가 상대적으로 느릴 수 있지만, 즉시 실행이 가능합니다.
개발 과정에서 디버깅이 용이합니다.

컴파일 방식:

전체 코드를 기계어로 변환한 후 실행합니다.
초기 변환 시간이 필요하지만, 실행 속도가 빠릅니다.
최적화된 코드를 생성할 수 있습니다.

현대의 자바스크립트 엔진(예: V8)은 JIT(Just-In-Time) 컴파일 기술을 사용하여 두 방식의 장점을 결합합니다. 코드를 먼저 인터프리터로 실행하면서 자주 사용되는 부분을 컴파일하여 최적화합니다.

웹 브라우저 REPL

REPL은 Read-Eval-Print Loop의 약자로, 사용자의 입력을 읽고(Read), 평가하고(Eval), 결과를 출력한(Print) 후 다시 입력을 기다리는(Loop) 대화형 프로그래밍 환경을 의미합니다.

웹 브라우저의 개발자 도구 콘솔은 자바스크립트를 위한 REPL 환경을 제공합니다:

접근 방법: 대부분의 브라우저에서 F12 키나 Ctrl+Shift+I (Windows/Linux) 또는 Cmd+Option+I (Mac)를 눌러 개발자 도구를 열 수 있습니다.
기능:
- 자바스크립트 코드를 즉시 실행하고 결과를 확인할 수 있습니다.
- 변수를 선언하고 사용할 수 있습니다.
- 함수를 정의하고 호출할 수 있습니다.
- 웹 페이지의 DOM을 조작할 수 있습니다.
장점:
- 빠른 코드 테스트와 디버깅이 가능합니다.
- 웹 페이지의 상태를 실시간으로 확인하고 수정할 수 있습니다.
- 학습과 실험에 유용합니다.

사용 예:

> let x = 5;
undefined
> x + 3
8
> function greet(name) { return `Hello, ${name}!`; }
undefined
> greet("World")
"Hello, World!"

브라우저 REPL은 자바스크립트 개발자에게 매우 유용한 도구로, 코드의 즉각적인 실행과 결과 확인을 통해 개발 과정을 더욱 효율적으로 만들어 줍니다.

자바스크립트 런타임

자바스크립트 런타임은 자바스크립트 코드를 실행하는 환경을 말합니다. 대표적인 런타임으로는 브라우저와 Node.js가 있습니다. 런타임은 다음과 같은 구성요소를 포함합니다:

자바스크립트 엔진 (예: V8)
Web APIs (브라우저 환경) 또는 C++ APIs (Node.js 환경)
콜백 큐 (Callback Queue)
이벤트 루프 (Event Loop)

Citations:
[1] https://mingrove.tistory.com/4
[2] https://nadocoding.tistory.com/103
[3] https://blog.naver.com/chogar/222260494684
[4] https://fronquarry.tistory.com/91

비동기 처리

자바스크립트는 기본적으로 싱글 스레드 언어이지만, 비동기 처리를 통해 동시성을 구현합니다. 비동기 처리는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식입니다.
비동기 처리는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다[1].

주요 특징:
1. 작업을 백그라운드에서 처리하여 멀티 작업을 동시에 수행할 수 있습니다[1].
2. 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기)을 효율적으로 처리할 수 있습니다[4].

비동기 처리 방식:
1. 콜백 함수: 가장 기본적인 방식이지만 콜백 지옥 문제가 있습니다[4][5].
2. Promise: 콜백의 단점을 보완하며, then()과 catch() 메서드를 통해 결과를 처리합니다[5][6].
3. async/await: Promise를 기반으로 하며, 더욱 직관적인 코드 작성이 가능합니다[5][6].

자바스크립트 라이프 사이클

자바스크립트의 라이프 사이클은 다음과 같은 요소로 구성됩니다[3]:

호출 스택 (Call Stack):
- 자바스크립트는 단일 호출 스택을 사용합니다.
- 함수 호출 시 스택에 쌓이고, 실행 완료 시 스택에서 제거됩니다.
Web API:
- 브라우저에서 제공하는 API로, DOM, AJAX, Timeout 등을 처리합니다.
- 비동기 작업을 처리합니다.
태스크 큐 (Task Queue):
- 비동기적으로 실행된 콜백 함수가 대기하는 큐입니다.
이벤트 루프 (Event Loop):
- 호출 스택이 비어있을 때 태스크 큐의 콜백을 호출 스택으로 이동시킵니다.

작동 과정:
1. 동기 코드는 호출 스택에서 직접 실행됩니다.
2. 비동기 함수(예: setTimeout)는 Web API로 보내져 백그라운드에서 처리됩니다.
3. 비동기 작업이 완료되면 콜백 함수가 태스크 큐로 이동합니다.
4. 이벤트 루프는 호출 스택이 비었을 때 태스크 큐의 콜백을 호출 스택으로 이동시켜 실행합니다[3].

이러한 메커니즘을 통해 자바스크립트는 싱글 스레드 언어임에도 불구하고 비동기 작업을 효율적으로 처리할 수 있습니다. 이벤트 루프는 자바스크립트의 동시성 모델을 구현하는 핵심 요소로, 비동기 작업의 실행 순서와 타이밍을 관리합니다[3].

Citations:
[1] https://inpa.tistory.com/entry/%F0%9F%8C%90-js-async
[2] https://velog.io/@ahsy92/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%98%B8%EC%B6%9C-callback-promise-asyncawait%EC%9D%98-%ED%8A%B9%EC%A7%95%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90
[3] https://ingg.dev/js-work/
[4] https://jindev-t.tistory.com/90
[5] https://velog.io/@khy226/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80-Promise-asyncawait-%EA%B0%9C%EB%85%90
[6] https://voyage-dev.tistory.com/109
[7] https://f-lab.kr/insight/javascript-async-handling-20240724

이벤트 루프

이벤트 루프는 자바스크립트의 동시성 모델을 구현하는 핵심 메커니즘입니다. 이벤트 루프는 콜 스택이 비어있을 때 콜백 큐에서 콜백 함수를 가져와 실행합니다.

이제 예제를 통해 이 개념들이 어떻게 작동하는지 살펴보겠습니다.

console.log('1. 스크립트 시작');

setTimeout(() => {
    console.log('2. 타이머 콜백');
}, 0);

Promise.resolve().then(() => {
    console.log('3. 프로미스 콜백');
});

console.log('4. 스크립트 끝');

이 코드의 실행 순서를 단계별로 설명하겠습니다:

console.log('1. 스크립트 시작')이 콜 스택에 푸시되고 즉시 실행됩니다[1].
setTimeout이 콜 스택에 푸시됩니다. 브라우저의 Web API가 타이머를 시작하고, setTimeout은 콜 스택에서 팝됩니다[1].
Promise.resolve().then()이 콜 스택에 푸시됩니다. 프로미스가 즉시 해결되고, 콜백 함수가 마이크로태스크 큐에 추가됩니다[1].
console.log('4. 스크립트 끝')이 콜 스택에 푸시되고 실행됩니다[1].
메인 스크립트 실행이 완료되고 콜 스택이 비워집니다.
이벤트 루프가 마이크로태스크 큐를 확인하고, 프로미스 콜백을 콜 스택으로 이동시킵니다[1].
console.log('3. 프로미스 콜백')이 실행됩니다.
이벤트 루프가 태스크 큐를 확인하고, setTimeout 콜백을 콜 스택으로 이동시킵니다[1].
console.log('2. 타이머 콜백')이 실행됩니다.

실행 결과:

1. 스크립트 시작
4. 스크립트 끝
3. 프로미스 콜백
2. 타이머 콜백

이 예제에서 주목할 점:

비동기 작업(setTimeout, Promise)은 Web API에 의해 처리되며, 콜백은 각각의 큐(태스크 큐, 마이크로태스크 큐)에 추가됩니다[1].
마이크로태스크(프로미스 콜백)는 태스크(타이머 콜백)보다 우선순위가 높습니다[1].
이벤트 루프는 콜 스택이 비어있을 때만 큐에서 콜백을 가져와 실행합니다[1].

이러한 메커니즘을 통해 자바스크립트는 싱글 스레드 언어임에도 불구하고 비동기 작업을 효율적으로 처리할 수 있습니다[1]. 이벤트 루프는 자바스크립트의 동시성 모델을 구현하는 핵심 요소로, 비동기 작업의 실행 순서와 타이밍을 관리합니다[1][2].

Citations:
[1] https://inpa.tistory.com/entry/%F0%9F%94%84-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84-%EA%B5%AC%EC%A1%B0-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC
[2] https://velog.io/@minbr0ther/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84-Event-Loop
[3] https://blog.toktokhan.dev/t-767eb0fa38f3?gi=9abfb1809db5
[4] https://ilikezzi.tistory.com/68

typkdev

좋아한다 지엽적 연구를, 갖는다 끊임 없는 의문을

이전 포스트

vscode에서 에러핸들링

다음 포스트