본문 바로가기
JavaScript

[JavaScript] - JSON이란

by nam_ji 2023. 11. 8.

JSON(JavaScript Object Notation) 이란

JSON 정의

  1. JavaScript Object Notation이라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 Data 교환 형식입니다.
  2. JavaScript에서 객체를 만들 때 사용하는 표현식을 의미합니다.
  3. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용합니다.
  4. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐입니다.

JSON 특징

  1. 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용됩니다.
  2. 자바스크립트 객체 표기법과 매우 유사합니다.
  3. 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점이 있습니다.
  4. JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌습니다.
  5. 자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식일 뿐입니다.
  6. 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있습니다.
  7. 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공합니다.

XML & JSON

  • 데이터를 나타낼 수 있는 방식은 여러가지가 있지만, 대표적인 것이 XML이고, 이후 가장 많이 사용되는 것이 아마도 JSON 방식일 것입니다.
    1. XML
      • 데이터 값 양쪽으로 태그가 있습니다.
    2. JSON
      • 태그로 표현하기 보다는 중괄호 {} 같은 형식으로 하고, 값을 쉼표로 나열하기에 그 표현이 간단합니다.

JSON 문법

{
  "employees": [
    {
      "name": "ja",
      "lastName": "va"
    },
    {
      "name": "java",
      "lastName": "script"
    },
    {
      "name": "html",
      "lastName": "css"
    } 
  ]
}
  1. JSON 형식은 자바스크립트 객체와 마찬가지로 key / value가 존재할 수 있으며 key 값이나 문자열은 항상 쌍따옴표를 이용하여 표기해야 합니다.
  2. 객체, 배열 등의 표기를 사용할 수 있습니다.
  3. 일반 자바스크립트의 객체처럼 원하는 만큼 중첩시켜서 사용할 수 있습니다.
  4. JSON 형식에는 null, number, string, object, boolean을 사용할 수 있습니다.

JSON 형식

  1. name-value 형식의 쌍
    • 여러가지 언어들에서 object 등으로 실현되었습니다.
    • { string key : string value }
    • {
        "firstName": "java",
        "lastName": "script",
        "email": "html@css.com"
      }
  2. 값들의 순서화 된 리스트 형식
    • 여러가지 언어들에서 배열 (Array) 등으로 실현되었습니다.
    • [ value1, value2, ...]
    • {
        "firstName": "java",
        "lastName": "spring",
        "email": "springframework@springboot.com",
        "hobby": ["html","css"]
      }

JSON의 문제점

  • AJAX는 단순히 데이터만이 아니라 JavaScript 그 자체도 전달할 수 있습니다. 이 말은 JSON 데이터라고 해서 받았는데 단순 데이터가 아니라 JavaScript가 될 수도 있고, 그게 실행 될 수 있다는 것입니다.
    (데이터인줄 알고 받았는데 악성 스크립트가 될 수 있습니다.)
    위와 같은 이유로 받은 내용에서 순수하게 데이터만 추출하기 위한 JSON 관련 라이브러리를 따로 사용하기도 합니다.

JSON이 가져올 수 있는 데이터

  • JSON으로 가져올 수 있는 데이터는 해당 자바스크립트가 로드된 서버의 데이터에 한정됩니다.
    JSON은 단순히 데이터 포맷일 뿐이며, 그 데이터를 불러오기 위해서 MXLHttpRequest()라는 JavaScript 함수를 사용해야 하는데 이 함수가 동일 서버에 대한 것만 지원하기 때문입니다.
    (JSONP 또는 프락시 역할을 하는 서버쪽 Script 파일로 가능하게도 할 수 있습니다.)

JSON 형식 텍스트를 JavaScript Object로 변환하기

  • JSON.parse (JSON 형식의 문자열) : JSON 형식의 텍스트를 자바스크립트 객체로 변환합니다.
  • JSON.stringify (JSON 형식의 문자열로 변환할 값) : 자바스크립트 객체를 JSON 텍스트로 변환합니다.
  • var jsonText = '{ "name": "Java", "lastName": "script" }';  // JSON 형식의 문자열
    var realObject = JSON.parse(jsonText);
    var jsonText2 = JSON.stringify(realObject);
    
    console.log(realObject);
    console.log(jsonText2);