AJAX와 promise 객체, 그리고 async-await 구조의 코드

Q. AJAX 자체가 비동기 연산 과정을 거치기 때문에 promise객체를 사용하거나 async-await 구조로 코드를 짜는거야?

A. 네, 맞습니다! AJAX 자체가 비동기적인 연산을 처리하는 방식이기 때문에 Promise 객체를 사용하거나 async-await 구조로 코드를 작성하는 것이 필요합니다.

왜 AJAX가 비동기적이고, 왜 Promise 또는 async-await을 사용하는가?

1. AJAX의 비동기적 특성:
   AJAX(Asynchronous JavaScript and XML)는 클라이언트 측에서 서버와 비동기적으로 데이터를 주고받기 위한 기술입니다. 이 비동기적인 특성 덕분에, 브라우저는 서버로부터 응답을 기다리는 동안 다른 작업(예: 사용자 인터페이스의 업데이트, 사용자 입력 처리 등)을 계속 수행할 수 있습니다.만약 AJAX가 동기적으로 동작한다면, 서버에서 응답이 돌아올 때까지 브라우저가 멈추게 되어 사용자 경험이 매우 나빠지게 됩니다. 따라서, AJAX는 기본적으로 비동기적이며, 서버로부터 응답을 받을 때까지 프로그램의 실행 흐름이 중단되지 않습니다.
2. Promise 객체 사용 이유:
   비동기 작업은 보통 언제 완료될지 알 수 없기 때문에, AJAX 요청의 결과를 처리하기 위해 콜백 함수(다른 함수의 인자로 전달되어 나중에 실행되는 함수)를 사용하곤 했습니다. 하지만 콜백을 많이 사용하게 되면 코드가 복잡해지고 읽기 어려워지는 "콜백 지옥"(callback hell)이 발생할 수 있습니다.이를 해결하기 위해, Promise 객체가 도입되었습니다. Promise는 비동기 작업이 완료되면(성공하거나 실패할 때) 그 결과를 반환하며, .then(), .catch() 메서드를 사용하여 결과를 다룰 수 있게 해 줍니다. 이렇게 하면 콜백 지옥을 피하고, 비동기 코드를 더 깔끔하고 구조적으로 작성할 수 있습니다.

   // AJAX 요청을 Promise로 처리하는 예시  
   fetch('[https://api.example.com/data'](https://api.example.com/data'))  
   .then(response => response.json())  
   .then(data => console.log(data))  
   .catch(error => console.error('Error fetching data:', error));  

3. async-await 사용 이유:
   async-await은 Promise 기반의 비동기 코드를 더 쉽게 작성할 수 있도록 도와줍니다. await 키워드를 사용하면 Promise가 처리될 때까지 코드의 실행을 "일시 중지"했다가, 처리 결과를 기다렸다가 재개하는 것처럼 보이게 할 수 있습니다. 이는 비동기 코드를 마치 동기 코드처럼 작성할 수 있게 해 주며, 코드 가독성과 유지보수성을 크게 향상시킵니다.

// async-await을 사용한 예시
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 fetching data:', error);
  }
}

결론:

AJAX 요청이 비동기적으로 동작하기 때문에, 이를 효과적으로 관리하기 위해 Promise나 async-await 같은 비동기 처리 방식을 사용하는 것입니다. 이러한 방식은 코드의 가독성을 높이고, 비동기 작업을 더 명확하고 직관적으로 작성할 수 있게 해줍니다.