Fetch API 사용하기

1. 도입 (왜 배워야 하는가)

Fetch API는 JavaScript에서 네트워크 요청을 처리하는 데 매우 중요한 도구입니다. 웹 애플리케이션은 종종 서버와 통신하여 데이터를 가져오거나 전송해야 하는데, Fetch API는 이러한 작업을 간편하고 직관적으로 수행할 수 있게 해줍니다.

이 API를 모르면 AJAX를 사용한 이전 방식에 비해 더 복잡하고 비효율적인 코드를 작성하게 되며, 특히 비동기 처리에 어려움을 겪을 수 있습니다. Fetch API는 프로미스 기반으로 되어 있어, 비동기 처리를 더 쉽게 관리할 수 있습니다.

실무에서는 API와의 통신이 필수적이므로, Fetch API를 잘 이해하지 못하면 데이터 처리와 사용자 경험에 큰 영향을 미칠 수 있습니다.

2. 핵심 개념 설명

Fetch API

Fetch API는 네트워크 요청을 수행하기 위한 현대적인 방법입니다. 이 API는 Promise를 반환하여 비동기 작업을 쉽게 처리할 수 있게 합니다.

비동기 처리

비동기 처리는 작업이 완료될 때까지 기다리지 않고 다음 작업을 진행하는 방식입니다. 실생활에서의 예를 들자면, 요리를 하면서 동시에 청소를 하는 것과 같습니다. 요리가 완성될 때까지 기다리지 않고 청소를 시작할 수 있습니다.

3. 기본 코드 예제

아래는 Fetch API의 가장 기본적인 사용법을 보여주는 코드입니다.

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 응답이 실패했습니다.');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('오류:', error));

실행 결과

[
  { userId: 1, id: 1, title: "제목 1", body: "내용 1" },
  { userId: 1, id: 2, title: "제목 2", body: "내용 2" },
  ...
]

코드 한 줄씩 동작 설명

1. fetch('https://jsonplaceholder.typicode.com/posts'): 지정된 URL에서 데이터를 가져오는 요청을 보냅니다.
2. .then(response => { ... }): 서버의 응답을 처리합니다. 응답이 성공적이지 않으면 오류를 발생시킵니다.
3. return response.json();: 응답 데이터를 JSON 형식으로 변환하여 다음 .then()으로 전달합니다.
4. .then(data => console.log(data)): 변환된 데이터를 콘솔에 출력합니다.
5. .catch(error => console.error('오류:', error)): 요청 중 발생한 오류를 처리합니다.

4. 실전 활용 예제

1. 쇼핑몰에서 장바구니 데이터 가져오기

fetch('https://api.example.com/cart')
  .then(response => response.json())
  .then(cartData => {
    console.log('장바구니 데이터:', cartData);
  })
  .catch(error => console.error('장바구니 오류:', error));

이 코드는 쇼핑몰의 장바구니 데이터를 서버에서 가져오는 예제입니다.

2. 사용자 프로필 업데이트

fetch('https://api.example.com/user/profile', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        name: '홍길동',
        age: 30,
    }),
})
.then(response => {
    if (!response.ok) {
        throw new Error('프로필 업데이트 실패');
    }
    return response.json();
})
.then(data => console.log('업데이트 성공:', data))
.catch(error => console.error('오류:', error));

이 코드는 사용자의 프로필 정보를 업데이트하는 예제입니다.

5. 흔한 실수와 주의사항

실수 1: 응답 상태 확인을 하지 않음

fetch('https://api.example.com/posts')
  .then(response => response.json()) // 상태 확인 없음
  .then(data => console.log(data));

올바른 코드:

fetch('https://api.example.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('응답 실패');
    }
    return response.json();
  })
  .then(data => console.log(data));

실수 2: JSON 변환을 하지 않음

fetch('https://api.example.com/posts')
  .then(response => response) // JSON 변환 없음
  .then(data => console.log(data));

올바른 코드:

fetch('https://api.example.com/posts')
  .then(response => response.json()) // JSON 변환 추가
  .then(data => console.log(data));

6. 정리

• Fetch API는 네트워크 요청을 쉽게 처리할 수 있는 방법입니다.
• Promise 기반의 비동기 처리를 지원하여 코드가 간결해집니다.
• 응답 상태를 항상 확인해야 하며, JSON 변환을 잊지 않아야 합니다.

다음에 학습하면 좋은 주제:

• Axios를 사용한 HTTP 요청
• 비동기 함수(async/await) 사용법
• RESTful API 설계와 사용법