JSON
- JavaScript Object Notation
- 클라이어언트 서버간 통신을 위한 텍스트 데이터 포맷이다. 즉 데이터를 저장하거나 전송할 때 사용하는 데이터 형식이다.
- JSON 표현식은 사람과 기계가 모두 이해하기 쉽고 용량이 작아서, xml을 대체하여 데이터 전송에 많이 사용된다.
- JSON은 자바스크립트 문법에 기반을 두고 있지만 차이점도 존재하며, 자바스크립트에 종속되지 않는 독립형 데이터 포맷이다. 따라서 자바스크립트 이외에 다른 프로그래밍 언어에서도 사용할 수 있다.
JSON 표기 방식
- 자바스크립트의 객체 리터럴과 유사하게 키 : 값의 쌍으로 구성된 순수한 텍스트이다.
- JSON의 키는 반드시 "큰따옴표"('작은따옴표' X) 여야 하고, 값은 객체 리터럴과 동일하게 사용하되 문자열은 반드시 "큰따옴표"를 사용한다.
// JSON 포맷 문자열 예시
{
"users": [
{
"name": "hyejung",
"age": 26,
"favorite": ["swimming", "cat"],
"human": true,
"cat": false
},
{
"name": "sandeul",
"age": 3,
"favorite": ["churu", "toy"],
"human": false,
"cat" : true
}
]
}
JSON.stringify()
- JSON.stringify : 객체 to JSON 포맷 문자열 변환 메서드.
- 직렬화 : 클라이언트에서 서버로 객체를 전송하기 위해 객체를 문자열화 하는 것.
- 객체는 실제 데이터가 아닌 힙에 할당된 메모리 주소를 참조하는 참조형 데이터이다. 이렇게 내부에서 병렬적인 형태로 존재하는 데이터를 외부에서 저장 혹은 통신에 사용하기 위해서는 직렬화 즉, 독립적인 값으로 만들어야 한다.
const obj = {
name: 'hyejung',
age: 26,
favorite: ['swimming', 'cat'],
human: true,
cat: false,
};
// 객체 to JSON
const json = JSON.stringify(obj);
console.log(json);
// {"name":"hyejung","age":26,"favorite":["swimming","cat"],"human":true,"cat":false}
// 객체 to JSON : 들여쓰기로 가독성을 높인다.
const prettyJson = JSON.stringify(obj, null, 2);
console.log(prettyJson);
/* {
"name": "hyejung",
"age": 26,
"favorite": [
"swimming",
"cat"
],
"human": true,
"cat": false
} */
// object 에서 string으로 type이 바뀐다.
console.log(typeof obj, typeof json);
// object string
JSON.stringify의 매개변수와 옵션
JSON.stringify(value[, replacer[, space]])
- value : JSON 포맷 문자열로 변환할 객체 혹은 값 (참고로 함수, 심볼, 값이 undefined 인 프로퍼티는 무시된다.)
- replacer (옵션) : 문자열화 동작 방식을 변경하는 함수 혹은 JSON 문자열에 포함될 객체들의 속성을 선택하기 위한 값들의 배열이 들어간다. 이 값이 Null 이거나 생략되면, value 파라미터에 전달한 객체의 모든 프로퍼티가 JSON 문자열에 포함된다.
- space(옵션) : 가독성을 향상시키기 위해 문자열 출력시 공백을 조정할 수 있는 옵션이다. String 혹은 Number 타입의 값이 전달될 수 있는데, 전달인자가 number 타입이라면 그 값은 공백의 갯수가 된다.(최대 10개)
만약 전달인자가 string 타입이라면 첫번째 부터 10개의 문자가 공백으로 사용된다. 이 매개변수가 전달되지 않는다면 공백이 사용되지 않는다.
replacer 옵션 사용 예시
// 값이 number 타입인 프로퍼티는 제외하는 함수
const filter = function (key, value) {
// stringify 메서드는 undefined 값을 가지는 속성을 JSON 문자열에 포함시키지 않는다!
// 따라서 type이 'number'일 때 undefined를 반환하는 것은
// 해당 프로퍼티를 포함시키지 않는다는 의미가 된다.
if (typeof value === 'number') return undefined;
else return value;
};
const noNumberJson = JSON.stringify(obj, filter, 2);
console.log(noNumberJson);
// number 타입을 제외한 나머지 프로퍼티만 JSON 문자열에 추가되었다.
// space 옵션에 2를 넣으면, 2 만큼의 공백을 두고 정렬된 JSON 문자열이 반환된다.
/* {
"name": "hyejung",
"favorite": [
"swimming",
"cat"
],
"human": true,
"cat": false
} */
// 속성 이름을 배열로 넘겨주면 해당 속성만 포함한 JSON 문자열을 반환한다.
const json2 = JSON.stringify(obj, ['name', 'favorite'], 2);
console.log(json2);
/* {
"name": "hyejung",
"favorite": [
"swimming",
"cat"
]
} */
JSON.parse()
- JSON.parse: JSON to 객체 디코딩.
- 역직렬화 혹은 파싱(Parsing) : 서버에서 클라이언트로 전송된 JSON 문자열을 객체로 사용하기 위한 과정.
- JSON 문자열을 프로그램 런타임에서 실제로 활용할 수 있는 내부 포맷 (객체)로 변환시켜야 하고 이것을 파싱이라고 한다.
const obj = {
name: 'hyejung',
age: 26,
favorite: ['swimming', 'cat'],
human: true,
cat: false,
};
// 객체 to JSON
const prettyJson = JSON.stringify(obj, null, 2);
// JSON to 객체
const parsed = JSON.parse(prettyJson);
console.log(typeof parsed, parsed);
/* object {
name: 'hyejung',
age: 26,
favorite: [ 'swimming', 'cat' ],
human: true,
cat: false
} */
참고자료
http://www.yes24.com/Product/Goods/92742567
모던 자바스크립트 Deep Dive - YES24
『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드
www.yes24.com
https://ko.javascript.info/json
JSON과 메서드
ko.javascript.info
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
JSON.stringify() - JavaScript | MDN
JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함
developer.mozilla.org
https://velog.io/@raram2/serialization
시리얼라이제이션(Serialization)
데이터 시리얼라이제이션이란, 어떤 환경의 데이터 구조를 다른 환경에 전송 및 저장하기 위해 나중에 재구성할 수 있는 바이트의 포맷으로 변환하는 과정을 말합니다. 반대로, 일련의 바이트
velog.io
'JavaScript > JavaScript' 카테고리의 다른 글
[JavaScript] 실행 컨텍스트와 콜 스택 (0) | 2022.07.11 |
---|---|
[JavaScript] 자바스크립트 엔진과 런타임 (0) | 2022.07.11 |
[JavaScript] 객체 Object (0) | 2022.07.08 |
[JavaScript] 배열 메서드 정리 (0) | 2022.07.07 |
[JavaScript] net::ERR_ABORTED 404 (NOT FOUND) 에러 (0) | 2022.06.30 |