JavaScript를 이용한 fetch API 사용법 5가지

JavaScript fetch API 사용법

JavaScript의 fetch API는 비동기적으로 네트워크 요청을 수행할 수 있게 해주는 강력한 도구입니다. 이 글에서는 fetch API를 활용하는 다양한 방법을 소개하고, 실용적인 팁과 예제를 통해 이해를 돕겠습니다. 아래에서 다룰 내용은 fetch API의 기본 사용법부터 시작해, 실제 프로젝트에서의 활용 사례까지 포함되어 있습니다.

1. 기본적인 GET 요청

fetch API를 사용하여 서버에서 데이터를 가져오는 가장 기본적인 방법은 GET 요청입니다. 다음은 간단한 GET 요청의 예시입니다.


fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('There has been a problem with your fetch operation:', error));

위의 코드에서 fetch() 함수는 서버의 URL을 인자로 받아 요청을 보냅니다. 응답이 오면 JSON 형식으로 파싱하여 데이터를 출력합니다. 여기서 에러 처리를 통해 네트워크 오류를 관리하는 것도 중요합니다.

2. POST 요청을 통한 데이터 전송

데이터를 서버에 전송할 때는 POST 요청을 사용할 수 있습니다. 다음은 간단한 예제입니다.


fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

여기서 method 속성을 'POST'로 설정하고, body에 JSON 문자열을 전송합니다. headers를 통해 데이터 타입을 명시하는 것이 중요합니다.

3. Fetch API와 async/await

비동기 코드를 더욱 깔끔하게 작성할 수 있는 방법은 async/await를 사용하는 것입니다. 다음은 async/await를 사용한 예제입니다.


async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}
fetchData();

이 코드는 fetch 요청을 비동기적으로 처리하며, 가독성을 높입니다. try/catch 블록을 사용하여 오류를 처리하는 방식도 매우 유용합니다.

4. 요청 취소하기

fetch API는 기본적으로 요청을 취소하는 기능을 제공하지 않습니다. 하지만 AbortController를 사용하여 요청을 취소할 수 있습니다. 다음은 그 예입니다.


const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => {
        if (error.name === 'AbortError') {
            console.log('Fetch request was aborted');
        } else {
            console.error('Error:', error);
        }
    });

// 3초 후 요청 취소
setTimeout(() => controller.abort(), 3000);

위의 예제에서 AbortController를 사용하여 요청을 취소하는 방법을 보여줍니다. 이는 특히 사용자가 요청을 원치 않을 때 유용합니다.

5. 오류 처리 및 리트라이 로직

fetch API를 사용할 때 오류가 발생할 수 있습니다. 이를 처리하고 요청을 재시도하는 방법에 대해 알아보겠습니다.


async function fetchWithRetry(url, options = {}, retries = 3) {
    for (let i = 0; i < retries; i++) {
        try {
            const response = await fetch(url, options);
            if (!response.ok) throw new Error('Network response was not ok');
            return await response.json();
        } catch (error) {
            if (i === retries - 1) throw error; // 마지막 시도에서 오류 발생 시 throw
            console.log(`Retrying... (${i + 1})`);
        }
    }
}

// 사용 예
fetchWithRetry('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(error => console.error('Final error:', error));

여기서는 retries 인자를 통해 요청을 재시도하는 로직을 구현했습니다. 이는 서버의 일시적인 문제로 인한 오류를 처리하는 데 유용합니다.

실용적인 팁 5가지

1. 다양한 HTTP 메소드 활용하기

fetch API는 GET, POST 외에도 PUT, DELETE 등 다양한 HTTP 메소드를 지원합니다. 각 메소드를 상황에 맞게 활용하여 RESTful API와의 상호작용을 원활하게 진행할 수 있습니다. 예를 들어, 사용자 정보 업데이트 시 PUT 메소드를 사용하고, 데이터를 삭제할 때는 DELETE 메소드를 사용하세요. 이는 API의 표준을 준수하며, 코드의 가독성을 높입니다.

2. 요청 및 응답 데이터 형식 설정

서버와의 데이터 통신에서 데이터 형식을 명시하는 것이 중요합니다. Content-Type 헤더를 설정하여 전송하는 데이터 형식을 명확히 하고, 서버의 응답 형식도 확인하여 올바르게 파싱하는 것이 좋습니다. 예를 들어, JSON 데이터를 주고받는 경우에는 항상 JSON 형식으로 설정하세요. 이는 오류를 방지하고 데이터 전송의 효율성을 높입니다.

3. 오류 로그 남기기

fetch 요청 중 발생하는 오류를 처리하고, 이를 로그로 남기는 것은 디버깅에 큰 도움이 됩니다. 예를 들어, 서버의 응답이 500일 경우 서버 내부의 문제를 암시하므로, 이러한 정보를 로그에 기록하여 추후 분석할 수 있도록 하세요. 이렇게 하면 문제를 조기에 발견하고 해결하는 데 도움이 됩니다.

4. CORS 정책 이해하기

다양한 도메인 간 요청을 수행할 때는 CORS 정책을 이해하는 것이 중요합니다. 서버 측에서 CORS를 설정하지 않으면 요청이 차단될 수 있습니다. 서버의 응답에 Access-Control-Allow-Origin 헤더를 추가하여 요청을 허용할 수 있도록 설정하세요. 이를 통해 클라이언트와 서버 간의 원활한 통신을 보장할 수 있습니다.

5. 성능 최적화

fetch 요청을 최적화하여 성능을 개선하는 방법으로는 요청을 배치 처리하거나, 캐싱을 활용하는 것이 있습니다. 예를 들어, 동일한 데이터에 대한 요청을 반복적으로 보내는 대신, 한 번의 요청으로 데이터를 받아와 캐싱하여 재사용하는 전략을 사용할 수 있습니다. 이를 통해 서버의 부하를 줄이고 응답 속도를 개선할 수 있습니다.

요약 및 실천 팁

fetch API는 JavaScript에서 비동기적으로 네트워크 요청을 처리하는 데 매우 유용한 도구입니다. GET, POST 요청을 비롯해, 오류 처리, 요청 취소, 재시도 로직 등을 통해 다양한 네트워크 작업을 수행할 수 있습니다. 위에서 소개한 실용적인 팁을 활용하여 fetch API를 보다 효과적으로 사용할 수 있습니다.

실제 프로젝트에서 fetch API를 적용할 때는, 기본적인 사용법을 숙지하고, 오류 처리 및 성능 최적화에 신경 써서 개발하는 것이 중요합니다. 위의 예제와 팁을 바탕으로 여러분의 JavaScript 프로젝트에 fetch API를 적극 활용해 보세요!

excel_world