JSON 규칙과 에러핸들링

위키백과 JSON

JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다.

JSON은 위키백과의 정의에서 처럼 데이터를 다루기 위한 포맷이다. 여기서 데이터란 프로그래밍 언어 코드 상의 데이터가 아니다. 코드 상의 데이터들은 단순히 해당 언어가 읽어들일 수 있는 "값"일 뿐이며 따라서 런타임 중 메모리상에서만 존재한다.

JSON 포맷으로 변환하지 않았을 때 벌어지는 일

const user = {
  id: 1,
  userName: "kim",
  userAge: 20,
};

console.log(user);

localStorage.setItem("user", user);

user는 데이터가 아닌 객체 형태의 자바스크립트 "값"이다. 콘솔에 찍어보면 아래와 같고,

로컬스토리지에다가 그대로 값을 넣어보면 아래와 같다.

브라우저의 로컬스토리지는 자바스크립트 값을 읽어들일 수 없는 것이다.

따라서 웹과 서버간에 데이터를 주고 받기 위해서는 어떠한 포맷이 필요한데 JSON이 그러한 포맷이다. JSON의 이름에서 알 수 있듯이 자바스크립트 객체와 굉장히 유사하게 생겼지만 엄격한 규칙을 가지고 있다.

JSON 규칙

• 제일 바깥은 {}로 감싸있어야 한다.
• 문자, 숫자, 배열, 객체 형태 타입을 지원한다. 함수(메소드 형식)는 포함되지 않는다.
• key는 반드시 ""로 감싸주어야 한다.
• value가 문자열일 경우 반드시 ""로 감싸주어야 한다. ''는 사용될 수 없다.
• 맨 마지막 아이템 뒤에는 ,가 있으면 안된다.

JSON 포맷으로 변환(stringify)

처음 예시에 사용했던 user를 JSON 포맷으로 변환해서 로컬스토리지에 저장해보면,

const user = {
  id: 1,
  userName: "kim",
  userAge: 20,
};

const jsonUser = JSON.stringify(user);

console.log(jsonUser);

localStorage.setItem("json-user", jsonUser);

값이 원하는대로 잘 저장되었다.

콘솔은 문자열 그대로 {"id":1,"userName":"kim","userAge":20}을 출력하는데, stringify()함수의 이름처럼 문자열로 변환을 시킨 것이다.

JSON 데이터를 값으로 가져오기(parse)

반대로 JSON 포맷형식의 데이터를 값으로 가져올수도 있다.

const json = `
  {
    "id": 1,
    "userName": "kim",
    "userAge": 20
  }
`;

const parseJson = JSON.parse(json);

console.log(parseJson);

에러 핸들링

그런데 데이터가 JSON 규칙에 맞지 않는다면 어떻게 될까?

const json = `
  {
    "id": 1,
    userName: 'kim',
    "userAge": 20,
  }
`;

const parseJson = JSON.parse(json); // Unexpected token u in JSON at ...

console.log(parseJson); // 위에서 실행중단

일부러 각종 규칙에 맞지 않도록 하였더니 변환되지 않았다. 이럴 경우를 대비하여 값을 JSON으로 바꾸거나 파싱하는 경우 try ~ catch 구문으로 감싸주는 것이 좋다.

try ~ catch

const json = `
  {
    "id": 1,
    userName: 'kim',
    "userAge": 20,
  }
`;

try {
  const parseJson = JSON.parse(json);
  console.log(parseJson);
} catch (e) {
  console.log(e);
}
/*
SyntaxError: Unexpected token u in JSON at position 22
    at JSON.parse (<anonymous>)
    at Object.parcelRequire.app.js (app.js:10)
    at newRequire (app.c328ef1a.js:47)
    at app.c328ef1a.js:81
    at app.c328ef1a.js:120
*/