동기와 비동기

동기(synchronous)와 비동기(asynchronous)는 작업이 실행되는 방식에 대한 개념이다. 작업의 흐름이나 시간적 순서에 따라 구분된다.

 

동기

순차적으로 작업을 처리하는 방식이다. 한 작업이 끝난 후 다음 작업을 실행한다. 앞선 작업이 완료될 때까지 뒤의 작업이 실행되지 않는다. 작업의 흐름이 직관적이고 단순하다.

console.log("작업 1 시작");
console.log("작업 1 끝");

console.log("작업 2 시작");
console.log("작업 2 끝");

 

비동기

작업이 독립적으로 실행되며, 다른 작업을 기다리지 않고 진행되는 방식이다. 즉, 한 작업이 실행되는 동안 다른 작업을 동시에 할 수 있다. 보통 이벤트 기반으로 작동하거나 타이머, 서버 요청 등에서 사용된다. 콜백 함수, 프로미스(Promise), async/await 등을 사용하여 결과를 처리한다.

console.log("작업 1 시작");

setTimeout(() => {
  console.log("작업 1 끝");
}, 2000); // 2초 후에 실행되는 비동기 작업

console.log("작업 2 시작");
console.log("작업 2 끝");

이 경우, 작업2는 작업1과 관계없이 즉시 실행된다.

이런 비동기는 긴 작업이 실행되는 동안에도 UI가 멈추지 않고 사용자와 상호작용을 계속할 수 있으며 작업의 완료 시점이 예측 불가능하다. 

 

비동기 예시 : setTimeout

console.log("작업 1 시작");

setTimeout(() => {
  console.log("작업 1 끝");
}, 2000); // 2초 후에 실행되는 비동기 작업

console.log("작업 2 시작");
console.log("작업 2 끝");

 

비동기 예시 : fetch (서버 요청)

console.log("데이터 요청 시작");

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    console.log("서버 응답 데이터:", data);
  });

console.log("데이터 요청 중...");

데이터 요청 시작과 데이터 요청 중은 바로 출력된다. fetch는 서버에 요청을 보내고, 응답이 오면 .then()으로 결과를 처리한다.