동기,비동기 그리고 Promise의 Pending과 settled에 대하여

동기 & 비동기

 

동기(Synchronous)

• 동기는 '같은 시간에 일어나는'이라는 뜻
• 프로그래밍에서는 한 작업이 완료될 때까지 다음 작업이 기다린다는 것을 의미
• 즉, 작업들이 순서대로 차례차례 진행
  • 예를 들어, 세 개의 작업이 있을 때, 두 번째 작업은 첫 번째 작업이 완전히 끝날 때까지 기다리고, 세 번째 작업은 두 번째 작업이 완전히 끝날 때까지 기다림

 

비동기(Asynchronous)

• 비동기는 '동시에 일어나지 않는'이라는 뜻
• 프로그래밍에서 비동기는 한 작업이 완료되는 것을 기다리지 않고 다음 작업을 시작한다는 것을 의미
  • 예를 들어, 네트워크 요청과 같은 긴 작업을 시작하고, 그것이 완료되기를 기다리는 대신 다른 작업을 계속 수행할 수 있음
  • 작업이 완료되면 그 때 결과를 처리
• 이 둘의 주요 차이점은 프로그램이 어떻게 여러 작업을 관리하는지
• 동기 프로그래밍은 간단하고 직관적일 수 있지만, 한 번에 하나의 작업만 처리할 수 있음
• 비동기 프로그래밍은 복잡할 수 있지만, 여러 작업을 동시에 처리할 수 있어 효율적일 수 있음

---

async 란?

• JavaScript의 비동기 프로그래밍을 간편하게 만들어주는 기능
• 이 키워드는 함수 앞에 위치하며, 이 함수가 비동기적으로 동작하도록 하여 Promise 객체를 반환하게 만듦
• async 함수 내부에서는 await 키워드를 사용할 수 있음
• async와 await를 사용하면, 비동기 코드를 마치 동기적인 코드처럼 쓸 수 있어, 이해하고 작성하기 훨씬 쉬워짐
• async 함수는 언제나 Promise를 반환하므로, 함수의 호출자는 .then이나 await를 사용해 그 결과를 받을 수 있음

 

예시

async function fetchTodos() {
  const response = await fetch('<http://localhost:3001/todos>');
  const todos = await response.json();
  console.log(todos);
}
fetchTodos();

• fetchTodos 함수는 비동기적으로 동작
• 내부에서 두 번의 await를 사용
  • fetch 함수와 response.json 메소드 모두 Promise를 반환
  • 이들의 완료를 기다리기 위해 await를 사용

---

await의 사용

• await 키워드는 JavaScript에서 비동기 처리 패턴의 일부
• await은 Promise가 settled 상태 (즉, fulfilled 또는 rejected)가 될 때까지 실행을 일시적으로 중단하고, Promise가 완료되면 결과를 반환
• await을 사용하지 않으면, Promise 객체는 즉시 반환
• 이는 아직 완료되지 않은 비동기 작업을 나타냄
• 이 때문에, await 없이 Promise를 반환하는 함수를 호출하면 "Promise {<pending>}"이 출력되는 것

await의 사용 예제

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("done!"), 1000)
});

// `await`을 사용하지 않으면, Promise는 즉시 반환됩니다.
console.log(promise); // Promise {<pending>}

// `await`을 사용하면, Promise가 settled 상태가 될 때까지 기다립니다.
let result = await promise; 
console.log(result); // "done!"

• await을 사용하지 않으면, Promise는 즉시 반환되며 "Promise {<pending>}"를 출력
• await을 사용하면 Promise가 settled 상태가 될 때까지 기다린 후 결과 ("done!")를 출력

pending과 settled

• Pending
  • "대기 중" 또는 "처리 대기 중"이라는 뜻
  • Promise의 context에서 보면, Promise 객체가 아직 작업을 완료하지 않았고 결과값이 결정되지 않은 상태
  • 즉, 비동기 작업이 아직 끝나지 않아 최종 결과값이 나오지 않은 상태가 Pending 상태
• Settled
  • "결정됨" 또는 "완료됨"이라는 뜻
  • Promise의 context에서 보면, 비동기 작업이 완료되었고 그 결과가 결정된 상태
  • 즉, 비동기 작업이 끝나서 최종 결과값이 나온 상태
• Promise는 처음 생성될 때 "Pending" 상태이며, 비동기 작업이 완료되면 "Settled" 상태가 됨
• Settled는 두 가지 하위 상태로 나뉨
  • fulfilled / rejected
    • "fulfilled"는 작업이 성공적으로 완료된 것
    • "rejected"는 작업이 실패하거나 오류가 발생한 것