JS. JSON

JSON

JSON(JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.

비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다.

SON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json이다.

자료형

• 수(Number)
• 문자열(String): 0개 이상의 유니코드 문자들의 연속. 문자열은 큰 따옴표(")로 구분하며 역슬래시 이스케이프 문법을 지원한다.
• 참/거짓(Boolean): true 또는 false 값
• 배열(Array): 0 이상의 임의의 종류의 값으로 이루어진 순서가 있는 리스트. 대괄호로 나타내며 요소는 쉼표로 구분한다.
• 객체(Object): 순서가 없는 이름/값 쌍의 집합으로, 이름(키)이 문자열이다.
• null: 빈 값으로, null을 사용한다.

package.json

• package.json 파일은 배포한 모듈 정보를 담고자 만들어졌다.
• 직접 작성할 수도 있고 npm init 명령을 통해서 자동으로 생성할 수도 있다.
• 터미널에 npm init -y를 입력하면 package.json 파일이 자동으로 만들어진다.

myData.json 예제

{
  "string": "Imae",
  "number": 123,
  "boolean": true,
  "null": true,
  "object": {},
  "array": []
}

json 파일 내에 하나의 객체 데이터를 명시했다.

json 파일 내에는 하나의 데이터만 명시 가능하며, 두 개 이상은 불가능하다.

main.js 활용

import myData from './myData.json'

console.log(myData)
// {string: 'Imae', number: 123, boolean: true, null: true, object: {…}, …}
// array: []
// boolean: true
// null: true
// number: 123
// object: {}
// string: "Imae"
// [[Prototype]]: Object
const user = {
  name: 'imae',
  age: 55,
  emails: [
    'kurt5451@naver.com',
    'kwakjaemin123@gmail.com'
  ]
}
console.log('user', user) // user -> Object
// user 
// {name: 'imae', age: 55, emails: Array(2)}
// age: 55
// emails: (2) ['kurt5451@naver.com', 'kwakjaemin123@gmail.com']
// name: "imae"
// [[Prototype]]: Object
const str = JSON.stringify(user) // 문자 데이터화(JSON 포맷화)
console.log('str', str)
// str {"name":"imae","age":55,"emails":["kurt5451@naver.com","kwakjaemin123@gmail.com"]}
console.log(typeof str) // string

const obj = JSON.parse(str) // JSON 파일을 분석하여 재조립(실제 객체데이터로 출력)
console.log('obj', obj) 
// obj 
// {name: 'imae', age: 55, emails: Array(2)}
// age: 55
// emails: (2) ['kurt5451@naver.com', 'kwakjaemin123@gmail.com']
// name: "imae"
// [[Prototype]]: Object

JSON 파일은 하나의 문자 데이터이다. 이것을 import로 가져오면 객체 데이터처럼 사용할 수 있다.

JSON 파일을 분석하여 경량화하여 조립한 후 실제로 원하는 데이터를 출력한 후 활용하면 된다.

메모리만 참조하는 큰 덩어리의 문자 데이터로 관리된다.

그것을 자바스크립트 데이터로 변경하기 위해서는 JSON.parse를 사용하고

JSON화 하기 위해서는 JSON.stringify를 통해 문자 데이터화를 시켜준다.