[JavaScript] fetch() 함수 사용법과 오류 해결 방법

웹 개발에서 서버와 데이터를 주고받기 위해 가장 많이 사용하는 API 중 하나가 JavaScript의 fetch() 함수입니다. fetch()는 HTTP 요청을 보내고 응답을 받아오는 기능을 제공합니다. 그러나 사용법을 잘못 이해하거나 응답 처리를 제대로 하지 않으면 오류가 발생할 수 있습니다. 이번 포스팅에서는 fetch() 함수의 기본 사용법부터 자주 발생하는 오류 해결 방법까지 자세히 설명하겠습니다.

fetch() 함수 사용법과 오류 해결 방법

---

1. fetch() 함수의 기본 사용법

1) 기본 구조

fetch(url, options)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('오류 발생:', error));

• url: 요청을 보낼 서버의 주소
• options: method, headers, body 등을 포함한 설정 객체 (선택)

2) GET 요청 예제

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => console.log(data));

3) POST 요청 예제

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 })
})
.then(response => response.json())
.then(data => console.log(data));

 

---

2. fetch() 함수의 특징과 주의점

1) Promise 기반 비동기 처리

• fetch()는 Promise를 반환하므로 then() 또는 async/await 문법으로 처리해야 합니다.

2) HTTP 오류 처리 방식

• fetch()는 HTTP 오류 상태(예: 404, 500)도 then()으로 처리되므로, 명시적으로 체크해야 합니다.

fetch('https://example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('서버 오류: ' + response.status);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('에러 발생:', error));

3) CORS 문제

• 다른 출처에서 요청을 보낼 경우 CORS 정책에 의해 차단될 수 있으며, 이때는 서버 측 설정이 필요합니다.

---

3. async/await로 fetch() 사용하기

1) async 함수 내부에서 await 사용

async function fetchData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!response.ok) {
            throw new Error(`에러 발생: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('에러 처리:', error.message);
    }
}

fetchData();

2) 공통된 오류 처리 방법

• 모든 fetch() 호출은 try-catch 문을 사용하여 안전하게 오류를 처리해야 합니다.
• 네트워크가 불안정한 환경에서도 실패하지 않도록 대비할 수 있습니다.

---

4. 자주 발생하는 오류와 해결 방법

1) SyntaxError: Unexpected end of JSON input

• 응답이 JSON이 아닐 때 .json()을 호출하면 발생
• 해결 방법: 응답이 JSON 형식인지 확인하고 response.text()로 먼저 테스트

2) TypeError: Failed to fetch

• 네트워크 오류 또는 CORS 정책으로 인해 요청이 실패할 때 발생
• 해결 방법: 요청 URL, 서버 상태, CORS 설정 점검

3) 404 또는 500 에러

• 서버 응답 자체는 왔지만 상태 코드가 오류인 경우
• 해결 방법: response.ok 조건을 추가하여 명시적으로 처리

if (!response.ok) throw new Error('HTTP 상태 오류: ' + response.status);

 

---

5. 추가 팁 및 참고 사항

• JSON 데이터 요청 시에는 Content-Type 헤더를 꼭 설정하세요.
• await fetch(...) 이후에는 항상 response.ok 여부를 확인하는 습관을 들이세요.
• fetch는 Axios보다 가볍고 브라우저에 기본 내장되어 있지만, 복잡한 요청 처리에는 라이브러리 사용을 고려할 수 있습니다.

---

6. 요약 및 마무리

이번 포스팅에서는 JavaScript의 fetch() 함수 사용법과 오류 해결 방법을 자세히 살펴보았습니다. 기본 구조, GET/POST 요청 방법, async/await 활용, 자주 발생하는 오류 해결법까지 함께 알아보았으며, 안전하고 안정적인 API 통신을 위한 팁도 정리했습니다. API 요청 시에는 항상 응답 상태를 확인하고, try-catch로 에러를 대비하여 안정적인 코드를 작성해 보세요.

---

7. 관련 글 링크

• 관련 글: JavaScript에서 CORS 오류 해결 방법 - Access-Control-Allow-Origin 문제 해결하기