[Javascript] 한번에 끝내는 JSON(JavaScript Object Notation) 기초

JSON은 JavaScript Object Notation의 줄임말입니다.

한글로 표현하면 "자바스크립트 객체를 표현하는 방법"이며, 자바스크립트의 객체를 텍스트 데이터 형태로 표기하는 표준 방법입니다. 문자열로 기술한 데이터 구조를 객체로 변환할 수 있으며, 반대로 자바스크립트 객체를 문자열, 그러니까 JSON으로 표현할 수도 있습니다.

최초에는 자바스크립트 언어용으로 제안되었으나, 현재는 대부분의 개발언어에서 지원하는 사실상의 산업 표준 데이터 표현 방법으로 자리를 잡았습니다.

원격 데이터 교환을 위한 데이터 포맷으로, 또 API의 표준 데이터 표현 방법으로 JSON을 주로 사용합니다.

대표적인 데이터 표현 방식 중 하나인 XML이 데이터 오버헤드가 커서 데이터 크기가 쉽게 커지는 반면 JSON은 작고 가볍게 표현이 가능하기 때문에 더욱 선호되는 측면이 있습니다.

JSON 포맷은 파일로 저장해서 데이터 파일로도 사용할 수 있으며, JSON 포맷 그대로를 파일로 저장하고 확장자는 .json으로 사용합니다.

JSON 포맷은 표준 기술 방법이 있고, 중괄호, 대괄호, 그리고 대부분의 개발 언어에서 사용하는 표준적인 데이터 타입 기술방법으로 데이터를 표현하기 때문에 굉장히 사용하기가 쉽습니다.

최초에 자바스크립트용으로 사용하기 위해 고안되었기 때문에 자바스크립트와는 호환성이 아주 좋습니다.

호환성이 좋다기보다는 자바스크립트의 객체 자체를 문자열로 표현한 것이기 때문에 자바스크립트 객체 그 자체리고, 내장 객체로 상호 전환하는 메서드를 기본 제공하기 때문에 데이터의 변환과 전송이 쉽습니다.

JSON 데이터 타입

JSON 포맷은 일반적인 데이터 타입을 모두 표현합니다.

문자열 뿐만 아니라 숫자, 불리언, 배열, 그리고 널과 키/밸류 구조의 객체를 표현할 수 있습니다. 자바스크립트 객체가 표현하는 데이터 타입은 모두 지원한다고 생각하면 쉽습니다.

JSON 데이터 기초 표현

JSON 데이터를 표현하는 기본 표현 문법은 "키":"밸류" 쌍입니다. 

JSON 데이터를 객체로 변환하면 객체["키"], 객체.키 와 같은 접근 방법으로 "밸류"에 접근할 수 있습니다.

키/밸류 쌍은 콤마로 구분해서 여러 개의 키/밸류 쌍을 나열해서 표현합니다.

"key":"value",

"key2":"value2",

JSON 데이터는 최종적으로 중괄호({})로 감싼 객체로 표현합니다.

JSON 데이터의 최상위 루트는 항상 객체가 됩니다.

자바스크립트 코드의 객체 표현과 완전히 동일하지만, 키 부분만 따옴표, 또는 큰따옴표로 감싸서 표현해야 하는 차이가 있습니다. JSON 데이터는 다음과 같이 트리 형태로 된 중첩 데이터 표현으로 표현됩니다.

{
    "key":"value",
    "key2":"value2",
    "number": 3,
    "istrue": true,
    "cars": ["sonata", "avante", "grandeur"],
    "kakao": [
        {
            "name": "라이언",
            "age":5,
            "gender":"male",
            friends: ["어피치","콘","프로도"]
        }
        {
            "name": "어피치",
            "age":3,
            "gender":"female",
            friends: ["프로도","단무지"]
        }
    ]
}

JSON 문법으로 작성하는 자바스크립트 객체

객체 배열을 자바스크립트에서 작성을 하면 다음과 같이 작성합니다.

배열 요소에 해당하는 객체 안의 키 부분은 키 이름만으로 표시할 수 있으며, JSON 데이터 표현 방식처럼 따옴표, 큰 따옴표로 감싸서 표현할 수도 있습니다.

