JSON.stringify() | JSON.parse() | json()

며칠전 동료의 코드를 보다가 바보같은 질문을 하게되어 다시 정리해보는 JSON의 개념

 

서버에 요청을 보내는 바디를 `JSON.stringify()`로 변환하는 코드를 보는데 갑자기 헷갈렸다. stringify는 말그대로 자바스크립트 객체를 문자열로 직렬화시켜주는 것아니던가? 왜 서버에 요청보낼때 stringify를 시키는거지..?? 

나는 .. JSON과 JavaScript의 object를 헷갈리고있었던 것이었다.. 😱

 

먼저 JSON이 뭔지를 정확히 알아야한다.

 

JSON

JSON(JavaScript Object Notation)은 데이터를 주고받을수 있는 일반 텍스트 포맷을 뜻한다. 

JavaScript의 객체 표기법을 본따서 JSON syntax가 만들어졌다.

JSON 포맷은 텍스트일뿐 JavaScript와 같은 프로그래밍언어에서 사용하려면 변환이 필요하다.

 

'{"name":"John", "age":30, "car":null}'

 

JSON.stringify() 

JavaScript 값이나 객체를 JSON 문자열로 변환할 때 사용한다.

 

console.log(JSON.stringify({ x: 5, y: 6 }));
// Expected output: '{"x":5,"y":6}'

console.log(JSON.stringify({ x: [10, undefined, function () {}, Symbol('')] }));
// Expected output: '{"x":[10,null,null,null]}'

 

JSON.parse()

JSON문자열을 JavaScript의 객체나 값으로 파싱하고 싶을때 사용한다. 

 

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj);
// Expected output: Object { result: true, count: 42 }

 

json()

그렇다면 흔히 fetch api를 호출해서 받아오는 response에 적용하는 `json()` 메서드는 무엇일까

메서드 이름으로 보아 결과값으로 json 형식을 반환해줄 것 같지만, 그렇지않다.

json() 메서드의 역할은 JSON 값을 입력받아 파싱하여 JavaScript 객체를 생성해주고, 이 객체를 프로미스로 감싸서 반환해준다. 

 

    fetch('https://api.realworld.io/api/articles')
      .then((res) => {
        console.log(res, 'res 콘솔');
        console.log(res.json(), 'res.json() 콘솔');
      })

 

`Response` 객체와 `json()` 메서드의 작동방식

fetch API를 사용해서 서버에서 응답받은 response를 그대로 콘솔에 찍어보면 아래와 같이 `Response` 객체가 찍히는 것을 확인할 수가 있다.

 

이때 `Response` 객체 내부의 응답 데이터인 `body` 필드를 펼쳐보면 body 에는 ReadableStream이 담겨있는걸 볼수있다.

서버로부터 응답받은 데이터는 아직 다 읽혀진 상태가 아니고, 데이터를 효율적으로 전송하기위해 조각단위로 데이터를 받아오는 스트림 형태로 존재하는 상태이다. 스트림은 데이터를 효율적으로 전송하는 방식이다. 

 

 

이 Stream 형태의 응답값을 `json()` 메서드와 사용한다면, 내부적으로 스트림데이터를 모두 읽은 후, 문자열로 변환한 다음에 그 문자열을 JSON파서를 통해 JavaScript 객체로 변환한다.

근데 이 과정은 한번에 JavaScript 객체로 변환되는게 아니고, 비동기적으로 일어나기때문에 json() 메서드는 Promise를 반환한다. 

즉, body에 담겨있는 ReadableStream 데이터를 읽어 javaScript의 object로 변환해주는 결과값을 프라미스에 감싼채로 반환해주는 것을 확인할 수 있다. 

 

Refs 

https://www.json.org/json-en.html

JSON

https://www.w3schools.com/js/js_json_intro.asp

W3Schools.com

https://developer.mozilla.org/en-US/docs/Web/API/Response/json

Response: json() method - Web APIs | MDN