callback, promise, async/await 를 알아보자

1. callback 함수란?

기본적인 개념은 '함수를 다른 함수에 전달하고, 그 함수가 나중에 호출될 때 실행된다'이다.
자바스크립트에서 콜백 함수는 매우 중요한 역할을 하며, 특히 비동기 작업을 처리할 때 많이 사용된다.
예를 들어, 이벤트 처리, 타이머 설정, 비동기 요청 등에 사용된다.

/* 1. 간단한 콜백 예제 */
function add(a, b, callback) {
  const result = a + b;
  callback(result);
}

function printResult(result) {
  console.log('Result:', result);
}

// add 함수에 printResult 콜백 함수를 전달
add(2, 3, printResult); // 출력: Result: 5

//=====================================================================

/* 2. 비동기 콜백 예제 */
function sayHello() {
  console.log('Hello!');
}

// 2초 후에 sayHello 함수 실행
setTimeout(sayHello, 2000); // 2초 후에 "Hello!" 출력

//=====================================================================

/* 
3. 비동기 API 호출 예제
fetchData 함수는 fetch API를 사용해 데이터를 가져오고, 
성공적으로 데이터를 가져오면 handleData 콜백 함수를 호출해 데이터를 처리
*/
function fetchData(callback) {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(data => callback(data))
    .catch(error => console.error('Error:', error));
}

function handleData(data) {
  console.log('Fetched Data:', data);
}

// fetchData 함수에 handleData 콜백 함수를 전달
fetchData(handleData);

2. promise 란?

미래에 결과를 제공하는 객체로 비동기 작업이 성공했을 때 그 결과 값을 반환하거나, 실패했을 때 그 이유를 제공해준다. axios, fetch 라이브러리의 경우 이미 promise가 포함 되어있기 때문에 new Promise 선언이 생략된다.

2-1. promise의 상태

• Pending (대기): 초기 상태, 아직 결과가 없는 상태.

• Fulfilled (이행): 작업이 성공적으로 완료된 상태.

• Rejected (거부): 작업이 실패한 상태.

/*
1. 간단한 Promise 생성 및 사용
success 변수가 true일 때 Promise가 성공적으로 이행되고, resolve 함수가 호출되고 반대로 success가 false라면 reject 함수가 호출된다.
*/

const myPromise = new Promise((resolve, reject) => {
  const success = true; // 성공 여부를 나타내는 변수

  if (success) {
    resolve('작업이 성공적으로 완료되었습니다!');
  } else {
    reject('작업이 실패했습니다.');
  }
});

// Promise 사용
myPromise
  .then((message) => {
    console.log(message); // 출력: 작업이 성공적으로 완료되었습니다!
  })
  .catch((error) => {
    console.error(error); // 에러 발생 시 출력
  });

//=====================================================================

/*
2. 비동기 작업에서의 Promise
asyncFunction은 2초 후에 resolve를 호출해 Promise를 이행하고 그 결과, then 메소드에서 성공 메시지를 출력한다.
*/

const asyncFunction = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('비동기 작업이 완료되었습니다!');
    }, 2000);
  });
};

// Promise 사용
asyncFunction()
  .then((message) => {
    console.log(message); // 출력: 비동기 작업이 완료되었습니다!
  })
  .catch((error) => {
    console.error(error); // 에러 발생 시 출력
  });

3. async/await 란?

비동기 작업을 처리하는 더 직관적이고 읽기 쉬운 방법을 제공하는 방법으로 Promise를 사용하는 대신, 동기식 코드처럼 비동기 작업을 작성할 수 있게 도와준다.

아래는 fetch를 활용한 예제이다.

/*
1. 간단한 사용 예제
fetchData 함수가 비동기로 fetch를 사용해 데이터를 가져오고 있다. await 키워드를 사용해 fetch 함수가 완료될 때까지 기다린 후, 그 결과를 JSON으로 변환하고 만약 API 호출이 실패하면 catch 블록에서 에러를 처리한다.
*/
async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    console.log('Fetched Data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

//=====================================================================


/*
2. 여러 개의 fetch 요청 예제
fetch를 사용해 두 개의 API 호출을 순차적으로 처리하고, 각각의 결과를 출력하고 있댜. await 키워드를 사용해 첫 번째 요청이 완료된 후 두 번째 요청을 처리하도록 한다.
*/

async function fetchMultipleData() {
  try {
    const response1 = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data1 = await response1.json();
    console.log('First Data:', data1);

    const response2 = await fetch('https://jsonplaceholder.typicode.com/todos/2');
    const data2 = await response2.json();
    console.log('Second Data:', data2);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchMultipleData();

/*
3. Promise.all을 활용한 예제
두 개의 fetch 요청을 동시에 처리하고 두 요청이 모두 완료되면 결과를 JSON으로 변환하고 출력한다.
*/

async function fetchAllData() {
  try {
    const [response1, response2] = await Promise.all([
      fetch('https://jsonplaceholder.typicode.com/todos/1'),
      fetch('https://jsonplaceholder.typicode.com/todos/2')
    ]);

    const data1 = await response1.json();
    const data2 = await response2.json();

    console.log('First Data:', data1);
    console.log('Second Data:', data2);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchAllData();