Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

Contents

소개

JSON은 자바스크립트(Javascript)언어에서 파생되는 데이터형식으로 자바스크립트 사용시 자연스럽게 사용하게 된다. JSON은 아래와 같은 목적으로 사용한다.
  • 데이터의 저장
  • 유저입력으로 부터 자료구조의 생성
  • 설정과 데이터 확인
자바스크립트가 웹에 워낙에 널리 펴저있기 때문에, 다른 대부분의 언어들역시 JSON을 다루기 위한 패키지(혹은 라이브러리)들을 제공하고 있다.

포맷

JSON은 전체가 텍스트로 이루어지며, 중괄호로 표현되는 Key-Value 데이터 형식을 가진다. JSON 데이터는 .json 파일에 JSON 객체를 표시할 수도 있지만 프로그램 내에서 JSON 객체 혹은 문자열로 표시할 수도 있다. .json 파일로 작업할 경우 아래의 모습을 가진다.
{ 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}
.html 이나 .js 파일에서 코드로 표현될 경우 아래와 같이 사용한다.
var summary = {
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}
혹은 아래와 같이 문자열로 나타내는 경우도 있다.
var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';
자바스크립트는 JSON 객체를 문자열로 변환하거나 반대로 문자열을 JSON 객체로 변화하기 위한 함수들을 제공한다.

자바스크립트 객체

JSON은 다른 모든 언어에서도 사용 할 수 있지나 자바스크립트의 경우 언어차원에서 직접사용 할 수 있는 장점을 제공한다. 아래와 같이 JSON 구문내에서 자바스크립트 코드를 삽입할 수 있다.
var user = {
    first_name: "Sammy",
    last_name : "Shark",
    online    : true,
    full_name : function() {
       return this.first_name + " " + this.last_name;
    }
};
JSON 객체처럼 보이지만 full_name의 경우 값으로 함수를 설정하고 있다. 위 자바스크립트 객체의 데이터는 도트 표기법을 사용해서 호출 할 수 있다. 만약 user.full_name을 호출하면 함수가 실행되고 user.first_name과 user.last_name을 더한 값이 출력될 것이다.

JSON 데이터 접근

JSON 데이터는 도트 표기법으로 접근 할 수 있다. 아래 sammy JSON 객체를 만들었다.
var sammy = { 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}
도트 표기법을 이용해서 객체에 접근했다.
sammy.first_name
sammy.last_name
sammy.online
변수명 sammy가 앞에오고 그 뒤에 도트, 그리고 접근할 키를 설정하면 된다.

아래는 alert를 이용해서 값을 출력하는 예제다.
alert(sammy.first_name);

또한 대괄호를 이용해서 JSON 데이터에 접근 할 수도 있다.
alert(sammy["online"]);

JSON은 중첩된 배열로 사용 할 수 있는데, 이 때는 접근하려는 배열의 번호를 명시해야 한다.
var user_profile = { 
  "username" : "SammyShark",
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}
facebook에 접근하고 있다면 아래와 같이하면 된다.
alert(user_profile.social_media[1].description)

JSON 관련 함수들

JSON 문자열을 JSON 객체로 바꾸고 파싱하는 두 가지 함수를 살펴보려 한다.

JSON.stringify()

JSON.stringify는 JSON 객체를 문자열로 변환한다.

서버와 클라이언트가 통신 할 때는 양쪽 모두가 읽을 수 있는 문자열로 변환하는게 좋다. 예를 들어 클라이언트에서 JSON 객체를 문자열로 변환해서 전송하면, 서버측은 이 문자열을 다시 JSON 객체로 변환해서 읽을 수 있을 것이다.

아래는 JSON 객체 "obj"를 JSON.stringify()함수를 이용해서 문자열로 변경한 예제다.
var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}
var s = JSON.stringify(obj)

실행하면 아래와 같은 JSON 포맷의 문자열을 얻을 수 있다.

원본코드는 아래와 같다.

JSON.parse()

문자열은 서버&클라이언트간 데이터 교환에 유용하지만, 서버와 클라이언트는 다시 JSON 객체로 변환해야 한다. eval() 함수를 이용해서 텍스트를 객체로 변환 할 수 있지만 좋은 방법은 아니다. 대신 JSON.parse() 함수를 사용하자.

위에 JSON.stringify()로 변환한 문자열 "s"를 JSON 객체로 변환하는 예제다.
var obj = JSON.parse(s)

아래는 좀 더 자세한 예제다.
<!DOCTYPE html>
<html>
<body>

<p id="user"></p>

<script>
var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

var obj = JSON.parse(s);

document.getElementById("user").innerHTML =
"Name: " + obj.first_name + " " + obj.last_name + "<br>" +
"Location: " + obj.location;
</script>

</body>
</html>

참고