비동기 처리

멈추지 않는 웹의 비밀

​JavaScript의 가장 중요한 특징 중 하나는 비동기 처리(Asynchronous Processing) 입니다. 일반적으로 코드는 한 줄씩 순서대로 실행되지만, 웹에서는 서버와 데이터를 주고받거나 파일을 읽는 작업처럼 시간이 오래 걸리는 일이 많습니다. 이런 작업을 동기적으로 처리하면 브라우저가 멈추는 문제가 발생합니다. 이를 해결하는 기술이 비동기 처리입니다.

콜백 함수의 한계

과거에는 비동기 처리를 위해 콜백 함수를 사용했습니다.

setTimeout(() => {
  console.log("3초 후 실행");
}, 3000);

하지만 콜백이 중첩되면 코드가 복잡해져서 콜백 지옥(callback hell) 이라는 문제가 생깁니다.

Promise의 등장

Promise는 콜백 문제를 해결하기 위해 도입된 개념입니다.

function getData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("데이터 로드 완료"), 2000);
  });
}


getData().then((result) => console.log(result));

Promise는 “미래에 완료될 작업”을 표현하며, .then() 체인을 이용해 결과를 처리합니다.

async/await – 가장 직관적인 방식

ES8에서는 async/await 문법이 추가되어 비동기 처리를 더 깔끔하게 표현할 수 있습니다.

async function fetchData() {
  const data = await getData();
  console.log(data);
}
fetchData();

이렇게 작성하면 비동기 코드도 동기 코드처럼 읽히기 때문에 가독성이 좋아집니다.

실무 활용 예시

• API 요청 및 응답 처리

• 대용량 파일 업로드/다운로드

• 애니메이션과 타이머 처리