이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌22 - JavaScript - 2년 전 등록 / 10달 전 수정

JSON

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

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

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

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

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

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