📌 1. 동기(Synchronous) vs 비동기(Asynchronous)
• 동기: 코드가 순차적으로 실행되며, 앞의 작업이 끝날 때까지 다음 작업이 대기
• 비동기: 특정 작업을 백그라운드에서 실행하고, 이후 결과가 준비되면 처리
console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');
📌 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 구문으로 처리