코드와 데이터를 섞어서 보관하는 것은 좋지 않다.
파일 / 데이타베이스 / 백엔드서비스 등에 데이터를 저장해서 가져오는 것이 좋다.
웹 페이지인 클라이언트와 서버 사이에 어떻게 데이타를 주고받을 것인지 설정한 통신규약을 HTTP(Hypertext Transfer Protocol)라고 한다. 이 때 주고 받을 수 있는 데이타(Hypertext link, 이미지 등)의 타입은 XML, JSON 등 다양하다.
웹 페이지(클라이언트)와 서버 사이에 동적으로 데이타를 주고받을 수 있는 기술은 AJAX(Asynchronous JavaScript and XML)라고 하는데, 대표적인 오브젝트로 브라우저에서 제공하는 XHR(XMLHttpRequest)이 있다. 브라우저의 XHR 오브젝트나, 최근에 브라우저에 추가된 fetch() API를 이용하면 브라우저와 서버 간 간편하게 데이타를 주고받을 수 있다. 하지만 fetch()는 아직 인터넷 브라우저에서 동작하지 않는다.
XML을 사용하면 불필요한 태그가 많이 들어가고, 가독성이 안 좋아지며 파일 사이즈가 커지므로 요즘에는 JSON 타입 데이타를 많이 주고받는다.
JSON: JavaScript Object Notation
Object { key: value }
(프로그래밍 언어나 프레임워크에 상관 없이 JSON 데이터를 쓸 수 있다!)
- Serialize(Obj -> JSON str)
JSON.stringify(obj)
let json = JSON.stringify({'apple', 'banana'}); //["apple", "banana"] (JSON의 규격사항: "")
**Object 안의 Symbol이나 함수는 JSON 데이터 타입으로 변환되지 않는다
Object 안의 일부만 JSON 데이터 타입으로 stringify 시킬 수 있다.
let obj = {
name: 'rabbit',
color: 'pink',
jump: () => {}
}
let json = JSON.stringify(obj, ['name', color']);
JavaScript object를 JSON 데이터로 stringify 하면서, 각 데이터마다 돌아가며 콜백함수를 부를 수도 있다.
let json = JSON.stringify(obj, (key, value) => {
console.log(key: ${key}, value: ${value});
});
- deserialize(JSON str -> Obj)
JSON.parse(json)
let obj = JSON.parse(json);
JSON: JavaScript Object Notation
자바스크립트 Object {key: value}와 유사하게, JSON도 {key: value}가 있다. 그래서 JSON을 JavaScript Object Notation이라고 부르는 것이다.
아래는 data 폴더 안의 data.JSON이라는 파일 안에 items라는 오브젝트( {key: value} 포맷)와, 그 안에 item 오브젝트( {key: value} 포맷)들이 담긴 배열의 예시이다.
{
"items": [
{
"type": "tshirt",
"gender": "female",
"size": "large",
"color": "pink",
"Image": "../img/pink_t.png"
},
{
"type": "tshirt",
"gender": "female",
"size": "large",
"color": "pink",
"Image": "../img/pink_t.png"
},
]
}