비동기 처리(asynchronous programming)는 JS에서 매우 중요한 개념이다.
비동기 처리를 통해 긴 작업이 진행되는 동안에도 다른 작업을 계속 수행할 수 있다.
이는 특히 웹 개발에서 사용자 인터페이스가 멈추지 않고 반응성을 유지하는 데 필수적이다.

비동기 처리의 필요성

JS는 기본적으로 단일 스레드로 동작한다.
즉, 한 번에 하나의 작업만 수행할 수 있다.

만약 긴 작업(예: 서버 요청, 파일 읽기 등)이 동기적으로 처리된다면, 그 작업이 완료될 때까지 다른 작업은 모두 대기해야 한다. 비동기 처리는 이러한 문제를 해결한다.

비동기 처리 방법

1. 콜백 함수 (Callback Functions)

• 가장 기본적인 비동기 처리 방법이다.
  함수가 완료된 후 호출되는 함수를 전달한다.

function fetchData(callback){
  setTimeout(()=>{
    callback('데이터 로드 완료');
  }, 1000);
}

fetchData((message) => {
  console.log(message); // 1초 후 '데이터 로드 완료' 출력
});

2. 프로미스 (Promise)

• 콜백의 단점을 보완하기 위해 도입된 객체이다.
  비동기 작업의 완료 또는 실패를 나타낸다.
• Promise는 pending, fulfilled, rejected의 세 가지 상태를 가진다.

function fetchData(){
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('데이터 로드 완료');
    }, 1000);
  });
}

fetchData()
	.then((message) => {
  		console.log(message); // 1초 후 '데이터 로드 완료' 출력
	})
	.catch((error) => {
  		console.error(error);
	})

3. async/await

• Promise를 더 쉽게 사용할 수 있도록 도와주는 문법임.
  async 함수는 항상 Promise를 반환하며, await 키워드는 Promise가 해결될 때까지 기다림.

async function fetchData(){
  return new Promise((resolve, rejct) => {
    setTimeout(() => {
      resoleve('데이터 로드 완료');
    }, 1000);
  });
}

async function getData(){
  try{
    const message = await fetchData();
    console.log(message); // 1초 후 '데이터 로드 완료' 출력
  } catch (error){
    console.error(error);
  }
}
getData();

비동기 처리의 장점

• 비동기 작업 병렬 처리
  여러 비동기 작업을 동시에 실행할 수 있음
• UI 반응성 유지
  긴 작업이 진행되는 동안에도 사용자 인터페이스가 멈추지 않고 반응성을 유지할 수 있음

비동기 처리의 주의점

• 콜백 지옥
  콜백을 중첩해서 사용하면 코드가 복잡해지고 가독성이 떨어질 수 있음.
  이를 해결하기 위해 promise의 catch나 async/await의 try/catch가 도입됨

• 에러 처리
  비동기 코드에서 에러 처리는 동기 코드와 다르게 처리해야 함. Promise의 catch나 async/await의 try/catch 블록을 사용함

쉽게 정리

비동기 처리란 쉽게 말하면 친구에게 전화를 걸고, 친구가 전화를 받을 때까지 기다리는 동안 다른 일을 할 수 있는 것과 비슷하다.

1. 콜백 함수
   친구에게 "전화받으면 나한테 알려줘"라고 말하는 것과 같다.
   친구가 전화를 받으면 알려주기 때문에 그동안 다른 일을 할 수 있다.

2. 프로미스
   프로미스는 '약속'이다. 친구가 전화를 받을지 안 받을지 모르지만, 받으면 알려주겠다고 약속하는 것이다.
   친구가 전화를 받으면 "전화 받았어!", 못 받으면 "미안 못 받았어"라고 알려주는 것이다.

3. async/await
   이건 마치 친구가 전화를 받을 때까지 기다렸다가, 받으면 바로 "전화 받았어!"라고 말해 주는 것과 같다.
   기다리는 동안 다른 일을 할 수 있고, 친구가 전화를 받으면 바로 알려준다.