[JavaScript] 비동기 프로그래밍

HyeonE·2025년 6월 22일

JS

목록 보기
17/17
post-thumbnail

📌 1. 동기(Synchronous) vs 비동기(Asynchronous)

•	동기: 코드가 순차적으로 실행되며, 앞의 작업이 끝날 때까지 다음 작업이 대기
•	비동기: 특정 작업을 백그라운드에서 실행하고, 이후 결과가 준비되면 처리
console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');
// 출력: 1 → 3 → 2

📌 2. 콜백 함수 (Callback)

•	비동기 작업이 완료되면 실행할 함수를 콜백이라고 함
•	너무 중첩되면 가독성이 떨어지는 콜백 지옥 발생 가능
setTimeout(() => {
  console.log('1초 후 실행');
}, 1000);

📌 3. 프로미스(Promise)

•	비동기 작업의 성공/실패를 다루는 객체
•	then, catch, finally를 사용해 처리
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('데이터 수신'), 1000);
  });
};

fetchData().then((data) => console.log(data));

📌 4. async / await

•	프로미스를 더 간결하게 사용할 수 있는 ES2017 문법
•	동기 코드처럼 작성 가능해 가독성 향상
async function getData() {
  const result = await fetchData();
  console.log(result);
}

📝 정리

•	JS는 싱글 스레드 기반으로, 비동기 처리는 콜백 큐와 이벤트 루프를 통해 동작
•	비동기 흐름은 콜백 → Promise → async/await 순으로 진화
•	await는 Promise가 resolve될 때까지 기다림
•	예외 처리는 try-catch 구문으로 처리
profile
프론트엔드 개발자가 되고싶은 대학생

0개의 댓글