자바스크립트 스레드
자바스크립트에서의 스레드
▶ 자바스크립트는 싱글 스레드 언어로, 하나의 스레드에서 코드가 실행됩니다. 하지만 이를 보완하기 위해 여러 메커니즘을 사용하여 동시성을 처리합니다. 이번 포스트에서는 자바스크립트의 스레드 개념과 그 활용 방법에 대해 자세히 알아보겠습니다.
이벤트 루프
자바스크립트의 싱글 스레드 특성을 보완하는 핵심 메커니즘은 이벤트 루프입니다. 이벤트 루프는 콜백 함수나 비동기 작업을 관리하여 자바스크립트가 블로킹되지 않고 작업을 수행할 수 있게 해줍니다.
1
2
3
4
5
6
7
console.log('Start');
setTimeout(() => {
console.log('Timeout');
}, 1000);
console.log('End');
위의 코드는 “Start”와 “End”가 먼저 출력되고, 1초 후에 “Timeout”이 출력됩니다. 이는 이벤트 루프가 setTimeout의 콜백을 비동기적으로 처리하기 때문입니다.
Web Workers
Web Workers는 자바스크립트에서 멀티 스레딩을 구현할 수 있게 해주는 기능입니다. Web Workers를 사용하면 메인 스레드와 별도로 백그라운드에서 작업을 수행할 수 있습니다.
Web Workers 사용 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// worker.js
self.onmessage = function(e) {
const result = e.data * 2;
postMessage(result);
};
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
console.log('Result from worker:', e.data);
};
worker.postMessage(10);
위의 예시에서 worker.js는 별도의 스레드에서 실행되며, 메인 스레드와 메시지를 주고받습니다.
비동기 프로그래밍
자바스크립트에서 비동기 프로그래밍은 주로 콜백, 프로미스(Promise), 그리고 async/await를 통해 구현됩니다. 이 방식들은 동기 코드처럼 보이게 작성할 수 있어 가독성을 높여줍니다.
프로미스 사용 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data fetched');
}, 2000);
});
}
fetchData().then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});
async/await 사용 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data fetched');
}, 2000);
});
}
async function displayData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error);
}
}
displayData();
요약
자바스크립트는 싱글 스레드 언어지만, 이벤트 루프와 Web Workers, 비동기 프로그래밍을 통해 효율적으로 동시성을 관리할 수 있습니다. 이러한 메커니즘을 잘 활용하면 복잡한 비동기 작업도 쉽게 처리할 수 있습니다.
오늘은이렇게 자바스크립트에서의 스레드 개념과 활용 방법에 대해 알아보았는데요,
이를 잘 이해하고 활용하면 자바스크립트로 더 효율적이고 반응성 좋은 애플리케이션을 개발할 수 있겠죠?
그럼 저는 다음에 또 다른 유익한 내용을 가지고 돌아오겠습니다 😁!