JSON (JavaScript Object Notation) 이란?

by

원본: An Introduction to JSON

JavaScript Object Notation의 약자인 JSON 형식은 데이터를 공유하기 위해 만들어졌습니다.

이름에서 알 수 있듯이 자바스크립트에서 파생되었지만 Python, Ruby, PHP, Java 등 다양한 언어에서 사용할 수 있습니다.

이는 읽기 쉽고 가벼우며 XML의 좋은 대안으로 훨씬 적은 문자열을 사용합니다.

이 포스트에서는 JSON 파일에서 사용할 수 있는 데이터와 이 형식의 일반 구조 및 구문에 대해 설명합니다.

JSON 구문 및 구조

JSON 파일을 독립적으로 사용할 때에는 .json 확장자를 사용하며, 다른 파일 형식(예: .html)에서 정의된 경우 문자열로 표시하거나 변수에 객체로 할당됩니다.

이 객체는 중괄호 사이에 key/value 형식으로 입력합니다. 스크립트 작성 시 .json 파일에 객체가 존재할 수도 있지만 프로그램 컨텍스트 내의 객체 또는 문자열로 존재할 수도 있습니다.

다음은 실제 객체의 예 입니다.

json 예제

위 이미지는 간단한 예제이고 실제로는 많은 줄이 될 수 있습니다.

구문 형식은 대부분 양끝에 { }를 넣고 그 안에 key/value를 지정합니다. 사용되는 대부분의 데이터는 결국 객체에 캡슐화됩니다.

key/value 쌍은 “key”: “value” 처럼 사이에 콜론을 넣어 표시합니다. 또한 각각의 쌍은 쉼표로 구분하여 나열합니다.

key는 콜론 왼쪽에 있는 값으로 따옴표로 감싸는 문자열로 지정해야 합니다.

value는 콜론의 오른쪽에 있습니다. 유효한 값은 다음 6 가지 데이터 타입 중 하나여야 합니다.

  • string
  • number
  • object
  • array
  • boolean
  • null

더 넓은 의미에서 value는 다음 섹션에서 설명할 다른 객체나 복잡한 데이터 타입으로 구성될 수도 있습니다.

각각의 데이터 타입은 고유한 유형을 유지합니다. 즉, 문자열은 따옴표로 묶고 숫자는 따옴표 없이 입력합니다.

JSON 객체는 일반적으로 읽기 쉽도록 여러 줄로 구분하여 표시하지만 다음과 같이 한 줄에 모두 작성할 수도 있습니다.

{ "first_name": "Sammy", "last_name": "Shark",  "online": true }

여러 줄에 객체를 표시하면 특히 대규모 데이터 세트 처리 시 훨씬 읽기 쉽습니다.

이 객체의 구문 자체는 요소 사이의 공백을 무시하기 때문에 가독성을 위해 key/value 사이에 공백을 넣을 수도 있습니다.

