JSON

1. JavaScript Object Notation

자바스크립트의 데이터를 표현하는 하나의 포맷이라고 할 수 있습니다. 이는 속성-값 쌍 또는 키-값 쌍으로 이루어져 사람이 읽을 수 있는 글자로 사용하는 개방형 표준 포맷입니다.
비동기 브라우저/서버 통신(AJAX)에서 사용되고 XML을 대체하는 주요 데이터 포맷입니다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있습니다. JSON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json입니다.

2. 자료형

• 수(Number)
• 문자열(String): 문자열은 반드시 큰 따옴표(")로 구분
• 참/거짓(Boolean): true 또는 false 값
• 배열(Array): 순서가 있는 리스트이며, 대괄호로 나타내고 요소는 쉼표로 구분
• 객체(Object): 순서가 없는 이름/값 쌍의 집합으로 이름(키)이 문자열
• null: 빈 값으로, null을 사용

3. package.json 살펴보기

{
  "name": "js-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js"
}

node.js 환경에서 npm을 통해서 패키지를 관리하는 프로젝트는 기본적으로 package.json 파일이 자동으로 해석이 되어 프로젝트를 구성할 수 있는 구조가 됩니다. 그래서 터미널에 npm init -y를 입력하면, 자동으로 package.json 파일이 만들어지며 node.js 환경에서 npm은 package.json 파일로 환경의 구성 옵션을 만들어서 관리하는 것입니다. 그리고 json이라는 것은 하나의 데이터로 취급할 수 있으므로 이러한 구성 옵션을 관리하기 좋습니다.

4. myData.json 파일 생성

그렇다면 프로젝트에 직접 myData.json 파일을 생성하여 실습해봅시다.
json 파일은 기본적으로 json 포맷 안에서 사용할 수 있는 기본적인 데이터들을 그대로 명시할 수 있습니다. 또한, json이라는 확장자를 갖고 있는 하나의 파일이 곧 하나의 데이터가 되는 것입니다. 그러므로 하나의 json 파일 내에 하나의 데이터만 명시 가능하며, 두 개 이상은 불가능합니다.

{
  "string": "OROSY",
  "number": 123,
  "boolean": true,
  "null": null,
  "obect": {},
  "array": []
}

위와 같이 json 파일 내에 하나의 객체 데이터를 명시했음을 확인할 수 있습니다.

5. main.js에 활용하기

그렇다면 myData.json 파일을 main.js에 활용하는 방법을 알아봅시다.

import myDaya from './myData.json'

const user= {
  name: 'OROSY',
  age: 33,
  emails: [
    'hanei100@naver.com',
    'hanei7632@gmail.com'
  ]
}

const str = JSON.stringify(user) // 문자 데이터화(JSON 포맷화)

const obj = JSON.parse(str) // JSON 파일을 분석하여 재조립(실체 객체데이터로 출력)

json이라는 포맷은 정확하게는 하나의 문자 데이터입니다. 그것이 import로 가져오게 되면 객체 데이터처럼 사용되는 것을 확인해볼 수 있습니다. 이렇게 하나의 문자 데이터로만 관리되는 것이고, JSON 파일을 분석하여 재조립해서 실제로 원하는 데이터로 출력을 한 후 활용을 하면 됩니다.
JSON은 사용되는 용도가 명확하므로 최대한 경량화를 해야하는 구조이며, 단순히 하나의 메모리만을 참조하는 큰 덩어리의 문자 데이터로 관리됩니다. 그것을 실제로 활용하는 자바스크립트의 데이터로 변경을 위해서는 JSON.parse를 진행하고 반대로 JSON화를 시키기 위해서는 JSON.stringify를 통해 문자 데이터화시켜주는 메소드를 실행하면 되는 것입니다.