JavaScript에서 동기와 비동기 프로그래밍 이해하기: 기본 개념과 예제
2024-12-02 15:23:33JavaScript 동기와 비동기 프로그래밍의 기본 개념
JavaScript는 단일 스레드 언어로 알려져 있습니다. 즉, 한 번에 하나의 코드 조각만 순차적으로 실행할 수 있다는 뜻입니다. 그러나 JavaScript는 비동기 작업을 효율적으로 처리할 수 있는 능력을 가졌기에 상호 작용적이고 반응성이 뛰어난 애플리케이션을 만들 수 있습니다. 이 글에서는 동기와 비동기 JavaScript의 주요 차이점을 실용적인 예제와 함께 탐구해 보겠습니다.
동기식 JavaScript란?
동기식 코드는 줄 단위로 한 단계씩 실행됩니다. 각 작업은 다음 명령으로 넘어가기 전에 이전 작업이 완료될 때까지 기다립니다. 이러한 방식은 간단하지만 경우에 따라 프로세스를 방해할 수 있습니다.
동기식 JavaScript 예제
console.log("시작");
// 시간이 많이 소요되는 작업 (예: 루프)
for (let i = 0; i < 9; i++) {
// 지연을 시뮬레이션합니다.
}
console.log("끝");
출력:
시작
끝
위 예시에서, 루프는 코드 실행을 막습니다. 만약 이것이 실세계 애플리케이션이라면, JavaScript가 이 루프를 처리하는 동안 UI가 멈춰 있을 것입니다.
비동기식 JavaScript란?
비동기식 코드는 특정 작업이 백그라운드에서 실행되도록 하여, 프로그램이 다른 작업을 기다리지 않고도 계속 실행될 수 있게 합니다. 이러한 작업을 처리하기 위해 JavaScript는 다양한 메커니즘을 제공하는데, 대표적인 것이 콜백, 프라미스 그리고 async/await입니다.
setTimeout을 이용한 비동기 JavaScript 예제
console.log("시작");
setTimeout(() => {
console.log("타임아웃 완료");
}, 2000); // 2초 지연
console.log("끝");
출력:
시작
끝
타임아웃 완료
여기서 setTimeout 함수는 비동기적으로 작동합니다. 2초 후에 콜백 함수를 실행하도록 예약되어 있지만, 그 동안 코드는 차단되지 않습니다.
동기와 비동기 JavaScript의 주요 차이점
| 특징 | 동기식 | 비동기식 |
|---|---|---|
| 실행 | 줄 단위로 실행 | 작업이 백그라운드에서 실행될 수 있음 |
| 차단 | 이후 코드 차단 | 비차단 |
| 예제 | 루프, 표준 함수 | 콜백, 프라미스, async/await |
비동기 프로그래밍을 위한 프라미스 사용
프라미스는 비동기 작업을 처리하는 것을 더 쉽게 만들어 줍니다. 다음은 프라미스를 이용한 예제입니다:
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("데이터가 성공적으로 가져왔습니다!");
}, 2000);
});
console.log("데이터 가져오는 중...");
fetchData.then((data) => {
console.log(data);
}).catch((error) => {
console.log(error);
});
출력:
데이터 가져오는 중...
데이터가 성공적으로 가져왔습니다!
Async/Await: 프라미스를 위한 간결한 구문
async 및 await 키워드는 프라미스와 함께 작업하는 것을 단순화합니다:
const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve("데이터가 성공적으로 가져왔습니다!");
}, 2000);
});
};
const fetchAsyncData = async () => {
console.log("데이터 가져오는 중...");
const data = await fetchData();
console.log(data);
};
fetchAsyncData();
출력:
데이터 가져오는 중...
데이터가 성공적으로 가져왔습니다!
결론
동기와 비동기 JavaScript의 차이를 이해하는 것은 효율적이고 차단되지 않는 애플리케이션을 구축하는 데 매우 중요합니다. 프라미스와 async/await 같은 비동기 패턴을 사용하여 부드러운 사용자 경험을 보장하세요.
이 주제에 대해 질문이나 공유하고 싶은 예제가 있으시다면 아래에 댓글을 남겨 주세요!