비동기 처리

동기 vs 비동기

 

동기 (Synchronous)

한 작업이 끝난 후에 다음 작업이 시작되는 방식

 

비동기 (Asynchronous)

작업이 시작되면 그 작업의 완료를 기다리지 않고 다음 작업을 즉시 시작할 수 있는 방식

 

 

동기작업과 비동기작업 비교

실행 방식	한 작업이 끝난 후 다음 작업 시작	작업이 끝나기를 기다리지 않고 다음 작업 시작
블로킹	블로킹 (Blocking)	논블로킹 (Non-blocking)
적용 예시	간단한 계산, 순차적 작업	네트워크 요청, 파일 입출력, 타이머
장점	코드가 직관적이고 이해하기 쉬움	자원 활용이 효율적, UI 응답성이 높음
단점	긴 작업이 있을 경우 전체 시스템 지연 가능	코드 복잡도가 증가할 수 있음

 

---

비동기 처리 방법

콜백 함수 (Callback): 특정 작업이 완료된 후 호출되는 함수

function fetchData(callback) {
  setTimeout(() => {
    const data = { user: 'John Doe' };
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

 

 

Promise 객체

• 어떤 작업에 관한 '상태 정보'를 갖고 있는 객체
• 작업의 결과가 promise 객체에 저장
• promise 객체는 3가지 상태 존재
  • pending : 작업이 진행중
  • fulfilled : 작업이 완료됨 + 작업이 성공한 경우 성공 결과 정보도 함께 갖음
  • rejected : 작업이 실패함 + 작업이 실패한 이유 정보도 함께 갖음
  • pending에서 fulfilled나 rejected 상태가 되면 다른 상태를 가질 수가 없음
• 사용 이유 : 단지 callback 함수 대신해서 보기 쉽게 만들어주는 것
• 메서드
  • then, catch, finally 3가지의 메서드를 갖음
  • then : promise 객체가 fulfilled 상태가 되면 실행할 콜백함수를 등록하는 메서드
  • catch : promise 객체가 rejected 상태가 되면 실행할 콜백함수를 등록하는 메서드
  • finally : 어떤 작업의 성공, 실패 여부와 상관없이 항상 실행하고 싶은 콜백함수를 등록하는 메서드

 

async/await: 비동기 작업을 동기 코드처럼 작성할 수 있게 하는 문법

 

Callback, Promise 체인의 단점은 async와 await로 보완가능

• await는 async 함수 안에만 사용할 수 있는 특별한 문법
• Promise를 반환하는 함수 앞에 await를 붙이면, 해당 Promise의 상태가 바뀔 때까지 코드를 기다림
• Promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산을 시작하지 않음