.json()

fetch(URL).then(res => res.json())

웹 개발 시 실시간 데이터를 사용하기 위해서 API를 사용하게 된다.

API를 호출하면, 데이터를 javascript 내에서 원활히 사용하기 위해 API 응답을 json으로 변환하는 과정이 필요한데, 그 때 사용하는 것이 바로 .json() 메소드이다.

예시로 TMDB 영화 데이터베이스에서 제공하는 API fetch 코드 스니펫을 보자.

• fetch(url) 를 실행하면 돌아오는 결과값은 Promise 객체이다. 그 객체를 res 라는 이름으로 받아오는 것.

• res.json()은 fetch의 응답 결과인 res 을 JSON 형식으로 변환하는 함수.

• 만약 네트워크 요청이 실패하면 .catch()에서 에러를 처리하게 된다.

  	try-catch 같지만, 프로미스의 전통적인 처리 방식은 then-catch라는 것.
  
  	.then()을 여러 번 체이닝하면서 비동기 작업을 처리하고, .catch()로 에러를 처리한다.

메소드 이름은 json()임에도 불구하고, 결과는 JSON이 아니라 JSON을 입력으로 받아 파싱하여 JavaSript 객체를 생성한 결과라는 점에 유의해야 한다.

테스트

fetch를 정확히 짚고 넘어갈 겸, 빈 브라우저 콘솔창에서 가상의 api를 테스트 해봤다.

fake api 생성기 (링크) {JSON}Placeholder
객체 형태의 응답을 제공하는 API 사이트 'Placeholder'를 활용해봤다.

예시와 같이 fetch 구문을 가져다 쓰면, run script 아래와 같은 결과값을 불러온다.

처음엔 fetch가 반환하는 게 프로미스라는 걸 자꾸 까먹어서, 그냥 브라우저 네트워크 속도를 3G로 제한해 봤다.

그제서야 시간 차를 두고 나오는 객체를 확인할 수 있었다. 인터넷이 빨라도 안 좋은 건가?ㅋㅋ

이제 단계적으로 이해를 해 볼 시간이다.

fetch는 Promise 객체를 반환한다.

(api의 데이터를 불러오는) Promise 처리 (정상인 경우) -> 응답으로 JSON 반환 -> res.json() 함수로 JavaScript 객체화(출력값이 'object')

(실패인 경우) 에러처리

이렇게 보면 간단한가? 무튼 기억할 것은 fetch는 프로미스를 return한다는 사실. 그래서 그 promise가 resolve되면(then), 그 json값을 json()이라는 함수로 객체화 한단 거다.

MDN 문서에서 알려준 게 이 부분! 이름은 json() 이지만 json()을 리턴하지 않고 json을 받아서 객체로 리턴한단 점.

JSON.parse

: JSON 형식의 문자열을 JavaScript 객체로 변환

const jsonString = '{"name": "Alice", "age": 25}';
const obj = JSON.parse(jsonString);
console.log(obj.name);  // "Alice"

JSON.stringify

: JavaScript 객체를 JSON 형식의 문자열로 변환

const obj = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString);  // '{"name":"Alice","age":25}'

사실 stringify같은 경우, 이름부터가 문자열로 만든다는 의미여서 별로 헷갈리지 않았다.

하지만 parse() 메소드가 계속 헷갈렸어서, JSON.parse()와 .json() 각각의 차이를 정리해 보려고 한다.

둘 다 어떤 입력값을 객체로 변환하는 것으로, 내부적으로 서로 유사하게 동작하기는 한다.

하지만 그 차이는

JSON.parse()는 일반적인 JSON 문자열을 JavaScript 객체로 변환하는 함수인 반면, json()은 서버 응답을 JSON 객체로 변환하는 메서드이다.

한마디로 ,
JSON.parse는 문자열을 객체로, JSON.stringify는 객체를 문자열로

Ref.

1. MDN WEB DOCS
2. OpenAI ChatGPT