6/11 TIL

비동기 처리와 관련된 개념

1. 비동기 (Asynchronous)

비동기 처리란 코드가 순차적으로 실행되지 않고, 특정 작업이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식을 의미합니다. 비동기 처리를 사용하면 사용자 경험을 개선하고 성능을 향상시킬 수 있습니다.

2. Promise

• Promise는 자바스크립트 비동기 작업을 처리하기 위한 객체입니다.
• 세 가지 상태가 있습니다:
  • Pending: 대기 중
  • Fulfilled: 완료됨
  • Rejected: 실패함

3. Promise.all

• 여러 개의 Promise를 병렬로 처리할 때 사용됩니다.
• 모든 Promise가 완료될 때까지 기다린 후 결과를 배열로 반환합니다.
• 하나의 Promise라도 실패하면 전체가 실패로 간주됩니다.

4. Async/Await

• 비동기 코드를 동기 코드처럼 작성할 수 있게 해주는 문법입니다.
• async 함수는 항상 Promise를 반환합니다.
• await 키워드는 Promise가 처리될 때까지 기다립니다.

JSON Server와 Axios를 사용한 HTTP 요청

1. JSON Server

• 간단한 REST API 서버를 빠르게 설정할 수 있는 도구입니다.
• JSON 파일을 이용해 데이터를 저장하고, 이를 API로 제공할 수 있습니다.

2. Axios

• HTTP 요청을 쉽게 만들고 관리할 수 있는 라이브러리입니다.
• get, post, delete, patch 등의 메서드를 제공합니다.

GET 요청

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

POST 요청

axios.post('/api/data', {
  name: '새로운 데이터'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

DELETE 요청

axios.delete('/api/data/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

PATCH 요청

axios.patch('/api/data/1', {
  name: '수정된 데이터'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Fetch API

• 브라우저 내장 API로, HTTP 요청을 보내는 기능을 제공합니다.
• axios와 비슷하지만, 프로미스 기반으로 작동합니다.

GET 요청

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

POST 요청

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: '새로운 데이터' }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

---

오늘 배운 내용을 통해 비동기 처리와 HTTP 요청에 대한 이해를 깊게 할 수 있었습니다. 특히, async/await와 Promise를 활용한 비동기 처리 방식은 코드의 가독성을 높이고, 유지보수를 용이하게 해줍니다. 또한, axios와 fetch를 이용한 HTTP 요청 방법을 숙지함으로써 다양한 상황에서 API를 효율적으로 사용할 수 있게 되었습니다.