JavaScript에서 fetch API로 HTTP 요청 보내기

JavaScript로 간편하게 HTTP 요청 보내기: fetch API의 모든 것

웹 개발에서 서버와의 통신은 매우 중요한 역할을 합니다. 클라이언트는 서버로부터 데이터를 받아오거나, 데이터를 전송하는 과정이 빈번하게 발생합니다. 이러한 작업을 효율적이고 간단하게 수행하기 위해 JavaScript에서는 fetch API라는 강력한 도구를 제공합니다. fetch API는 기존의 XMLHttpRequest보다 사용이 간편하며, 프로미스 기반으로 비동기 처리를 자연스럽게 처리할 수 있어 현대 웹 개발에서 표준으로 자리 잡았습니다. 본 글에서는 fetch API를 사용하여 HTTP 요청을 보내는 방법, 다양한 옵션, 그리고 실습 예제까지 상세하게 다루어, 초보자도 쉽게 따라 할 수 있도록 설명하겠습니다. 이를 통해 여러분의 웹 애플리케이션이 더욱 빠르고 깔끔하게 서버와 데이터를 주고받을 수 있게 될 것입니다.

fetch API란 무엇이며, 왜 사용하는가?

fetch API는 JavaScript 표준 내장 기능으로, 네트워크 요청을 쉽게 수행할 수 있도록 설계된 인터페이스입니다. 이전에는 XMLHttpRequest 객체를 사용했지만, 이 방식은 비동기 처리를 위해 콜백 지옥(callback hell) 구조를 만들어 가독성과 유지보수성을 저하시켰습니다. 이에 비해 fetch는 프로미스(Promise)를 기반으로 하며, 코드를 더 직관적이고 깔끔하게 만들어줍니다.

fetch API는 URL을 통해 네트워크 요청을 보내고, 서버로부터 응답을 수신하는 과정을 간편하게 수행할 수 있습니다. GET, POST, PUT, DELETE와 같은 다양한 HTTP 메서드를 사용할 수 있으며, 요청 헤더와 바디를 자유롭게 조작할 수 있어 복잡한 요청도 손쉽게 처리할 수 있습니다. 또한, fetch는 비동기적 작업을 자연스럽게 처리하기 때문에, 요청이 완료될 때까지 기다리지 않고 다른 작업을 수행하다가 응답을 받는 것도 가능합니다. 이 모든 특징들로 인해 개발자들은 더 적은 코드로 더 강력한 네트워크 통신 기능을 구현할 수 있게 되었습니다. 덕분에 현대 웹 애플리케이션 개발에서 fetch API는 사실상 필수 도구로 자리매김하고 있습니다.

fetch API로 HTTP 요청 보내기: 기본 방법과 실습 예제

fetch API를 사용하는 방법은 매우 직관적입니다. 가장 기본적인 예제는 아래와 같으며, 특정 URL에 GET 요청을 보내는 방법입니다.

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

이 코드는 'https://example.com/api/data' 주소로 GET 요청을 보내고, 응답을 JSON으로 처리한 후 콘솔에 출력하는 예제입니다. fetch는 Promise를 반환하기 때문에, .then()으로 성공적 응답을 처리하고, .catch()로 오류를 잡습니다. 만약 서버가 JSON 형태가 아닌 다른 데이터를 반환한다면, response.text() 또는 response.blob() 등을 사용할 수 있습니다.

HTTP 요청을 보낼 때, 메서드, 헤더, 바디 등의 요청 옵션을 지정하려면 fetch 두 번째 인자로 객체를 전달하는 방식으로 구성하면 됩니다. 예를 들어, POST 요청을 보내는 방법은 다음과 같습니다.

fetch('https://example.com/api/create', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '홍길동',
    age: 30
  })
})
.then(response => response.json())
.then(data => {
  console.log('응답 데이터:', data);
})
.catch(error => {
  console.error('오류 발생:', error);
});

이와 같이 fetch API는 다양한 요청 옵션을 손쉽게 지정할 수 있기 때문에 복잡한 데이터 송수신도 간단하게 처리할 수 있습니다. 서버와의 통신을 효과적으로 구현하는 핵심 도구로서, 실제 프로젝트에서는 이 방식을 필수적으로 익혀야 합니다.

fetch API를 활용한 다양한 요청 옵션과 활용 팁