{ 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

비슷해 보이지만 JSON 객체는 자바스크립트 객체와 동일한 타입이 아닙니다.

자바스크립트는 객체 내에서 함수를 넣을 수 있지만 JSON 객체에는 value에 함수를 넣을 수 없다는 점을 명심해야 합니다.

JSON 객체의 가장 중요한 특징은 모든 언어에서 작동된다는 점으로, 프로그래밍 언어 간 데이터를 쉽게 전송할 수 있게 해줍니다.

JSON 객체의 복잡한 타입

이 객체에는 중첩된 배열 외에도 다른 객체를 넣을 수 있습니다.

중첩된 객체

다음 예제에는 4명의 사용자 각각에 대한 value가 또 다른 객체로 중첩되었습니다.


{ 
  "sammy" : {
    "username"  : "SammyShark",
    "location"  : "Indian Ocean",
    "online"    : true,
    "followers" : 987
  },
  "jesse" : {
    "username"  : "JesseOctopus",
    "location"  : "Pacific Ocean",
    "online"    : false,
    "followers" : 432
  },
  "drew" : {
    "username"  : "DrewSquid",
    "location"  : "Atlantic Ocean",
    "online"    : false,
    "followers" : 321
  },
  "jamie" : {
    "username"  : "JamieMantisShrimp",
    "location"  : "Pacific Ocean",
    "online"    : true,
    "followers" : 654
  }
}

위의 예제에서는 중괄호를 사용하여 4명의 사용자 각각에 대한 이름, 주소 등의 데이터를 가지는 중첩된 객체를 가지게 했습니다.

이렇게 객체를 중첩할 때에도 다른 value 입력과 마찬가지로 쉼표로 구분합니다.

중첩된 배열

value에 자바스크립트 배열을 사용하여 객체 내에 배열을 중첩할 수도 있습니다.

배열의 구문은 대괄호 [ ]를 사용하여 표시합니다. 배열은 순서가 지정된 컬렉션으로 다양한 데이터 타입을 가질 수 있습니다.

예를 들어 한 명의 사용자에 대한 웹 사이트와 소셜 미디어 목록을 그룹화하여 저장할 수 있습니다.

{ 
  "first_name" : "Sammy",
  "last_name" : "Shark",
  "location" : "Ocean",
  "websites" : [
    {
      "description" : "work",
      "URL" : "https://www.digitalocean.com/"
    },
    {
      "desciption" : "tutorials",
      "URL" : "https://www.digitalocean.com/community/tutorials"
    }
  ],
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

“websites” key와 “social_media” key에 각각 배열을 사용하여 Sammy의 웹사이트 링크 2개와 소셜 미디어 링크 3개를 중첩했습니다.

대괄호를 사용하면 배열이라는 것을 알 수 있습니다.

객체 내에서 중첩을 사용하면 더 복잡하고 계층적인 데이터를 구성할 수 있습니다.

JSON 객체와 XML 비교

XML(eXtensible Markup Language)은 인간과 기계 모두가 읽을 수 있는 데이터 저장 방법으로 XML 형식은 다양한 프로그래밍 언어에서 사용할 수 있습니다.

여러 면에서 XML과 JSON 객체는 유사하지만 XML이 훨씬 더 많은 텍스트를 필요로하므로 읽고 쓰기 더 힘듭니다. 또한 XML은 배열을 사용할 수 없습니다.

XML은 XML 파서로 구문을 분석해야 하지만 이 객체는 표준 함수로 구문 분석을 할 수 있습니다.

다음의 XML 형식의 예제입니다.

<users>
    <user>
        <username>SammyShark</username> <location>Indian Ocean</location>
    </user>
    <user>
        <username>JesseOctopus</username> <location>Pacific Ocean</location>
    </user>
    <user>
        <username>DrewSquir</username> <location>Atlantic Ocean</location>
    </user>
    <user>
        <username>JamieMantisShrimp</username> <location>Pacific Ocean</location>
    </user>
</users>

동일한 정보를 JSON 객체로 표시해 보겠습니다.

{
  "users": [
    {"username" : "SammyShark", "location" : "Indian Ocean"},
    {"username" : "JesseOctopus", "location" : "Pacific Ocean"},
    {"username" : "DrewSquid", "location" : "Atlantic Ocean"},
    {"username" : "JamieMantisShrimp", "location" : "Pacific Ocean"}
  ]
}

이 객체가 훨씬 더 컴팩트하며 XML 같은 종료 태그를 필요로하지 않을 뿐더러 배열까지 사용할 수도 있습니다.

정리

JSON 객체는 데이터를 공유, 저장할 수 있는 경량 데이터 타입입니다.

이 객체는 자바스크립트에서 사용하기 위한 형식이기도 하며 다양한 프로그래밍 언어에서 사용할 수 있는 구현이 많습니다.

“Introducing JSON” 사이트에서 전체 언어 지원을 볼 수 있습니다.

또한 이 객체는 개별 파일로 생성하지 않고 소스코드 내에서 생성할 수도 있습니다.

오픈 소스 도구인 Mr. Data Converter를 사용하여 스프레드시트 프로그램의 CSV 또는 탭으로 구분된 데이터를 객체로 변환할 수 있습니다.

마지막으로 다른 타입을 객체로 변환하거나 객체를 직접 생성할 때 JSONLint를 사용하여 검증할 수 있습니다. 또한 JSFiddle을 사용하여 웹 개발 컨텍스트에서 객체를 테스트할 수 있습니다.