JavaScript 베이스캠프

JSON

JSON 이해하기

1. JSON 이란?

JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하는 데 사용되는 가벼운 텍스트 기반의 데이터 교환 형식입니다. 자바스크립트 객체 표기법을 기반으로 하지만 언어에 독립적이어서 다양한 프로그래밍 언어에서 사용됩니다. 다른 방식에 비해 가볍고 읽기 쉬워 널리 사용되고 있으니 개발자라면 JSON을 잘 이해하고 사용할 수 있어야 합니다.

1.1 JSON의 기본적인 형태

JSON은 이름과 값의 쌍으로 이루어진 데이터 객체를 표현합니다. 이름과 값은 콜론(:)으로 구분하고, 데이터 객체는 쉼표(,)로 구분합니다. 데이터 객체는 중괄호({})로 묶어서 표현하고, 배열은 대괄호([])로 묶어서 표현합니다.

{
  "squadName": "슈퍼히어로",
  "members": [
    {
      "name": "아이언맨",
      "age": 29,
      "realName": "토니 스타크"
    },
    {
      "name": "헐크",
      "age": 39,
      "realName": "브루스 배너"
    }
  ]
}

{
  "squadName": "슈퍼히어로",
  "members": [
    {
      "name": "아이언맨",
      "age": 29,
      "realName": "토니 스타크"
    },
    {
      "name": "헐크",
      "age": 39,
      "realName": "브루스 배너"
    }
  ]
}

JSON은 특히 데이터 통신에서 많이 쓰이기 때문에 데이터를 순회거나거 꺼내는 용도로 많이 사용합니다. 아래 데이터에서 여러개의 데이터를 꺼내보거나 순회해보세요. 더 복잡한 데이터를 만들어보고 순회해보세요.

const data = { "name": "licat", "age": 25, "hobby": ["낚시", "독서", "등산", "요리"], "relationship": { "friend": ["뮤라", "빙키", "개리"], "enemy": ["라이언"] } } console.log(data["hobby"][0]);

2. JSON의 탄생 배경

프로그래머들은 서로 다른 프로그래밍 언어 간에 데이터를 전달할 때 어려움을 겪었습니다. 예를 들어 배열 데이터의 표현방식은 자바스크립트와 C는 다릅니다.

int arr[5] = {1, 2, 3, 4, 5};

int arr[5] = {1, 2, 3, 4, 5};

let arr = [1, 2, 3, 4, 5];

let arr = [1, 2, 3, 4, 5];

숫자와 문자열은 언어마다 표현방식이 같은데 이를 이용해서 만든 대표적인 데이터 포멧이 XML입니다. 후에 XML의 복잡한 구조를 더 단순히 하고자 탄생한 것이 JSON 입니다.

2.1 같은 데이터를 가지는 JSON 과 xml 비교

JSON 데이터 입니다.

{
  "squadName": "슈퍼히어로",
  "members": [
    {
      "name": "아이언맨",
      "age": 29,
      "본명": "토니 스타크"
    },
    {
      "name": "헐크",
      "age": 39,
      "본명": "부르스 배너"
    }
  ]
}

{
  "squadName": "슈퍼히어로",
  "members": [
    {
      "name": "아이언맨",
      "age": 29,
      "본명": "토니 스타크"
    },
    {
      "name": "헐크",
      "age": 39,
      "본명": "부르스 배너"
    }
  ]
}

위 JSON 데이터를 XML로 표현하면 아래와 같습니다.

<?xml version="1.0" encoding="UTF-8" ?>
<root>
  <squadName>슈퍼히어로</squadName>
  <members>
    <name>아이언맨</name>
    <age>29</age>
    <본명>토니 스타크</본명>
  </members>
  <members>
    <name>헐크</name>
    <age>39</age>
    <본명>부르스 배너</본명>
  </members>
</root>

<?xml version="1.0" encoding="UTF-8" ?>
<root>
  <squadName>슈퍼히어로</squadName>
  <members>
    <name>아이언맨</name>
    <age>29</age>
    <본명>토니 스타크</본명>
  </members>
  <members>
    <name>헐크</name>
    <age>39</age>
    <본명>부르스 배너</본명>
  </members>
</root>

데이터를 표현하는 방식은 이 2가지 뿐만 아니라 다양한 방식이 있습니다. JSON은 데이터를 표현하는데 가장 간단하고 가볍기 때문에 많이 사용됩니다.

XML은 아직도 많이 사용되고 있습니다.

XML은 데이터를 계층적으로 표현할 수 있어서 데이터를 표현하는 데 용이합니다. 하지만 XML은 데이터를 표현하는 데 많은 양의 태그를 사용하므로 가독성이 떨어집니다. 그래서 JSON이 등장하면서 XML보다 가볍고 읽기 쉬운 데이터 포멧으로 많이 사용되고 있습니다. 다만 XML은 여전히 많은 곳에서 사용되고 있습니다.

