자바스크립트의 런타임 구조와 비동기 처리의 기초
자바스크립트 런타임 구조와 싱글 스레드
자바스크립트는 기본적으로 싱글 스레드(Single Thread) 환경에서 동작합니다. 이는 자바스크립트가 한 번에 하나의 작업만 처리하는 방식이라는 뜻입니다. 한 번에 여러 작업을 동시에 처리하지 않고, 순차적으로 처리하는 구조입니다.
하지만 자바스크립트는 비동기 프로그래밍을 통해 여러 작업을 동시에 처리하는 것처럼 보이게 할 수 있습니다. 이를 위해 이벤트 루프(Event Loop)와 콜백 큐(Callback Queue), 호이스팅(Hoisting) 등의 개념을 사용합니다.
1. 싱글 스레드(Single Thread)란?
싱글 스레드는 프로그램이 한 번에 하나의 작업만 처리하는 방식입니다. 자바스크립트는 싱글 스레드 언어로 설계되어, 한 번에 하나의 작업을 순차적으로 처리합니다. 하지만 비동기적 처리 방식을 통해, 마치 여러 작업을 동시에 실행하는 것처럼 보이게 할 수 있습니다.
2. 자바스크립트 런타임 구조
자바스크립트의 실행은 실행 컨텍스트를 기준으로 이루어집니다. 실행 컨텍스트는 코드가 실행될 때 자바스크립트 엔진이 실행하는 코드와 관련된 환경 정보를 포함합니다. 또한, 자바스크립트의 호이스팅 기능은 변수와 함수 선언을 코드 실행 전에 올려서 실행 순서를 관리합니다.
- 호이스팅(Hoisting): 코드가 실행되기 전에 변수와 함수 선언을 위로 끌어올려 실행됩니다.
- 콜백 큐(Callback Queue): 비동기 작업은 콜백 큐에 쌓이고, 메인 스레드는 이를 다 처리한 후 콜백 큐에서 작업을 하나씩 꺼내 실행합니다.
- 이벤트 루프(Event Loop): 자바스크립트는 이벤트 루프를 통해 메인 스레드가 끝난 후에 비동기 작업을 처리할 수 있도록 합니다.
3. 싱글 스레드와 비동기 작업 처리
자바스크립트가 싱글 스레드일지라도, 비동기 작업을 처리하기 위한 메커니즘이 존재합니다. 예를 들어, setTimeout을 이용해 비동기 작업을 처리할 때, 작업은 콜백 큐에 들어가게 되며, 메인 스레드가 비동기 작업을 처리한 후 실행됩니다.
console.log("Start");
setTimeout(() => {
console.log("Timeout");
}, 0);
console.log("End");
위 코드에서는 "Start"와 "End"가 먼저 출력되고, setTimeout에 설정된 "Timeout"은 메인 스레드가 비워진 후에 실행됩니다. 이는 비동기 작업이 처리되는 방식입니다.
콜백 함수와 Promise, Web API
자바스크립트에서 비동기 작업을 처리할 때 사용되는 중요한 개념은 콜백 함수, Promise, 그리고 Web API입니다. 이들은 자바스크립트가 비동기적인 동작을 할 수 있도록 도와주는 핵심 요소들입니다.
1. 콜백 함수(Callback Function)
콜백 함수는 다른 함수에 인자로 전달되어, 특정 작업이 끝난 후 실행되는 함수입니다. 비동기 작업을 다룰 때 자주 사용되며, 예를 들어 데이터를 불러오는 작업이 끝난 후 실행할 작업을 지정할 때 유용합니다.
function fetchData(callback) {
setTimeout(() => {
console.log("데이터가 로드되었습니다!");
callback(); // 콜백 함수 실행
}, 2000);
}
function onDataLoaded() {
console.log("데이터가 로드되었을 때 실행되는 함수");
}
fetchData(onDataLoaded);
위 코드에서는 fetchData 함수가 2초 후에 데이터를 로드한 후 onDataLoaded 콜백 함수를 호출합니다.
2. Promise
Promise는 콜백 함수의 단점을 해결하기 위한 방법으로 등장했습니다. 비동기 작업의 성공 또는 실패를 처리하고, then과 catch를 사용하여 후속 작업을 처리할 수 있습니다.
let myPromise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("작업이 성공적으로 완료되었습니다!");
} else {
reject("작업에 실패했습니다.");
}
});
myPromise
.then((message) => {
console.log(message); // 성공시 실행
})
.catch((message) => {
console.log(message); // 실패시 실행
});
위의 코드에서 resolve는 성공적인 결과를 반환하고, reject는 실패를 처리합니다. then과 catch는 각각 성공과 실패에 대한 후속 작업을 정의합니다.
3. Web API
자바스크립트는 Web API를 통해 웹 브라우저에서 제공하는 다양한 기능을 사용할 수 있습니다. 대표적인 예로 fetch API, setTimeout 등이 있습니다. fetch API는 서버에서 데이터를 가져오거나 보내는 데 사용되며, setTimeout은 특정 시간이 지난 후에 함수를 실행하는 데 사용됩니다.
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
위의 fetch 예시는 서버에서 데이터를 가져와서 콘솔에 출력하는 코드입니다. fetch는 비동기 방식으로 동작하며, Promise를 반환하여 작업을 순차적으로 처리합니다.