HTTP 메서드 선택: GET, POST, PUT, DELETE 등 목적에 맞게 사용하며, 메서드별로 필요한 옵션을 조합합니다.
헤더 조작: 'Content-Type', 'Authorization' 등 요청 헤더 값을 세밀하게 조정하여 서버의 API 규격에 맞춥니다.
바디 데이터 처리: JSON뿐만 아니라 FormData, Blob 같은 데이터를 활용해 다양한 형식을 전송할 수 있습니다.
에러 처리: 네트워크 오류 또는 서버 응답 상태 코드에 따른 분기 처리를 꼼꼼하게 설계해야 합니다.
비동기 흐름 제어: async/await 문법을 활용하면 프로미스 체인보다 가독성이 높은 코드 작성이 가능합니다.
응답 처리 방식을 다양하게: response.ok, response.status 등으로 서버 응답 상태를 체크하며, 필요한 경우 재시도 로직도 구현 가능합니다.
캐싱 및 클라이언트 저장 전략: fetch 요청 시 cache 옵션을 활용하거나, 로컬 저장소와 연동하는 전략을 생각할 수 있습니다.
Cross-Origin 요청 처리: CORS 정책에 따라 서버에서 적절한 헤더를 설정하거나 프록시를 구성하는 것이 중요합니다.

fetch API와 비동기 함수: async/await로 더 깔끔하게 작성하기

현대 JavaScript에서는 Promise 체인 대신 async/await 문법을 통해 비동기 작업을 더 직관적이고 깔끔하게 만들 수 있습니다. fetch API도 이에 맞춤형으로 잘 사용됩니다. 아래는 async 함수를 사용한 예제입니다.

async function fetchData() {
  try {
    const response = await fetch('https://example.com/api/data');
    if (!response.ok) {
      throw new Error('네트워크 응답에 문제가 있습니다.');
    }
    const data = await response.json();
    console.log('받은 데이터:', data);
  } catch (error) {
    console.error('Fetch 오류:', error);
  }
}

fetchData();

이 방식은 콜백 헬이 발생하지 않으며, 구조가 더 간결하고 이해하기 쉽습니다. 특히 여러 개의 fetch 요청을 순차 또는 병렬로 처리할 때 매우 유용합니다. 예를 들어, 여러 요청을 병렬로 실행하는 것도 간단하게 가능하며, 코드의 가독성을 획기적으로 높일 수 있습니다. 또한, try-catch 구문을 통해 오류 처리도 자연스럽게 수행할 수 있어 실무에서 선호하는 구조입니다.

자주 묻는 질문 (Q&A)

Q1: fetch 요청이 실패하면 어떻게 처리하나요?
A1: fetch는 네트워크 오류 또는 브라우저 정책 위반 시에만 rejected 상태가 되어 catch 블록으로 넘어갑니다. 서버는 응답이 성공적이어도 상태 코드에 따라 별도로 처리할 필요가 있는데, response.ok를 체크하여 200번대 이외의 상태를 판단할 수 있습니다.

Q2: GET 요청과 POST 요청의 차이점은 무엇인가요?
A2: GET 요청은 서버로부터 데이터를 가져오는 용도로 사용하며, URL에 요청 데이터를 쿼리 문자열로 붙입니다. POST 요청은 서버에 데이터를 전달하거나 저장할 때 사용하며, 본문에 데이터를 넣습니다. GET은 안전한 요청이고, POST는 상태를 변경할 수 있기 때문에 용도에 따라 구분이 필요합니다.

Q3: fetch API로 CORS 이슈를 해결하는 방법은 무엇인가요?
A3: 서버에서 적절한 Access-Control-Allow-Origin 헤더를 설정하거나, 프록시 서버를 이용해 CORS 정책을 우회할 수 있습니다. 또한, 요청 시 credentials 옵션을 조절하거나, 서버와 클라이언트 모두 CORS 정책에 부합하는 설정이 필요합니다.

결론: fetch API로 웹 통신을 쉽게 구현하자

웹 개발에서 서버와의 통신은 필수적입니다. fetch API는 JavaScript 내장 기능으로, 간단하고 효율적인 HTTP 요청 방법을 제공합니다. 다양한 옵션을 활용하여 서버와 효율적으로 데이터를 주고받으며, async/await를 통해 가독성 높은 코드를 작성할 수 있습니다. 앞으로 웹 애플리케이션 개발 시 fetch API의 이해와 활용 능력을 갖추는 것이 중요하며, 이를 통해 초보자도 손쉽게 네트워크 요청을 구현할 수 있습니다. 본 글에서 설명한 fetch 요청 방법, 옵션, 실습 예제와 Q&A를 참고하여 여러분의 프로젝트에 적극 활용하시기 바랍니다. 웹 개발의 핵심 기술인 fetch API를 마스터하여, 더욱 빠르고 깔끔한 클라이언트-서버 통신을 구현하는 개발자가 되어보세요.

#JavaScript #fetchAPI #HTTP요청 #웹개발 #비동기처리 #프론트엔드 #API연동 #asyncawait

기초 코드 따라하기