자바스크립트 비동기 처리 쉽게 이해하기: 콜백 지옥 탈출, Promise와 async/await 정리

자바스크립트 비동기 처리 쉽게 이해하기: 콜백 지옥 탈출, Promise와 async/await 정리

​

평상시 익숙하지만, 갑자기 헷갈리는 경우가 있는 동기/비동기 코딩..

짧게 핵심있게, 요약 정리해보았다.

동기 vs 비동기

동기(Sync) : 한 작업이 끝나야 다름 작업 처리, 직렬 처리

비동기(Async): 기다리지 않고 다음 작업 진행, 병렬 처리

​

비동기 처리 방식

*콜백 callback

초창기 비동기 방식

function oldTask(cb) {
  setTimeout(() => cb("완료!"), 1000);
}
oldTask(result => console.log(result));

 

단점, 콜백 중첩으로 콜백 지옥 발생

​

*프로미스 Promise

비동기 결과를 다루는 객체

const fetchData = () => new Promise(resolve => {
  setTimeout(() => resolve("완료!"), 1000);
});

fetchData()
  .then(data => console.log(data))
  .catch(err => console.error(err))
  .finally(() => console.log("끝!"));

 

*싱크/어싱크 Sync/Async

async function load() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error("에러:", err);
  }
}

 

promise를 더 직관적으로 쓰는 문법,

await 덕분에 코드가 동기처럼 읽혀 가독성이 높음.

​

*타이머 함수(setTimeout / setInteral)

setTimeout(() => console.log("3초 후 실행"), 3000);
setInterval(() => console.log("반복 실행"), 1000);

 

요약

Callback: 옛날 방식, 콜백 지옥 문제

Promise: 비동기 결과 표현 (then/catch)

async/await: Promise를 더 쉽게, 실무 표준

setTimeout/Interval: 기본 비동기 도구

try/catch: async/await 에러 처리

비동기 처리의 진화: Callback > Promise > async/await

실무에서는 async/await + try/catch 조합을 사용하고 있다.

​

끝!