[Level up] 데이터 실습(3) - JSON

01.JSON(JavaScript Object Notation)

• 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 Data 교환 형식입니다.
• JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.
• 자바스크립트의 객체 표기법과 유사합니다.
• JSON에서는 Key값에 큰 따음표(" ") 표시를 문법 규칙상 무조건 해줘야합니다.

02.JSON에서 허용되는 자료형

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

03.package.json

{
  "name": "js-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
},
  "dependencies": {
 	 "lodash": "^4.17.21"
	}
}

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

04.myData.json 파일

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

• json 파일은 기본적으로 json 포맷 안에서 사용할 수 있는 기본적인 데이터들을 그대로 명시할 수 있습니다.
• json이라는 확장자를 갖고 있는 하나의 파일이 곧 하나의 데이터가 되는 것입니다.
• 그러므로 하나의 json 파일 내에 하나의 데이터만 명시 가능하며 두 개 이상의 데이터 명시는 불가능합니다.
• 위 코드에서는json 파일 내에 하나의 객체 데이터만 명시했음을 확인할 수 있습니다.

05.main.js에 활용하기

import myDaya from './myData.json'

const user = {
  name: "HEROPY",
  age: 85,
  emails: [
  "[email protected]",
  "[email protected]"
  ]
}

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

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

• json이라는 포맷은 정확하게는 하나의 문자 데이터입니다.
• JSON.stringify(): javascript 데이터를 json데이터 (문자 데이터)로 변환 시켜주는 메소드
• JSON.parse(): json데이터 (문자 데이터)를 javascript 데이터로 변환 시켜주는 메소드