게시글

강좌22 - JavaScript - 5년 전 등록 / 3년 전 수정

JSON

이번 시간에는 잠깐 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'

객체는 원래 서로 참조를 하기 때문에 하나의 값을 바꾸면 다른 것들의 값도 따라서 바뀌는데요. 이런 동작 대신, 진짜 복사를 가능하게 만들어줍니다.

다음 시간에는 이벤트 리스너에 대해서 알아보겠습니다!

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.

댓글

3개의 댓글이 있습니다.
8달 전
👍 감사합니다.
3년 전
객체복사 방법이 저런것도 있었군요!! 좋은거 하나 배워갑니다 감사합니다
4년 전
예제가 더 있었으면 좋겠습니다.
4년 전
넹~ 보충할게요