JSON은 자바스크립트(Javascript)언어에서 파생되는 데이터형식으로 자바스크립트 사용시 자연스럽게 사용하게 된다. JSON은 아래와 같은 목적으로 사용한다.
데이터의 저장
유저입력으로 부터 자료구조의 생성
설정과 데이터 확인
자바스크립트가 웹에 워낙에 널리 펴저있기 때문에, 다른 대부분의 언어들역시 JSON을 다루기 위한 패키지(혹은 라이브러리)들을 제공하고 있다.
포맷
JSON은 전체가 텍스트로 이루어지며, 중괄호로 표현되는 Key-Value 데이터 형식을 가진다. JSON 데이터는 .json 파일에 JSON 객체를 표시할 수도 있지만 프로그램 내에서 JSON 객체 혹은 문자열로 표시할 수도 있다. .json 파일로 작업할 경우 아래의 모습을 가진다.
JSON 객체처럼 보이지만 full_name의 경우 값으로 함수를 설정하고 있다. 위 자바스크립트 객체의 데이터는 도트 표기법을 사용해서 호출 할 수 있다. 만약 user.full_name을 호출하면 함수가 실행되고 user.first_name과 user.last_name을 더한 값이 출력될 것이다.
JSON 데이터 접근
JSON 데이터는 도트 표기법으로 접근 할 수 있다. 아래 sammy JSON 객체를 만들었다.
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 객체로 변환하는 예제다.
Contents
소개
- 데이터의 저장
- 유저입력으로 부터 자료구조의 생성
- 설정과 데이터 확인
자바스크립트가 웹에 워낙에 널리 펴저있기 때문에, 다른 대부분의 언어들역시 JSON을 다루기 위한 패키지(혹은 라이브러리)들을 제공하고 있다.포맷
{ "first_name" : "Sammy", "last_name" : "Shark", "online" : true }var summary = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';자바스크립트 객체
var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; } };JSON 데이터 접근
var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }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" } ] }JSON 관련 함수들
JSON.stringify()
var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"} var s = JSON.stringify(obj)JSON.parse()
<!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>참고
Recent Posts
Archive Posts
Tags