1. JSON

해당 글에서 fetch 함수에 대해 간단하게 설명을 했었다.

이번에는 코드를 살짝 바꿔서, 아래와 같은 코드를 구글 콘솔창에 실행시켜보자.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => {console.log(result); });

이 결과들은, 어떤 사용자들의 정보를 JSON이라고 하는 포맷으로 나타낸 것이다.

JSON은 JavaScript Object Notation의 약자로, 어떤 정보를 교환할 때 사용하기 위해, 자바스크립트 언어의 문법을 빌려서 만들어진 데이터 포맷이다.

때문에, JSON의 문법은 자바스크립트 문법과 매우 유사하며, 위 예시만 봐도 자바스크립트에서의 배열 및 객체 문법과 동일한 형태인 것을 확인할 수 있다.

1.1 JSON과 JS 문법의 차이

JSON과 자바스크립트의 문법이 유사하기는 하지만, 완벽하게 동일하지는 않다.

어떤 부분에서 차이가 있는지 크게 세 가지로 나누어 살펴보자.

첫 번째로는, JSON에는 프로퍼티 이름과 값을 표현하는 방식에 제한이 있다는 것이다.

자바스크립트에서 객체를 생성할 때는 프로퍼티 네임 작성 시 큰따옴표로 감싸주지 않아도 괜찮았지만, JSON의 경우에는 프로퍼티 네임을 작성할 때 반드시 큰따옴표("")로 감싸주어야 한다.

만약 큰따옴표로 감싸지 않은 상태로 JSON에서 처리하려고 한다면 에러가 발생한다.

또한, 자바스크립트에서는 문자열을 나타낼 때 어떤 따옴표를 사용하여도 괜찮았지만, JSON에서는 문자열을 나타내고자 한다면 반드시 큰따옴표를 사용해야 한다.

두 번째로는, JSON에서는 표현할 수 없는 값들이 존재한다는 것이다.

자바스크립트에서는 프로퍼티 값으로 undefined, NaN, Infinity 등을 사용할 수 있었지만, JSON에서는 이러한 값들을 사용할 수 없다.

그 이유는, JSON이 자바스크립트로부터 만들어지기는 했지만, 목적 자체가 언어나 환경에 종속되지 않고, 언제 어디서든 사용할 수 있는 데이터 포맷을 만드는 것이기 때문이다.

마지막으로, JSON에서는 주석을 추가할 수 없다.

JSON은 코드가 아니라 데이터 포맷이기 때문에, 자바스크립트와는 다르게 주석을 포함하여 작성할 수 없다.

2. JSON 데이터 객체로 변환하기

글 서두에서 언급했던 예시의 JSON 데이터는 자바스크립트의 타입으로 따지면 String에 해당한다.

다시 말하면, response.text() 부분에서 문자열 타입의 JSON 데이터를 넘겨준다는 뜻이다.

그런데, 이런 문자열 타입으로는 개발자가 데이터를 다루기 쉽지 않기 때문에, 이를 자바스크립트 객체로 변환하여 사용하게 된다.

자바스크립트 객체를 문자열 타입의 JSON 데이터로 변환하는 것을 직렬화(Serialization이라고 하며,

반대로, 문자열 타입의 JSON 데이터를 자바스크립트 객체로 변환하는 것을 영어로는 역직렬화(Deserialization)이라고 한다.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => {const users = JSON.parse(result)});

// 위 코드와 동일 코드

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((result) => {const users = result;});

위 코드에서, JSON은 JSON 데이터를 다루기 위해 사용되는 자바스크립트의 기본 객체이다.

이 JSON 객체에 parse method를 사용하면, 문자열 타입의 JSON 데이터를 자바스크립트 객체로 변환할 수 있다.

즉, JSON 데이터를 객체로 변환하여 users 라는 변수에 할당한 것이다.