ㅤㅤㅤ

JSON 은 무엇인가? 개요 알아보기 본문

プログラミング/JavaScript JQuery

JSON 은 무엇인가? 개요 알아보기

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ 2017. 6. 23. 13:03

is Data.

JSON 은 무엇인가? 개요 알아보기

Posted in script by is Data. 현c

JSON(Javascript Object Notation)

 

JSON 이란?

JSON은 경량화 되어있는 하나의 데이터교환 형식이다.

서로 다른 언어들간에 데이터를 주고받을 수 있도록 (보다 편리하게)만들어진 텍스트 기반의 형식이다. 우리가 잘 알고 있는 XML(eXtensible Markup Language)도 서로 다른 언어들간의 데이터 교환, 사람이 볼 수 있는 정보 표기, 쉽구 단순한 구성 등을 목표로 만들어진 데이터 교환방식 중의 하나인데 이보다 더 가볍게 만들어진 것이 JSON 표기방식이다.

 

JSON은 프로그래밍 언어가 아니다.

JSON은 이곳 저곳 어느곳에서든 사용되고 있다. 하지만 JSON은 프로그래밍 언어가 아니라 그저 단순히 데이터 표기방법 중의 하나이다. XML 보다 기능이 적고 가볍기 때문에 파싱도 빠르고 용이하며 간단한 구조로 인해 클라이언트/서버 어디서든 쉽게 사용가능하다.

 

JSON의 구조

기본적으로 'name/value' 형태의 구조를 가지고 있다.

{object}

name(string):value

[array]

 

그냥 이게 다다.

  • object 는 중괄호를 이용해서 감싸고 있다. '{}'
  • name은 string 으로 되어 있고 name 에 한 쌍으로 콜론 ':' 을 두고 value 가 온다.
  • value는 큰따옴표안에 string, number ,true ,false , null, object ,array 이 올수 있다.

더 자세한 내용을 원한다면,

 

JSON 공식 사이트 둘러보기 - 무려 한글도 지원한다.

http://json.org/json-ko.html

http://ko.wikipedia.org/wiki/JSON

 

정말 심플한 설명과 데이터 표기방식의 구조를 도식으로 설명하고 있다.

별거 없는만큼 쉽고 간단하다.

 

 

JSON 구조 어떻게 생겼을까?

JSON 예제

{
    "member": [
        {
            "id": "hyunc87",
            "blog": "tistory",
            "from": "korea",
            "memo": "HelloWorld"
        },
        {
            "id": "abcd",
            "blog": "tistory.com",
            "from": "korea",
            "memo": "HelloWorld2"
        }
    ]
}

가장 쉽고 심플한 JSON 구조를 만들어 보았다.

 

굳이 설명하자면,

member 라는 name에 value로 배열이 들어가 있다. 그 배열안에는 각 object가 두개 나열되어 있는데 name:value 로 각각 string 값이 들어가 있다.

 

Javascript 내에서 위의 JSON 데이터를 읽는 방법을 예제로 알아보자.

 <!DOCTYPE html>
 <HTML>
  <HEAD>
   <TITLE> JSON Example  </TITLE>
  </HEAD>

  <BODY onload="jsonParsing()">
	 <span id='a'> </span> <br>
	 <span id='b'> </span>
  </BODY>

  <SCRIPT type="text/javascript">
	function jsonParsing() {
		var jsonText = '{"member":[{"id":"hyunc87","blog":"tistory","from":"korea","memo":"HelloWorld"},{"id":"abcd","blog":"tistory.com","from":"korea","memo":"HelloWorld2"}]}';
		var o = JSON.parse(jsonText);

		document.getElementById('a').innerHTML = o.member[0].id + '.' + o.member[0].blog;
		document.getElementById('b').innerHTML = o.member[1].id + '.' + o.member[0].blog;
	}		
  </SCRIPT>

 </HTML>

JSON.parse 를 이용해서 텍스트를  JSON object 로 변환하여 사용하였다.

결과는 다음과 같다.

hyunc87.tistory
abcd.tistory

 

JSON object 를 다시 JSON text 로 변환하려면?

console.log(JSON.stringify(o));

결과

{"member":[{"id":"hyunc87","blog":"tistory","from":"korea","memo":"HelloWorld"},{"id":"abcd","blog":"tistory.com","from":"korea","memo":"HelloWorld2"}]}

 

 

 


