React에서 fetch()로 백엔드와 통신하기

프로젝트에서 내가 해야 하는 일은 다음과 같았다.

1. 웹페이지에서 데이터 입력 받기
2. 입력 받은 데이터를 json으로 만들기
3. json 형식을 API 주소로 전달하기
4. 성공 응답 받기

여기서 입력 받은 데이터를 json으로 만드는 것까지는 문제 없이 완료하였다. (썸네일 이미지, EPUB 파일 첨부하는 것은 json과 관계 없는 내용임)

다음은 fetch()를 이용해서 JSON 데이터를 백엔드 API URL에 전달하는 코드이다.

실제로는 데이터를 입력 받았지만 이 글에서는 다음과 같이 직접 기재하였다.
{title: '1984', author: 'George Orwell'}

const jsonData = JSON.stringify({title: '1984', author: 'George Orwell'});
const url = `백엔드 서버 API URL`
  
try {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: jsonData,
  });

} catch (error) {
  console.error('네트워크 또는 서버 오류:', error);
  alert(error.message);
}

API 요청하기 위해서는 JSON.stringify(데이터)를 통해 전환하는 과정이 필요하다.

AWS를 이용해서 통신하려고 한다면 AWS CORS 설정이 추가로 필요하다. 백엔드 코드에서 CORS를 모두 허용해줬다 해도 AWS 홈페이지에서 추가로 설정이 필요하다는 것을 처음에는 몰랐어서 헤맸었는데 홈페이지에서 설정한 후에는 정상적으로 통신하는 것을 확인하였다.

통신 상태를 확인하려면 React 브라우저에서 F12 > 네트워크 탭에서 확인할 수 있다.

---

글로벌소프트웨어캠퍼스와 교보DTS가 함께 진행하는 챌린지입니다.