JavaScript에서 동기와 비동기 프로그래밍 이해하기: 기본 개념과 예제

2024-12-02 15:23:33

webdevjavascriptprogrammingbeginners

JavaScript 동기와 비동기 프로그래밍의 기본 개념

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 같은 비동기 패턴을 사용하여 부드러운 사용자 경험을 보장하세요.

이 주제에 대해 질문이나 공유하고 싶은 예제가 있으시다면 아래에 댓글을 남겨 주세요!

R_11