Front End/JavaScript

JSON

JSON(JavaScript Object Notation)

JSON은 서로 다른 프로그램 사이에서 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. JavaScript 뿐만 아니라 많은 언어에서 범용적으로 사용하는 유명한 포맷이기도 하다.

JSON의 탄생 배경

네트워크를 통해 데이터를 주고 받으려면 데이터를 보내는 수신자와 받는 송신자가 사용하는 프로그램이 같거나 문자열처럼 범용적으로 읽을 수 있어야 한다. 하지만 JavaScript에서 객체는 문자열로 변환하면 [object Object]라는 결과를 리턴하기 때문에 제대로 된 데이터 송수신이 불가능하다.

이 문제를 해결하는 방법은 객체 → JSON 형태로 변환하거나 JSON → 객체 형태로 변환하는 것이다. JSON 형태로 변환 된 객체의 타입은 문자열이기 때문에, 정상적인 데이터 송수신이 가능해진다.

JavaScript에서의 JSON 변환

  • JSON.stringify(data) : 객체를 JSON으로 변환한다. → 이 과정을 직렬화(serialize)한다고 일컫는다.
    let transferableMessage = JSON.stringify(message)
    
    console.log(transferableMessage) 
    // `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`
    
    console.log(typeof(transferableMessage))
    // `string`
  • JSON.parse(data) : JSON을 객체로 변환한다. → 이 과정을 역직렬화(deserialize)한다고 일컫는다.
    let packet = `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`
    let obj = JSON.parse(packet)
    
    console.log(obj)
    /*
     * {
     * sender: "김코딩",
     * receiver: "박해커",
     * message: "해커야 오늘 저녁 같이 먹을래?",
     * createdAt: "2021-01-12 10:10:10"
     * }
     */
    
     console.log(typeof(obj))
     // `object`

JSON의 기본 규칙

JSON은 얼핏 JavaScript의 객체와 별반 다를 바가 없어 보이지만, 자바스크립트의 객체와는 미묘하게 다른 규칙들이 존재한다.

JavaScript 객체JSON
키는 따옴표 없이 쓸 수 있음 { key : "property" }반드시 쌍따옴표를 붙여야 함 '{"key":"property"}'
문자열 값작은따옴표도 사용 가능 { "key" : 'property' }반드시 큰따옴표로 감싸야 함 '{"key":"property"}'
키와 값 사이 공백사용 가능 {"key" : 'property'}사용 불가능 '{"key":"property"}'
키-값 쌍 사이 공백사용 가능 { "key":'property', num:1 }사용 불가능 '{"key":"property","num":1}'


Uploaded by N2T