JSON.stringify / JSON.parse

이번 포스팅에서는 데이터 형식인 JSON이 무엇인지와 JSON 직렬화에 대해서 정리하고자 합니다. JSON은 Javascript Object Notation의 줄임말로 데이터 교환을 위헤 만들어진 객체 형태의 포맷입니다.

JSON의 기본 규칙

JSON은 데이터 전송을 위한 포멧이기 때문에 항상 형태를 유지해야합니다. 자바스크립트 객체와 JSON 객체의 차이점을 비교하면 다음과 같습니다.

자바스크립트 객체

1. 키는 따옴표 없이 사용 가능 => { key : "property" }
2. 문자열 값에 작은 따옴표 사용 가능 => { "key" : 'property' }
3. 키-값 사이 공백 사용 가능 => { key : "property" }
4. 키-값 쌍 사이 공백 사용 가능 => { key : "property", num: 1 }

자바스크립트 객체

1. 반드시 쌍따옴표를 사용 => {key:"property"}
2. 반드시 큰따옴표 사용 => {"key":"property"}
3. 키-값 사이 공백 불가 => {"key":"property"}
4. 키-값 쌍 사이 공백 불가=> {"key":"property","num":1}

JSON.stringify

다음과 같은 객체가 있다고 가정했을 때 이 객체 데이터를 전송하기 위해서는 객체를 JSON 형태로 변경 시켜주어야 합니다. 이를 직렬화(Seriallize) 한다고 합니다. 직렬화를 하게 되면 메소드를 사용하여 데이터 값을 변경하지 못하기 때문에 외부의 공격에 대비할 수 있습니다.

const message = {
	name : "홍길동",
  	age : 23,
  	hobby : ["축구", "야구", "배구"]
};

직렬화를 하기위해서 JSON.stringify를 사용합니다. 직렬화를 사용하면 객체 전체가 문자열 형태로 변경되고 문자열이 아닌 key값도 모두 문자열로 변경됩니다. 또한 데이터간 공백도 사라집니다.

const json = JSON.stringify(message);
console.log(json); //'{"name":"홍길동","age":23,"hobby":["축구","야구","배구"]}`

JSON.parse

JSON 형태의 데이터를 다시 자바스크립트 객체로 변경하는 것도 가능합니다. 이때 JSON.parse를 사용합니다. 이것을 역직렬화 한다고 합니다.

const obj = JSON.parse(json);
console.log(obj); // {name: '홍길동', age: 23, hobby: ["축구","야구","배구"]}
console.log(tpyeof obj); // 'object'