JSON [패스트캠퍼스 챌린지 10일차]

자바스크립트의 객체 표기법

위키백과 설명

JSON(JAVAScript Object Notation)은,
(쉽게 말하자면 자바스크립트의 데이터를 표현하는 하나의 포맷)
속성-값(키-밸류) 쌍으로 이루어진
(객체 데이터와 유사)
데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.
비동기 브라우저/서버 통신을 위해 넓게는 XML을 대체하는 주요 데이터 포맷이다.
인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다.
특히, 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다

(웹사이트는 자바스크립트가 동작할 수 있는 환경이기 때문에
JSON을 이용해 많은 것들을 할 수 있음)

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

---

JSON 포맷에서 사용할 수 있는 자료형(데이터)와 문법

(undefined 빼고 다 된다고 보면 됨)

Number
String → ⚠️ JSON에서 문자열 작성할 때는 큰 따옴표 사용하기
Boolean
Array
Object
null

• tmi 특수기호와 따옴표

  • 일반적으로 JS에서 속성은 일반적으로 따옴표 없이 작성함

    → 근데 따옴표 붙여도 상관 없음

  • 따옴표 붙여야 하는 경우는 특수기호가 들어갈 때 like 케밥케이스

  • 원래는 카멜 케이스로 작성해야하지만 예외상황들이 있을 때도 있으니까...

const user = {
    'name': 'Happy',
    'age': 77,
    'company-name' : 'milktea'
}

---

node.js 환경에서 npm을 통해 패키지를 관리하는 프로젝트는 기본적으로
패키지라는 이름의 json이라는 확장자를 사용하는 파일이 자동으로 해석이 돼서 프로젝트를 구성할 수 있는 구조가 됨.

npm init -y

결국 node.js환경의 npm은 package.json 파일로 환경의 구성 옵션을 만들어서 관리하는 것이고,

JSON은 하나의 데이터처럼 취급할 수 있기 때문에

그런 구성 옵션을 관리하기가 좋은 .json 포맷으로 데이터처럼 관리한다는 거임

---

해보자

• .json 파일 만들어보기
  제이슨 파일은 기본적으로
  제이슨 포맷안에서 사용할 수 있는 기본적인 데이터들을 그대로 명시할 수 있음
  → .json 확장자를 가진 파일이 곧 하나의 데이터가 되는 것임

  //myData.json
  123

• 두 개의 데이터를 동시에 명시할 수 없음

  //myData.json
  123
  false
  //두 개의 데이터 동시에 명시 안됨
  //하나의 데이터만 입력해줘야 함

• 객체 데이터 만들어보자

  //myData.json
  {
  "string" : "Donut",
  "number" : 123,
  "Boolean" : true,
  "null" : null,
  "object" : {},
  "array" : []
  }

• main.js로 이동

• myData.json을 main.js로 가져와볼까

  //문서 상단에 명시
  import myData from './myData.json'

• myData.json을 출력해보자

  import myData from './myData.json'
  

console.log(myData)

JSON파일에 입력한 객체 데이터가 잘 출력됨
그런데 여기서 속으면 안됨
JSON확장자를 가진 파일은 사실 하나의 문자 데이터임
그런데 import로 json파일을 가지고 오면 그것이 자동으로 변환돼서 객체 데이터처럼 출력되는 거임.
정확히는 .json 파일은 문자 데이터!

증명해보자

---
### JSON.stringify(인수)

```jsx
//main.js
import myData from './myData.json'

console.log(myData)

const user = {
  name: 'Happy',
  age: 77,
  emails: [
    'happy@birthday.com',
    'joyful@birthday.com'
  ]
}
// JSON은 전역 객체
const str = JSON.stringify(user)
console.log('str', str)
console.log(typeof str)

→ 이게 console.log('str', str)의 값임(문자 데이터)

str {"name":"Happy","age":77,"emails":["happy@birthday.com","joyful@birthday.com"]}

→ 이 문자 데이터를 myData.json에 복붙하고 main.js에서 콘솔로그로 어떻게 다시 나올지 확인해보자

//객체데이터처럼 출력됐네
{name: 'Happy', age: 77, emails: Array(2)}

---

JSON이란 포맷은 정확하게는 하나의 문자 데이터.

그런데 이 녀석을 JS에 import로 가져와서 해석되는 와중에 객체데이터처럼 사용됨

' .json 파일이 객체데이터처럼 사용이 된다'고 하면

데이터의 불변성 시간에 배운 것처럼

그 객체데이터 안에 있는 여러가지 데이터들을

각각의 메모리에 할당해서 저장해야 하잖아.

그러니까 통신을 하기 위한 용도라든가 가볍게 사용하기 위한 용도로는 적합하지 않음

.json 파일은 결국 하나의 문자데이터로만 관리가 되는 것이고

그랬을 때 자바스크립트 파일 내부에서 특정한 데이터를

JSON의 형태/포맷으로 문자데이터화 시켜주는 메소드가 stringify라고 보면 됨

그래서 JSON.stringify의 인수로 굳이 객체데이터가 아니더라도

자바스크립트 파일에서 사용할 수 있는 모든 데이터를 인수로 사용해서

JSON 포맷 즉, 문자데이터로 만들어서 활용할 수 있음

그렇게 만들어진 문자데이터를 JSON.parse() 메소드의 인수로 넣어서

자바스크립트에서 활용할 수 있는 데이터로 재조립할 수 있음

---

JSON.parse(인수)

JSON.stringify 사용해서 나온 문자데이터를 parse로 다시 출력해보자

const obj = JSON.parse(str)
console.log('obj', obj)

//obj {name: 'Happy', age: 77, emails: Array(2)}

문자데이터를 JSON.parse()를 이용해서 JS의 데이터로 변경해주면 콘솔에 출력해봤을 때

실제 객체데이터처럼 출력이 잘 됐네.

---

JSON은 사용되는 용도가 명확하기 때문에 최대한 경량화를 시켜야 되는 구조이고

단순하게 하나의 메모리만 참조할수 있는 큰 덩어리의 문자데이터로 관리가 되고

우리가 쓸 수 있는 실제 자바스크립트 데이터처럼 변경이 되려면 JSON.parse( )를 사용하고

반대로 그것을 제이슨화 시키려면 JSON.stringify()라는 문자데이터화를 시켜주는 메소드를 실행하면 됨

---

JSON.stringify()

→인수로 전달받은 JS 객체를 string 문자열로 변환하여 반환

JSON.parse()

→string객체(문자열)를 자바스크립트 객체로 변환해서 반환

---

이해를 한듯 하면서 안 한듯도 하고

---

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online