JSON이란?

  1. JSON은 무엇인가?
    • 경량의 데이타 교환 포맷이다.
      > XML과 비교한다.
    • 간단한 포맷
      > 사람들을 위해 읽고 쓰기가 쉽다.
      > 기계들을 위해 분석과 생성이 쉽다.
    • JSON은 텍스트 포맷이다.
      > 언어에 독립적으로 프로그래밍된다.
      > 프로그래머들에게 잘 알려진 C,C++,C#,Java,xxJavaScript,Perl,Pyton을 포함하는 C와 유사한 언어로 모여서 사용된다.
  2. XML을 넘어 왜 JSON인가?
    • on-the-wire(선을 통한) 데이타 포맷인 XML보다 가볍고 빠르다.
    • JSON 오브젝트는 XML 데이타가 타입이 없는데 비해 타입을 가진다.
      > JSON types : string, number, array, boolean
      > XML 데이타는 모두 String 이다.
    • xxJavaScript 코드를 위해 Native 코드포맷이다.
      > Data는 사용자의 xxJavaScript코드 안에서 JSON 객체에 접근이 쉽다.
      XML 데이타가 해석과 장황한 DOM API를 통해 변수에 접근하는 것을 필요로 하는데 비해 
      > 회수한 값들은 사용자의 자바스크립트 안의 객체속성에서 읽기가 쉽다.
  3. JSON은 어디에서 사용되는가?
    • 구성정보를 나타낸다.
    • 통신 프로토콜을 실행한다.

JSON Object

  1. JSON 구조
    • name/value 쌍으로 구성된다.
      > 여러가지의 언어들에서 object, record, struct, dictionary, hashtable, 키를 가지는 리스트, 배열집합 처럼 얻어진다.
    • 값들이 리스트는 순서가 있다.
      > 대부분의 언어들에서 array, vector, list, sequence 처럼 얻어진다.
    • JSON은 대부분의 지금의 언어를 통해 일반적인 데이타구조들이 지원된다.
  2. JSON Object 표기법
    • JSON Object는 name/value 쌍의 set은 순서가 없다.
    • JSON Object는 { 로 시작하고 } 로 끝난다.
    • 각각의 이름은 : 와 ,로 구분된 name/value 쌍의 형식을 따른다.
  3. JSON과 xxJavaScript
    • JSON은 xxJavaScript의 객체 문자 표기의 부분집합이다.
      > JSON은 xxJavaScript안에서 혼란스럽거나 야단스럽지 않게 사용될 수 있다.
  4. JSON Object 예제
     
