이번 시간에는 잠깐 JSON에 대해서 알아보겠습니다. JSON(JavaScript Object Notation)은 자바스크립트 문법을 빌린 데이터 교환 형식입니다. 역시나 무슨 말인지 모르겠죠?
{
"title": "Zero Cho",
"description": "Zero Cho's HomePage",
"owner": "Zero Cho",
"createdAt": "2016-04-05",
"keyword": ["javascript", "nodejs", "mongodb", "react", "meteor"],
"memberCount": 2,
"private": false,
"meta": {
"googleAnalytics": true
}
}위의 코드는 JSON으로 제 홈페이지에 대한 정보를 표현해본 겁니다. 그냥 객체 아니냐고요? 예, 맞습니다. 하나의 객체를 사용해서 데이터를 표현했습니다. 바로 이게 JSON입니다. 별 거 없죠? JSON은 간단해서 자바스크립트를 제외한 다른 언어에도 많이 쓰입니다. 원래 이 목적으로 쓰이던 XML보다 코드 양이 적거든요.
위의 코드를 다시 한 번 보세요. 그냥 일반 자바스크립트처럼 사용하면 됩니다. 문자열도 되고, 숫자, 불린, 배열, 객체까지 다 허용됩니다. 다만, 함수는 들어가면 안 됩니다. 한 가지 일반 객체와 다른 점은 작은따옴표 대신 큰따옴표로 감싸져야 한다는 겁니다. 또한 키(Key)도 반드시 쌍따옴표로 감싸져야 합니다. 일반 객체에서는 키를 따옴표 없이 쓸 수 있지만, JSON은 다릅니다.
다음 실습에서는 JSON을 이용해서 데이터를 활용해보죠. 원래는 데이터베이스가 필요하지만, JSON 문법을 사용해서 가짜 데이터를 만들어 테스트할 겁니다.
자바스크립트는 JSON을 활용할 수 있게 JSON 객체를 제공합니다. stringify와 parse 두 메소드가 있습니다.
var example = {
"stringifyMe": "please",
"andParseMe": "thankYou"
};
var string = JSON.stringify(example); // '{"stringifyMe":"please","andParseMe":"thankYou"}'
var parsed = JSON.parse(string); // 원상태로JSON을 문자열로 만들었다가, 다시 원상태로 돌려놓는 코드입니다. 그냥 쓰면 될 걸 왜 굳이 문자열로 만드냐고요? JSON 데이터를 서버를 통해서 전송할 때, 객체를 이해하지 못하는 서버가 있습니다. 그러한 서버를 위해서 친절하게 문자열로 바꿔주는거죠(stringify). 그리고 서버에서 돌려받을 때 만약 문자열이 왔다면 그걸 다시 JSON 객체로 바꿔줘야 하고요(parse).
주의할 점은 JSON.parse를 할 때 인자가 undefined나 객체나 JSON 형태가 아닌 문자열이면 안 됩니다. 만약 이와 같은 인자가 들어간다면 Uncaught SyntaxError: Unexpected token 에러가 뜨게 됩니다.
또한 JSON.stringify와 JSON.parse를 한 번에 사용하면 객체를 복사할 수 있습니다. 참조가 아니라 복사를요!
var obj = { test: 'yes' };
var obj2 = JSON.parse(JSON.stringify(obj)); // { test: 'yes' }
obj2.test = 'no';
obj.test; // 'yes'객체는 원래 서로 참조를 하기 때문에 하나의 값을 바꾸면 다른 것들의 값도 따라서 바뀌는데요. 이런 동작 대신, 진짜 복사를 가능하게 만들어줍니다.
다음 시간에는 이벤트 리스너에 대해서 알아보겠습니다!
neue zeal
