티스토리 뷰

SW 개발/JavaScript

JavaScript에서 JSON 다루기

지단로보트 2014. 8. 26. 01:00

웹 개발의 표준이 된 JSON

JSON은 JavaScript Object Notation의 약자이다. 대부분의 IT 용어가 그러하듯 용어만 봐서는 전혀 감이 오지 않는다. JSON은 단순한 문자열에 불과하다. 이 점에 있어서는 XML과 다를 것이 없다. 하지만 Name-Value 방식의 구조로 최소한의 오버헤드로 데이터를 효율적이고 직관적으로 표현할 수 있는 장점이 있어 최근 서버-클라이언트간의 데이터 전송 포맷으로 널리 사용되고 있다. 나 또한 사내에서 개발 중인 시스템의 데이터 포맷으로 적극 활용하고 있다.(개인적으로 JSON의 철학에 매료된 나머지 도메인도 JSONObject로 정해버렸다.) JSON과 관련한 자세한 배경지식은 아래 사이트를 참고하도록 한다. 설명이 정말 잘 되어 있다.

JavaScript에서 JSON 문자열 다루기

XML보다 JSON를 써야 하는 이유는 첫째로 데이터 자체의 오버헤드가 적다는 점이고 둘째는 JSON의 Name-Value 방식의 구조가 JavaScript의 오브젝트와 동일하여 찰떡궁합의 매칭이 가능하기 때문이다. 실제로 JSON 자체가 그런 목적으로 만들어졌다. JavaScript에서 JSON을 다루는 것은 정말 간단하다. 아래 예를 살펴보자.

// JSON 문자열을 정의한다.
var json = '{"id": 1,"name": "A green door","price": 12.50,"tags": ["home", "green"]}';

// JSON 문자열을 JavaScript 오브젝트로 변환한다. 주로 원격 서버로부터의 AJAX 응답시 반환 데이터를 변환하기 위해 사용한다.
var object = JSON.parse(json);

// JavaScript 오브젝트를 JSON 문자열로 변환한다. 주로 원격 서버에 AJAX 요청시 파라메터를 전달하기 위해 사용한다.
var json = JSON.stringify(object);
  • ECMAScript 5부터는 기본적으로 JSON을 지원하기 때문에 json2.js와 같은 별도의 라이브러리를 사용할 필요가 없다. 각 브라우저의 JSON 지원 여부는 여기를 참고한다.
  • 현존하는 대부분의 브라우저가 JSON을 지원한다. 문제는 프론트엔드 개발자들의 골칫거리 IE8이다. IE8에서 JSON을 사용하려면 HTML 문서의 시작줄에 <!DOCTYPE html>을 명시해주어야 한다.

JSON 문자열 정렬하기

나는 개인적으로 사용자들의 시스템 사용 로그를 JSON 문자열로 저장하는 것을 즐기는 편이다. 오버헤드를 줄이기 위해 정렬을 하지 않고 공백을 제거하여 저장하는데 문제는 나중에 로그를 확인할 때 가독성이 떨어져서 눈으로 보기가 불편하다. 로그 뷰어를 만드는 것도 방법이지만 JSON 문자열에 대한 Pretty Print 기능을 제공하는 웹 서비스를 사용하는 것을 더 선호한다.

JSON Formatter & Validator

  • JSON Formatter & Validator는 JSON 문자열에 대한 Pretty Print 기능을 제공한다. JSON 문자열을 입력하거나 JSON 문자열을 응답하는 원격 서버의 URL을 입력하면 Pretty Print된 JSON 문자열을 출력해준다. 폴딩 기능을 제공하기 때문에 덩치가 큰 JSON 문자열을 눈으로 읽을 때 매우 편리하다.

JSON 문자열 구조 설계하기

JSON의 철학은 단순하기 때문에 앞서 설명했듯이 사용 또한 매우 쉽다. 하지만 어떤 기능을 수행하기 위해 JSON 문자열의 구조를 설계하는 일은 생각보다 많은 경험과 생각을 필요로 한다. http://json-schema.org/를 둘러보자. JSON 문자열 구조 설계를 위한 다양한 글과 샘플을 공부할 수 있다.

저작자표시 비영리 동일조건
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함