[자바스크립트] JSON형식 직렬화/역직렬화 방법

# JSON(Javascript Object Notation)

: 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷.

: 자바스크립트의 객체처럼 키:값으로 구성되며, 각 객체를 배열로 묶을 수도 있다.

: 문자열로된 키와 값은 큰따옴표("")로 감싸야 한다.

 

// JSON 형식
const arr_JSON = [
    {
        "name": "taeho",
        "age": 37,
        "major": "경제학",
        "hobby": "코딩"
    },
    {
        "name": "eunjung",
        "age": 31,
        "major": "경영학",
        "hobby": "디자인"
    },
    {
        "name": "curryyou",
        "age": 21,
        "major": "역사",
        "hobby": "글쓰기"
    },
];

 

 

# JSON 내장 객체

: 자바스크립트는 JSON데이터 처리를 위한 내장 함수를 제공한다.

 

1)  JSON.stringfy(JSON형식의 객체) 

: 객체 => 문자열로 변환하며, 이를 직렬화(serialize)라고 한다.

: 통신할 때는 문자열로 직렬화하여 주고 받는 것이 안전하다.

 

2)  JSON.parse(JSON형식의 문자열) 

: 문자열 => 객체로 변환하며, 이를 역직렬화(deserialize)라고 한다.

: 통신으로 받은 문자열은 객체로 역직렬화하여 사용하는 겻이 편리하다.

 

 

******* 샘플 예제 소스 코드

 

// JSON타입 배열 생성
const arr_JSON = [
    {
        "name": "원빈",
        "age": 37,
        "major": "경제학",
        "hobby": "코딩"
    },
    {
        "name": "이나영",
        "age": 31,
        "major": "경영학",
        "hobby": "디자인"
    },
    {
        "name": "curryyou",
        "age": 21,
        "major": "역사",
        "hobby": "글쓰기"
    },
];

// 1. 직렬화 : 객체 => 문자열
const str_JSON = JSON.stringify(arr_JSON);
console.log(typeof str_JSON, str_JSON);
/*
출력결과: 문자열
"[{"name":"원빈","age":37,"major":"경제학","hobby":"코딩"},{"name":"이나영","age":31,"major":"경영학","hobby":"디자인"},{"name":"curryyou","age":21,"major":"역사","hobby":"글쓰기"}]"
*/



// 2. 역직렬화 : 문자열 => 객체
const obj_JSON = JSON.parse(str_JSON);
console.log(typeof obj_JSON, obj_JSON);
/*
출력결과: 객체
[
  { name: '원빈', age: 37, major: '경제학', hobby: '코딩' },
  { name: '이나영', age: 31, major: '경영학', hobby: '디자인' },
  { name: 'curryyou', age: 21, major: '역사', hobby: '글쓰기' }
]
*/