1. 동기 vs. 비동기

동기 (Synchronous)

• 직렬적으로 작동: 작업이 순차적으로 진행되는 방식.
• 요청을 보내고 그 결과를 기다렸다가 다음 작업을 수행함.
• 실행 순서를 보장하며, 순서대로 작업이 완료될 때까지 다음 작업이 대기.

비동기 (Asynchronous)

• 병렬적으로 작동: 여러 작업이 동시에 진행되는 방식.
• 요청을 보내고 결과를 기다리지 않고 다음 작업을 수행함.
• 작업이 완료되면 특정 이벤트(콜백 함수, 프라미스 등)를 통해 결과를 처리.
• 비동기 작업은 순서를 보장하지 않을 수 있음.

차이 비교

• 동기: 작업 순서를 중요시하며, 순서대로 실행되어야 하는 경우에 사용.
• 비동기: 시간이 오래 걸리는 작업이나 외부 요청을 기다리는 동안 다른 작업을 수행하고 싶을 때 사용.

2. Promise란?

• Promise는 비동기 작업의 결과를 나타내는 객체로, 성공 또는 실패와 같은 상태를 가지고 있음.
• 주로 콜백 지옥(callback hell)을 피하고 코드를 더 깔끔하게 작성하기 위해 사용됨.

Promise의 상태(State)

1. Pending (대기): 초기 상태. 작업이 성공하거나 실패할 때까지 대기.
2. Fulfilled (이행): 작업이 성공적으로 완료됨.
3. Rejected (거부): 작업이 실패함.

Promise 예시

javascriptCopy code
const fetchData = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  setTimeout(() => {
    const success = Math.random() > 0.5;
    if (success) {
      resolve('Data fetched successfully!');
    } else {
      reject(new Error('Failed to fetch data.'));
    }
  }, 1000);
});

// 사용
fetchData
  .then(data => console.log(data))
  .catch(error => console.error(error.message));

3. Async / Await

async 함수

• async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환.
• 비동기 작업이 완료될 때까지 기다리며, 결과는 이행된 프로미스로 반환됨.

await 키워드

• await는 async 함수 내에서만 사용 가능.
• Promise가 처리될 때까지 기다림. 결과를 반환하고 작업을 일시 중단.

Async / Await 예시

javascriptCopy code
async function fetchData() {
  try {
    // 비동기 작업 수행
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error.message);
  }
}

// 사용
fetchData();

비교: Promise vs. Async / Await

javascriptCopy code
// Promise
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error.message));

// Async / Await
async function fetchData() {
  try {
    const data = await fetchDataPromise();
    console.log(data);
  } catch (error) {
    console.error(error.message);
  }
}

Async / Await은 코드를 더 읽기 쉽게 만들어주며, 에러 처리도 일반적인 try...catch 구문을 사용해 보다 명확하게 할 수 있다.