실제 생성된 객체를 콘솔에 출력해 보면 속성의 키 부분은 따옴표가 없는 이름만 표시되는 것을 확인할 수 있습니다. 

자바스크립트에서 속성의 키는 name, 'name', "name" 표현은 모두 동일하게 키값 name으로 표현됩니다.

const friends = [{
    "name": "라이언",
    "age":5,
    "gender":"male",
    friends: ["어피치","콘","프로도"]},
    {
    "name": "어피치",
    "age":3,
    "gender":"female",
    friends: ["프로도","단무지"]},
]
console.log(friends)

JSON 데이터의 파일 저장

JSON 데이터는 텍스트 데이터 형태로 파일로 저장할 수 있습니다. 저장한 파일은 "json" 확장자를 가지며, json 확장자를 가지는 모든 파일은 표준 json 포맷 파일이 됩니다. 호환성 이슈나 버전 이슈가 없으므로, 다른 개발 언어나 다른 운영체제, 다른 플랫폼에서 json 파일을 읽는데 아무런 문제가 없습니다.

JSON 문자열을 객체로 변환하기

JSON 데이터 표현은 자바스크립트의 객체 그 자체입니다. JSON 포맷 문자열과 자바스크립트 객체를 자유롭게 오고 갈 수 있기 때문에 JSON 포맷으로 표현된 것은 모두 객체로 변환이 가능합니다.

다음처럼 JSON 문자열(백틱을 사용해서 문자열로 정의)은 자바스크립트의 내장 객체인 JSON 객체의 JSON.parse() 메서드를 이용해 객체로 변환할 수 있습니다.

const friends = `[{
    "name":"라이언",
    "age":5,
    "gender":"male",
    "friends":["어피치","콘","프로도"]},
    {
    "name": "어피치",
    "age":3,
    "gender":"female",
    "friends":["프로도","단무지"]}
]`
console.log(friends)
console.log(JSON.parse(friends))

!주의할 점이 있습니다.

자바스크립트 객체로 데이터를 표현할 때는 마지막 키/밸류 쌍 끝에 쉼표를 추가로 표시해도 되고 키 값을 따옴표, 큰따옴표 없이 표시해도 되지만, 문자열로 표현한 JSON 데이터를 객체로 변환할 때는 모두 에러로 처리됩니다.

정확하게 JSON 작성 규칙에 맞춰 키값은 따옴표, 큰 따옴표로 감싸야하고, 마지막 키/밸류 이후에 쉼표를 표시하면 안 됩니다.

자바스크립트 객체를 JSON 텍스트 문자열로 변환하기

자바스크립트 객체는 JSON 문법의 텍스트 문자열로 변경할 수 있습니다.

원격 데이터 요청에 대해서 JSON 포맷의 결과를 반환하는 API 기능은 생성한 데이터를 하나의 텍스트 문자열로 반환해야 합니다.

자바스크립트에는 키/밸류 구조의 객체를 JSON 포맷의 텍스트 문자열로 변경하는 메서드가 기본 제공됩니다.

객체 배열을 JSON 포맷의 텍스트 문자열로 변환하면 다음과 같이 출력됩니다.

const friends = [{
        name: "라이언",
        age:5,
        gender:"male",
        friends: ["어피치","콘","프로도"]},
    {
        name: "어피치",
        age:3,
        gender:"female",
        friends: ["프로도","단무지"]},
    ]        
    console.log(friends);
    console.log(JSON.stringify(friends))

AJAX로 JSON 데이터를 파싱하기

API, 또는 원격서버에서 요청한 데이터를 JSON 문자열로 받아서 자바스크립트 객체로 변환한 후 객체의 속성에 접근해서 화면 UI에 적용하는 데이터 처리 과정을 알아보겠습니다.

JSON 데이터는 앞서 만들었던 JSON 문자열을 그대로 friends.json 텍스트 파일로 저장해서 사용합니다.

window.fetch('./friends.json',{}).then(response=>{
    response.text().then((jsontext)=>{ //fetch response 데이터를 텍스트로 변환
        json = JSON.parse(jsontext) // 반환받은 텍스트를 객체로 변환
        console.log(json)
        for(let i=0;i<json.length;i++){
            document.querySelector(`#row${i+1} > td:first-child`).innerHTML = json[i].name //객체 속성값을 UI에 적용
        }
    })
})