var myJSONObject = {"bindings": [
    {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
    {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
    {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
  ]
};
    • 위의 예에서, JSON xxJavaScript 객체는 세개의 객체를 포함한 배열을 갖고있는, 각각은 "ircEvent","method","regex" 멤버들을 포함한 하나의 멤버 "bindings"를 포함하여 생성된다.
    • 멤버들은 점(.) 이나 그아래 지시자들로 회수 할수 있다.
       
myJSONObject.bindings[0].method // "newURI"
  5. xxJavaScript 코드안에서 Text를 Object로 변환하기
     
var myObject = eval!('(' + myJSONtext + ')');
    • eval!() 함수를 사용하여, JSON text를 JSON 객체로 변환한다.
      > eval!()은 xxJavaScript 컴파일러에서 실행한다.
      > JSON은 xxJavaScript의 서브셋으로 적합하다. 컴파일러는 text를 정확하게 변환하고, 객체 구조를 만든다.
  6. 보안 & JSON Parser
     
// Include http://www.json.org/json.js
var myObject = myJSONtext.parseJSON();
    • eval!()은 컴파일 할 수 있고, 어떤 xxJavaScript 프로그램에서도 실행된다. 그래서 보안 이슈들(cross-site scripting)을 가질 수 있다.
      > 소스를 신뢰할 수 있을때, eval!()을 사용해라.
    • 보안이 염려될 때 - 소스를 신뢰할 수 없을때 - JSON parser를 사용하는게 낫다.
      > JSON parser는 JSON text를 승인할 수 있다. 그래서 좀더 안전하다.
  7. Object를 Text로 변환하기
     
var myJSONText = myObject.toJSONString();
    • 사용자는 JSON 객체를 JSON text로 변환할 수 있다.
    • JSON은 주기적 데이타 구조를 지원하지 않는다.

      > Do not give cyclical structures to the JSON stringifier
      > 주기적 구조들을 JSON stringfier로 줄수 없다

Java 안에서의 JSON

  1. 자바 개발자를 위한 JSON Tools
    • Parser
      > JSON text 파일들을 해석하고, 그들을 자바 모델로 변환한다.
    • Renderer
      > 자바를 text로 표현하게 한다.
    • Serializer
      > 알기쉬운 POJO clusters를 JSON 표현으로 나열한다.
    • Validator
      > JSON 스키마를 사용하여 JSON 파일의 내용을 유효한지 체크한다.
  2. JSONObject 자바 클래스
    • JSONObject의 name/value 쌍의 집합은 순서가 없다.
    • put 메소드는 객체로 name/value쌍을 add 한다.
    • text들은 JSON syntax rules을 정확히 따른 toString 메소드에 의해 만들어진다.
       
myString = new JSONObject().put("JSON", "Hello, World!").toString();
// myString is {"JSON": "Hello, World"}

클라이언트와 서버사이드 양쪽에서 JSON 데이타를 주고 받는 방법

  1. 서버사이드에서 JSON 데이타를 생성하고 보내는 방법
    • JSONObject 자바 객체를 생성한다.
    • put 메소드를 사용하여 name/value 쌍을 add한다.
    • toString 메소드를 사용하여 String 타입으로 변환한다.
      그리고 "text/xml" 또는 "text/plain" 처럼 content-type과 함께 클라이언트로 보낸다.
       
myString = new JSONObject().put("JSON",toString();
// myString is {"JSON": "Hello, World"}
  2. 클라이언트 사이드에서 JSON 데이타를 받는 방법
    • JSON 데이타는 String 처럼 반환된다.
    • xxJavaScript 코드안에서 JSON 객체를 만들수 있게 eval!()을 호출한다.
      > var JSONdata = eval!(req.response.Text);
    • 사용자는 한번 JSON 객체를 가질수 있고, 객체의 속성들에 접근하기 위해 . 을 사용할 수 있다.
       
var name = JSONdata.name;
var address = JSONdata.addresses[3];
var streetname = JSONdata.addresses[3].street;
    • 클라이언트 사이드에서 JSON 데이타를 생성하고 보내는 방법
    • JSON 자바스크립트 객체를 생성한다.
    • XMLHttpRequest객체의 open 메소드 안에 "POST" HTTO 메소드를 사용한다.
    • XMLHttpRequest객체의 send 메소드안에서 JSON 자바스크립트 객체를 패스한다.
       
var carAsJSON = JSON.stringify(car);
var url = "JSONExample?timeStamp=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.[안내]태그제한으로등록되지않습니다-onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.send(carAsJSON);
  3. 서버사이드에서 JSON 데이타를 받는 방법
    • String 타입처럼 JSON데이타를 읽는다.
    • string으로부터 JSONObject 자바객체를 생성한다.
       
String json = readJSONStringFromRequestBody(request);
//Use the JSON-Java binding library to create a JSON object in Java
JSONObject jsonObject = null;
try {
jsonObject = new JSONObject(json);
}
catch(ParseException pe) {
}



json은 JavaScript Object Notation의 약자입니다. json을 사용하는 이유는 데이터를 전송하는데 최소한에 데이터를 전송하기위함입니다. 그리고 자바스크립트만 사용하는 개념이 아니라 json은 독립적으로 다양한 언어에 사용됩니다. 이유는 사용하기 간단하고 사람이 읽기쉽습니다.

var obj = {
    name : 'kim',
    id:'blog',
    number:2319
};

기본적인 자바스크립트에 객체선언 형식입니다. 

json으로 나타낸다면

var obj_json={
    "name":'kim',
    "id":'blog',
    "number":2319
};

변수에 "를 붙이면 됩니다. json은 객체 변수 배열 를 사용하고 함수를 사용하지않습니다.

json 자세히 알아보기


'プログラミング > JavaScript JQuery' 카테고리의 다른 글

JavaScript에서 json을 Parse하는 방식입니다.  (0) 2017.06.27
JavaScript에서 json을 생성 하는 방식입니다.  (0) 2017.06.27
JSON 튜토리얼  (0) 2017.06.27
자바스크립트 셀렉트박스 날짜 선택!  (0) 2017.06.23
JQuery를 이용한 달력 datepicker  (1) 2017.06.22
공유하기 링크
'プログラミング/JavaScript JQuery' Related Articles more
Comments