JavaScript JSON

seul_velog·2021년 12월 15일

JavaScript json

JavaScript

목록 보기

20/25

📍 JSON이란?

JSON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다.

✍️ 대표적으로 서버와의 통신에서 데이터를 주고받는 하나의 포맷으로 사용된다.

데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식이다.
JSON은 단순히 데이터 포맷이므로 어떠한 통신 방법이나 프로그래밍 문법이 아닌, 데이터를 표시하는 표현 방법이다.

📌 JSON이 만들어진 목적
어떤 표현에 대해 서로 다른 언어들끼리 객체는 그대로 객체로 전송한다거나 배열은 배열 그대로 다른 시스템에 전송 할 수 있도록 하자는 목적으로 만들어진 일종의 데이터 표준이다.

AJAX를 사용해 데이터를 주고 받을 때 그 데이터 포맷으로 JSON을 사용한다.

네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 한다.

문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing)이라고 한다.

1. XML과 JSON

서버와 데이터를 주고받을 때에는 JSON뿐만아니라 다양한 방식이 있다. 대표적으로는 XML을 썼지만 이후에 가장 많이 사용되고 있는 것이 JSON이라고 한다. 🤔

XML

XML은 HTML과 같은 마크업 언어 중 하나이다.
XML을 사용하면 불필요한 태그들이 많이 들어가서 파일의 사이즈도 커질 뿐만 아니라 가독성도 좋지 않다.

JSON

데이터를 주고받을 때 쓸 수 있는 가장 간단한 파일 포맷이다.
텍스트를 기반으로 해서 가볍고, 사람 눈으로 읽기도 편하다.
키-값 쌍으로 이루어진 데이터 형식이기 때문에 대부분의 프로그래밍 언어와 호환이 가능하다. (많은 프로그래밍 언어가 보편적으로 키-값 쌍의 형태로 데이터를 구조화하기 때문)

2. JSON의 특징과 활용

일반적으로 서버와 클라이언트 간의 교류에서 자주 사용된다.
자바스크립트 객체 표기법과 유사하다. JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다.
자바스크립트를 이용하여 JSON 형식의 문서를 자바스크립트 객체로 쉽게 변환할 수 있다.
다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있고, 특정 언어에 종속되지 않으며, 프로그래밍언어나 플랫폼에 상관없이 쓰일 수 있다.
대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.
Ajax로 서버와 통신하며, 데이터를 주고 받을 때 데이터 교환을 쉽게 하기 위해 사용한다.
브라우저 뿐만아니라 모바일에서 서버와 데이터를 주고받을때, 혹은 서버와 통신을 하지않아도 오브젝트를 파일 시스템에 저장할 때도 많이 쓰인다.

📌 check!
JSON 표현식은 사람과 기계 모두 이해하기 쉬우면서 데이터의 용량이 작기 때문에, 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용되고 있다.

3. JSON의 단점

XML에 비해 JSON은 보안에 취약한 면이 있다.
내용이 함축적이다보니 내용의 의미 파악이 힘들 수 있다.
XML에 비해 적은 규격의 데이터 전송엔 적합하지만 대용량의 데이터 송수신엔 부적합하다.
AJAX는 단순히 데이터만이 아니라 JS 자체도 전달할 수 있다. 즉, JSON데이터인 줄 알고 받았는데 악성 스크립트인 상황이 생길 수도 있다는 것이다. (JSON 관련 라이브러리를 따로 사용하는 이유이다.)

4. JSON 형식

1. name-value형식의 쌍

여러가지 언어들에서 object등으로 실현되었다.
{ "Key" : "value"}

{
  "firstName": "seul",
  "lastName": "kim",
  "email": "abc@gmail.com"
}

2. 값들의 순서화된 리스트 형식

여러가지 언어들에서 배열(Array) 등으로 실현되었다.
[value1, value2, ...]

{
  "firstName": "seul",
  "lastName": "kim",
  "email": "abc@gmail.com",
  "hobby": ["painting","game"]
}

✍️
1) JSON에서 중괄호 {} 는 객체(Object) 를 의미하고, 대괄호 [] 는 배열을 의미한다.
2) JSON에서의 객체는 name-value의 쌍의 집합이며, 여기서 name은 반드시 string이고, value는 기본 자료형이거나 배열, 객체이다.
3) 각 쌍들은 쉼표, 로 구분되며 name과 value는 : 으로 이어져 있다.

