동기 / 비동기

최종 수정: 2025.05.28

동기 / 비동기

자바스크립트의 실행 방식에 대한 개념이며, 특히 웹 개발에서 아주 중요한 개념이다.

---

■ 동기 (Synchronous)

작업이 순차적으로 처리되며, 코드가 위에서 아래로 실행된다. 직관적이지만 오래 걸리는 작업이 있으면 전체가 멈춘다. 이를 블로킹(blocking) 방식이라고도 한다.

 

순차적으로 실행되는 만큼, 단순하고 예측 가능하다.

---

■ 비동기 (Asynchronous)

시간이 걸리는 작업은 작업이 백그라운드에서 실행하고 완료되면 나중에 알림(콜백, Promise 등)으로 처리된다.

 

• 웹 요청, 타이머, 파일 읽기 등에서 자주 사용된다.
• 빠른 사용자 경험을 제공하다.
• 비동기 결과 처리를 위해 콜백, Promise, async / await 등을 사용한다.

 

Q. 콜백 (callback)
다른 함수에 전달되어, 특정 시점에 호출되는 함수로, 어떤 작업이 끝났을 때 실행되라고 넘겨주는 함수이다.

 

Q. 콜백 함수 (callback function)

콜백으로 전달되는 그 '함수' 자체를 말한다. '콜백'은 개념, '콜백 함수'는 그것을 구현한 함수이다.

function greet(name, callback) {
  console.log("안녕하세요, " + name);
  callback();  // 전달된 콜백 함수 호출
}

function sayBye() {
  console.log("잘 가요~");
}

greet("영택", sayBye);

---

■ Event Loop

자바스크립트는 싱글 스레드(single-thread) 기반이지만, 비동기 처리를 위해 동시성(concurrency)를 구현한다.

 

동작 흐름

 

1. Call Stack: 함수 실행이 쌓이는 스택
2. Web APIs (브라우저 제공): setTimeout, fetch 등 비동기 작업 처리
3. Callback Queue: 비동기 작업이 끝나면 콜백을 이 큐에 보냄
4. Event Loop: Call Stack이 비어 있으면 Callback Queue에서 작업을 가져와 실행

 

---

■ 콜백 지옥 (Callback Hell)

비동기 작업을 중첨된 콜백으로 처리할 떄 코드가 복잡하고 가독성이 떨어지는 현상을 말한다.

 

• 코드가 오른쪽으로 점점 밀려 피라미드 구조를 형성한다.
• 디버깅, 에러 처리, 유지보수에 대한 어려움이 있다.

이를 해결하기 위해

1. Promise를 사용한다.

• 콜백을 체인으로 연결하는 방식이며, catch()를 사용해 에러 처리가 간편해진다.
• Promise.all을 통해 병렬 처리를 상대적으로 명확하게 처리할 수 있다.
• 여러 비동기 작업을 처리하거나, 간단한 체이닝 작업 또는 비동기 작업으르 리턴해야 할 때 사용하면 좋다.

 

2. async / await

• 동기식 코드처럼 직관적이다.
• 가독성이 좋고 에러 핸들링도 try-catch로 가능하다.
• 내부적으로 Promise를 기반으로 작동한다.