아래 링크를 통해 제주도청 뉴스페이지와 RSS 링크를 확인해보세요. 2024년 6월 기준으로 제주도청 뉴스페이지는 XML로 표현되어 있습니다. 연도를 표기한 이유는 서비스가 변경되어 추후 XML을 제공하지 않을 수도 있기 때문입니다.

제주도청 뉴스페이지 제주도청 RSS 링크

3. JSON 메서드

JSON은 자바스크립트 객체와 JSON 문자열을 변환하는 메서드를 제공합니다. 실무에서 자주 사용되는 메서드이므로 잘 알아두세요.

JSON.parse(): JSON문자열을 자바스크립트 객체로 변환합니다.

const json = '{"result":true, "count":42}'; // 문자열인 json 데이터 // console.log(json[0]); // console.log(json[1]); const obj = JSON.parse(json); console.log(obj); // 문자열에서 객체로 변환

const json = '[1, 2, 3]'; // 문자열인 json 데이터 // console.log(json[0]); // console.log(json[1]); const obj = JSON.parse(json); console.log(obj); // 문자열에서 배열(객체)로 변환

이번에는 다중으로 중첩된 JSON 문자열을 객체로 변환해보겠습니다. 좀 더 복잡한 데이터를 만들어 객체로 변환해보세요.

const json = '[1, 2, [1, 2, 3]]'; const obj = JSON.parse(json); console.log(obj);

JSON.stringify() : 자바스크립트 객체를 JSON문자열로 변환합니다.

const obj = { result: true, count: 42 }; const json = JSON.stringify(obj); console.log(json[0]); // 객체에서 문자열로 변환 console.log(json[1]);

const arr = [1, 2, 3]; const json = JSON.stringify(arr); console.log(json); // 배열(객체)에서 문자열로 변환

다만 아래와 같이 Map은 JSON.stringify()를 사용할 수 없습니다.

const map = new Map(); map.set('key', 'value'); const json = JSON.stringify(map); console.log(json);

변경이 필요하다면 다른 자료형으로 한 번 변환한 후 JSON.stringify()를 사용하세요. 다만 이 경우에도 숫자로 된 key가 문자열로 변경이 되는 등에 문제가 발생할 수 있습니다.

let map = new Map([['key1', 'value1'], ['key2', 'value2']]); let json = JSON.stringify(Array.from(map.entries())); console.log(json);

4. JSON Generator

아래와 같은 서비스에서 JSON 형태를 받아 테이블 제작, 정렬 등 여러 실습을 해볼 수 있습니다. 이러한 가짜 데이터를 mock라고 합니다. 생성된 데이터의 형태를 보며 특정한 값에 통계를 내거나, 특정한 값에 대한 평균 등을 구해보세요. JSON 데이터를 다루는데 익숙해질 수 있습니다.

JSON Generator

5. 실무에서 사용하는 여러 JSON 형태

실무에서 사용했던 여러 JSON 형태를 소개합니다. 실제 서비스로 들어가 네트워크 탭에서 데이터를 확인해볼 수 있습니다. 아래 JSON 형태를 보고 어떤 데이터를 담고 있는지 생각해보세요.

5.1 스터디인

스터디인 서비스는 https://www.studyin.co.kr/ 에서 운영이 되고 있습니다.

[
  {
    "id": 463,
    "title": "[9月 위니북위온앤온] 함께 독서하고 이야기 나눠요",
    "thumbnail": "이미지 링크",
    "offline": false,
    "recruitment": 10,
    "study_info": "설명",
    "leader": {
      "id": 43,
      "profile": {
        "nickname": "SoulGom",
        "introduction": "위니브(제주코딩베이스캠프) 디자이너 소울곰입니다."
      }
    }
  }
  // 생략..
]

[
  {
    "id": 463,
    "title": "[9月 위니북위온앤온] 함께 독서하고 이야기 나눠요",
    "thumbnail": "이미지 링크",
    "offline": false,
    "recruitment": 10,
    "study_info": "설명",
    "leader": {
      "id": 43,
      "profile": {
        "nickname": "SoulGom",
        "introduction": "위니브(제주코딩베이스캠프) 디자이너 소울곰입니다."
      }
    }
  }
  // 생략..
]

5.2 라이브 코로나

라이브 코로나 서비스는 https://livecorona.co.kr/ 에서 운영이 되고 있습니다. 여기에 올라가는 수많은 데이터가 모두 JSON 형식입니다.

[
  ["2/1", 12, 1, 0, 0],
  ["2/2", 15, 3, 0, 0],
  ["2/3", 15, 0, 0, 0]
  // 생략..
]

[
  ["2/1", 12, 1, 0, 0],
  ["2/2", 15, 3, 0, 0],
  ["2/3", 15, 0, 0, 0]
  // 생략..
]