+) 위에서 "hobby": ["painting","game"] 이것 또한 {} 안에 있으므로 name-value의 쌍이된다.

+) ex. [ 10, {"v": 20}, [30, "마흔"] ]
배열을 나타내는 대괄호[] 안에는 기본자료형10, 객체 { "v" : 20 } , 배열 [30,"마흔] 이 들어가있는 것을 볼 수 있다.

5. JavaScript Object & JSON 형식 텍스트의 변환

JSON.stringify( JSON 문자열로 변환할 값 )
: 자바스크립트 객체를 JSON 텍스트로 변환한다.

JSON.parse( JSON으로 변환할 문자열 )
: JSON 형식의 텍스트를 자바스크립트 객체로 변환한다.

✍️ JSON을 학습할 때 중요한 Key Point 는?

(1) Object를 직렬화(serialize) 해서 JSON으로 변환하는 방법
(2) 직렬화된(serialize) JSON을 deserialize해서 다시 오브젝트로 변환하는 방법

✍️ 직렬화(serialize)

: 데이터 구조나 오브젝트 상태를 (동일한, 혹은 다른) 컴퓨터 환경에 저장하고 나중에 재구성할 수 있는 포맷으로 변환하는 과정이다.

그럼 srtingify를 어떻게 사용할 수 있는지, 그리고 string으로 만들어진 JSON을 어떻게 다시 Object로 변환할 수 있는지 예문을 작성해보자! 😀

5-1. Object to JSON

(1) boolean타입 (Primitive type)을 JSON으로 변환 ▼

let json = JSON.stringify(true); 

console.log(json); // true

(2) 배열을 JSON으로 변환 ▼

let json1 = JSON.stringify(['apple', 'banana']); 

console.log(json1); // ["apple", "banana"]

어느정도 배열 타입처럼 보이게 표기되는 걸 확인할 수 있다.

(3) 오브젝트를 JSON으로 변환 ▼

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    symbol: Symbol('id'),
    jump: () => {
        console.log(`${this.name} can jump!`);
    }
};

json = JSON.stringify(rabbit);

console.log(json);
// {"name":"tori","color":"white","size":null,"birthDate":"2021-12-15T11:38:46.722Z"}

Date라는 오브젝트가 string으로 변환되어서 JSON으로 만들어졌다.
jump라는 함수는 JSON에 포함되지 않은 것을 확인할 수 있다. (함수는 오브젝트에 있는 데이터가 아니기 때문)
❗️자바스크립트에만 있는 데이터 (심볼)도 JSON에 포함되지 않는다.

(4) JSON으로 변환되는 것을 어느정도 통제할 수 있다. ▼

//ex.1)
json = JSON.stringify(rabbit, ['name', 'color']); 

console.log(json);  
// {"name":"tori","color":"white"}



//ex.2)
json = JSON.stringify(rabbit, (key, value) => {  
    return key === 'name' ? 'seul' : value; 
});

console.log(json); 
// {"name":"seul","color":"white","size":null,"birthDate":"2021-12-15T12:11:15.706Z"}

ex.1 원하는 프로퍼티만 골라서 정의를 하게 되면 해당 프로퍼티만 변환될 수 있다.
ex.2 콜백함수를 이용할 수도 있다.

5-2. JSON to Object

parse(json)

const rabbit = {
    name: 'tori',
    color: 'white',
    size: null,
    birthDate: new Date(),
    symbol: Symbol('id'),
    jump: () => {
        console.log(`${this.name} can jump!`);
    }
};


json = JSON.stringify(rabbit);


const obj = JSON.parse(json);  // 다시 오브젝트로 변환
console.log(obj);

rabbit.jump();  // can jump!

obj.jump(); // Error

❓ jump 함수에 에러가 뜬 이유
JSON으로 변환할 때 함수가 포함되어있지 않았고, 데이터만 전달되었다가 다시 JSON을 오브젝트로 변환했기 때문에 에러가 뜬 것이다. (jump메소드는 포함되어 있지 않았다.)

❓ rabbit 의 이름이 출력되지 않는 이유
: rabbit 객체에서 jump라는 메소드는 화살표 함수가 아닌 일반 함수로 선언해야 name에 접근이 가능하다. (객체의 메소드를 화살표 함수로 선언할 경우 this는 전역객체를 가르키기 때문에 window가 출력되는 것이라고 한다. 🧐)

reference
coding-everybody
usefultoknow_JSON
khoa_JSON
ZeddiOS
wiki-serialization
dream_coding
JSON