[Web Server] fetch API 사용하는 방법

 

fetch API 사용하는 방법

 

fetch는 프론트에서 서버로 리소스를 요청하기 위해서 Javascript에 내장된 Promise 함수다. 기본적으로 비동기 태생을 지닌 녀석이기 때문에 Javascript가 아닌 Node.js나 웹 브라우저 환경에서 지원하는 함수다. HTTP 메소드와 URI를 사용해서 리소스를 요청하게 되는데, 이 때 fetch 함수의 OPTION을 잘못 적거나, JSON 처리를 잘못하면 몇 시간 씩 디버깅을 한다고 시간을 날려먹을 수 있다.

 

fetch API를 사용하는 방법은 간단하다. GET 같이 리소스를 그냥 받아만 오는 메소드는 추가 옵션 필요 없이 URI만 fetch 함수의 매개변수로 던져주고, then으로 시작하는 Promise 로직을 짜주면 된다.

 

GET 메소드 사용 fetch API

fetch('http://www.example.com')
   .then(res => res.json())
   .then(result => console.log(result));

 

문제는 프론트에서 서버로 특정 정보를 보내고, 이에 맞는 리소스를 반환받을 때가 문제다. 대표적으로 POST 메소드를 사용해서 특정 데이터를 서버의 DB에 추가한다고 가정해보자.

 

POST 메소드 사용 fetch API

프론트에서의 데이터를 서버로 보내기 위해서는 method, body, headers를 채워줘야 한다. method에는 HTTP의 메소드를, body에는 서버로 보낼 데이터를 추가하고, 마지막으로 headers는 상황별로 다른데, 일반적으로 'Content-Type'만 명시해주면 된다.

 

let options = {
	method: 'POST',
       body: JSON.stringify({
         "data" : body,
      }),
      headers: {
          'Content-Type': 'application/json',
    	}
}

fetch('http://www.example.com', options)
   .then(res => res.json())
   .then(result => console.log(result));

 

 

fetch API 관련 에러들

 

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

SyntaxError: Unexpected token " in JSON at position 0

 

fetch API를 사용하면서 가장 많이 만나는 에러는 위와 같은 형태로 반환된다. 즉, 프론트의 데이터를 JSON으로 변환하지 못하거나, 서버에서 JSON 데이터를 parsing 하지 못한다는 말이다.

 

fetch API를 통해 프론트와 서버가 통신하는 과정은 다음과 같다. 프론트에서 body 데이터를 "data"라는 키 값으로 보낸다고 하자. 그럼 JSON.stringify() 함수로 Javascript 객체를 JSON으로 변경한 후 fetch 옵션에 태워서 서버로 보낸다.

 

서버에서는 프론트에서 받은 데이터를 JSON.parse() 한다음 필요한 로직을 처리하고 다시 JSON.stringify() 함수로 JSON으로 변경한 뒤 프론트로 보내준다. 이 때 프론트에서, then으로 데이터를 받은 다음 data.json()을 사용해서 파싱하게 된다.

 

 

다시 오류로 돌아가서 위와 같은 에러가 발생하는 이유는 크게 두가지다.

① 프론트에서 적절한 JSON.stringify() 가 수행되지 못한 경우

② 서버에서 JSON.parse()가 안되는 경우

 

이번에 몇시간째 뻘짓했던 이유는 fetch API 함수에 body 데이터를 태워서 보내야 하는데, 일반 텍스트를 JSON으로 변경해서 서버로 보내고 있었다. JSON으로 변경해주는 데이터는 반드시 Javascript의 객체 형식을 가지고 있어야 한다.

 

let body = "hello world";

//잘못된 경우
JSON.stringify(body);

//올바른 경우
JSON.stringify({"data" : body})

 

만약 JSON 관련 에러를 만났다면 서버와 프론트 사이에서 통신에 사용되는 데이터가 적절하게 JSON으로 변경되고 파싱되고 있는지 가장 먼저 확인해야 한다.

 

서버와 프론트간 적절한 통신이 되고 있는지를 확인하기 위해서는 개발자 도구에서 network 탭을 확인하면 된다. 프론트에서 보내는 Request와 서버로 부터 받는 Response의 Content-Type을 확인해보면 application/json이 아닌 plain text나 text/html 등으로 정보가 교환된다면 JSON이 잘못 사용되고 있다는 거다.

 

 

 

 

 

[Node.js] Express 미들웨어 함수

 

[Programming] 웹서버(Web)와 웹 어플리케이션 서버(WAS) 차이점 The difference between Web Server and Web Applicati

 

[Algorithm] 동적 계획법 타일링 알고리즘 문제 Javascript