23.04.20 TIL (JSON과 JS objects)

오늘 한 일

DRF 3주차 완료
페어프로그래밍

문제

front end에서 회원가입 기능을 구현하던 도중 백엔드에 3번째 스크린 샷과 같이 데이터를 실어보내자 위와 같은 오류가 발생하였다.

해결: JSON & javascript object

위 코드는 자바스크립트의 객체 자체를 백엔드로 전송하고 있다. JSON은 이름 그대로 자바스크립트 객체의 문법을 이용한 문자기반의 데이터 포맷이다. 그러니까 그냥 JS 객체를 전송한다고 되는 것이 아니라, JSON 형태로 변활할 필요는 있다는 것이다.

이럴 때는 위와같이 JSON.stringify를 이용하여 JSON으로 변환한다.
마찬가지로 JSON으로 받은 데이터를 자바스크립트에서 사용하려면 JS 객체로 바꿔줘야한다.

const payload_parse = JSON.parse(payload)

위와 같이 JSON.parse를 이용해서 JS 객체로 바꿀 수 있다.

JSON의 장점

JSON은 특정 언어에 종속되지 않는다. 파이선, 자바, 자바스크립트 등 다앙한 언어에서 비슷한 형태의 데이터구조를 지원하며(dict 등) 텍스트 기반 형식이므로 사람과 기계가 모두 읽을 수 있다.

또한 이전에 사용되던 xml은 트리구조, 태그로 인해 json보다 용량이 크고 보다 구조 정의의 용이성과 가독성이 부족하였다. 이러한 이유로 JSON은 xml을 밀어내고 표준 포맷이 되었다.

유의할 점

JSON의 JS 객체와 달리 키값이 반드시 쌍 따옴표로 묶여있는 문자열이어야한다.

다만 직접 작성할 때의 문제고 JSON.stringify은 알아서 잘 바꿔주긴하지만 아무튼 잘 지켜야 혼동이 없을 듯하다.