Table of Contents

JSON은 무엇인가?

  1. JSON은 무엇인가?
    • 경량의 데이타 교환 포맷이다.
      > XML과 비교한다.
    • 간단한 포맷
      > 사람들을 위해 읽고 쓰기가 쉽다.
      > 기계들을 위해 분석과 생성이 쉽다.
    • JSON은 텍스트 포맷이다.
      > 언어에 독립적으로 프로그래밍된다.
      > 프로그래머들에게 잘 알려진 C,C++,C#,Java,JavaScript,Perl,Pyton을 포함하는 C와 유사한 언어로 모여서 사용된다.
  2. XML을 넘어 왜 JSON인가?
    • on-the-wire(선을 통한) 데이타 포맷인 XML보다 가볍고 빠르다.
    • JSON 오브젝트는 XML 데이타가 타입이 없는데 비해 타입을 가진다.
      > JSON types : string, number, array, boolean
      > XML 데이타는 모두 String 이다.
    • JavaScript 코드를 위해 Native 코드포맷이다.
      > Data는 사용자의 JavaScript코드 안에서 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과 JavaScript
    • JSON은 JavaScript의 객체 문자 표기의 부분집합이다.
      > JSON은 JavaScript안에서 혼란스럽거나 야단스럽지 않게 사용될 수 있다.
  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 JavaScript 객체는 세개의 객체를 포함한 배열을 갖고있는, 각각은 "ircEvent","method","regex" 멤버들을 포함한 하나의 멤버 "bindings"를 포함하여 생성된다.
    • 멤버들은 점(.) 이나 그아래 지시자들로 회수 할수 있다.
       
      myJSONObject.bindings[0].method // "newURI"
      
  5. JavaScript 코드안에서 Text를 Object로 변환하기
     
    var myObject = eval('(' + myJSONtext + ')');
    
    • eval() 함수를 사용하여, JSON text를 JSON 객체로 변환한다.
      > eval()은 JavaScript 컴파일러에서 실행한다.
      > JSON은 JavaScript의 서브셋으로 적합하다. 컴파일러는 text를 정확하게 변환하고, 객체 구조를 만든다.
  6. 보안 & JSON Parser
     
    // Include http://www.json.org/json.js
    var myObject = myJSONtext.parseJSON();
    
    • eval()은 컴파일 할 수 있고, 어떤 JavaScript 프로그램에서도 실행된다. 그래서 보안 이슈들(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 처럼 반환된다.
    • JavaScript 코드안에서 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) {
      }
      

리소스들

  1. JSON 리소스들
    • Introducing JSON
    http://www.json.org/linkext7.gif
    • JSON in JavaScript
    http://www.json.org/js.htmllinkext7.gif
    • JSON in Java
    http://www.json.org/java/index.htmllinkext7.gif

참고문헌

d






====================================================================================================================



JSON 기초

JSON으로는 JavaScript 객체로 표현된 데이터를 한 함수에서 다른 함수로, 또는 비동기식 애플리케이션의 경우, 웹 클라이언트에서 서버 측 프로그램으로 쉽게 전달할 수 있는 스트링으로 변형할 수 있다. 문자열이 약간 이상해 보이지만 JavaScript에 의해 쉽게 인터프리팅 되고, JSON은 name/value 쌍 보다 복잡한 구조도 표현한다. 예를 들어, 단순한 키와 값 리스트 대신, 배열과 복합 객체들을 나타낼 수 있다.

JSON 예제

JSON에서는 name/value 쌍이 다음과 같이 표현된다.

{ "firstName": "Brett" } 

이는 매우 기본적인 것이고, 텍스트의 name/value 쌍 보다는 더 많은 공간을 차지한다.

firstName=Brett

하지만, JSON은 여러 name/value 쌍들을 하나로 연결할 때 진가를 발휘한다. 우선, 다음과 같이, 여러 name/value 쌍으로 데이터 레코드를 생성할 수 있다.

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

신택스의 관점에서 보면 name/value 쌍 보다 나은 점이 없어 보이지만, 이 경우, JSON은 훨씬 더 사용하기 쉬우며, 가독성도 놀랍다. 예를 들어, 위 세 개의 값들은 같은 레코드의 일부이다. 중괄호는 그 값이 같은 커넥션을 갖고 있다는 것을 표시하고 있다.

값들의 배열

값을 나타내야 할 때, JSON은 보다 읽기 쉽고, 덜 장황하다. 예를 들어, 인명부가 있다고 해보자. XML에서는, 수 많은 오프닝/클로징 태그에 둘러싸이게 되고, 전형적인 name/value 쌍을 사용한다면, 독점적인 데이터 포맷을 사용해야 하거나, person1-firstName처럼 키 네임을 수정해야 한다.

JSON에서는 다음과 같이 괄호를 사용하여 레코드를 그룹핑 할 수 있다.

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]}

이해하기도 어렵지 않다. 이 경우, people이라는 하나의 변수가 있고, 값은 세 개의 아이템을 포함하고 있는 배열이며, 각각의 레코드에는 이름, 성, 이메일 주소가 있다. 위 예제는 레코드들을 모두 투입하는 방법과, 아이템을 괄호가 있는 싱글 값으로 그룹핑 하는 방법을 설명하고 있다. 물론, 같은 신택스를 사용할 수 있지만, 여러 값들(각각 여러 레코드들을 갖고 있음)을 갖고 있다.

{ "programmers": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
 ],
"authors": [
  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
 ],
"musicians": [
  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
 ]
}

여기에서 주목해야 할 점은 각각이 다수의 값을 내포하고 있는 많은 값들을 표현할 수 있는 당신의 능력이다. 또 하나 주목해야 할 점은 레코드의 name/value 쌍들은 다른 메인 항목(programmers, authors, musicians)에 따라 변한다는 것이다. JSON은 완전히 동적이고, JSON 구조 안에서 데이터를 표현하는 방식을 바꿀 수 있다.

또 한 가지 알아두어야 할 것은 JSON 포맷 데이터로 작업할 때 제약 조건이 없다는 점이다. 따라서, 어떤 것을 표현하는 방식을 바꿀 수 있고, 심지어는 같은 데이터 구조 내에서 같은 것을 다른 방식으로 나타낼 수도 있다.


blue_rule.gif
c.gif
u_bold.gif
위로


JavaScript에서 JSON 사용하기

JSON 포맷을 다룬 후라면, JavaScript에서 이것을 사용하는 것은 간단하다. JSON은 네이티브 JavaScript 포맷이고, JavaScript 내에서 JSON 데이터와 작업하기 위해 특별한 API나 툴킷이 필요 없다.

JSON 데이터를 변수에 할당하기

예를 들어, 새로운 JavaScript 변수를 만들고, JSON 포맷 데이터 스트링을 여기에 직접 할당한다고 해보자.

var people =
  { "programmers": [
    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
   ],
  "authors": [
    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
   ],
  "musicians": [
    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
   ]
  }

복잡하지 않다. people에는 이제 JSON 포맷 데이터가 포함되어 있다. 하지만, 많은 것을 수행하지 않는다. 데이터는 여전히 유용한 포맷으로 되어있지 않다.

데이터에 액세스 하기

위의 매우 긴 스트링은 단순한 배열일 뿐이고, JavaScript 변수에 그 배열이 있다면 쉽게 액세스 할 수 있다. 사실, 그 배열을 마침표로 구분할 수 있다. 따라서, programmers 리스트의 첫 번째 엔트리의 성(last name)에 액세스 하려면, JavaScript에서 다음과 같은 코드를 사용해야 한다.

people.programmers[0].lastName;

인덱싱은 '0' 부터 시작한다. 따라서, 이것은 people 변수에 있는 데이터로 시작한다. 그리고 나서,programmers라고 하는 아이템으로 이동하고, 첫 번째 레코드([0])에 액세스 한다. 마지막으로,lastName 키의 값에 액세스 한다. 결과는 "McLaughlin"이라는 스트링 값이다.

다음은 같은 변수를 사용하는 예제들이다.

people.authors[1].genre			// Value is "fantasy"

people.musicians[3].lastName		// Undefined. This refers to the fourth entry,
 and there isn't one

people.programmers.[2].firstName	// Value is "Elliotte"

이 신택스로도, 다양한 JSON 포맷 데이터로 작업할 수 있고, 추가 JavaScript 툴킷이나 API가 필요 없다.

JSON 데이터 수정하기

위에 나타난 점과 괄호 표기법을 사용하여 데이터에 액세스 하듯, 같은 방식으로 데이터를 쉽게 수정할 수 있다.

people.musicians[1].lastName = "Rachmaninov";

문자열에서 JavaScript 객체로 변환했다면 변수에 있는 데이터를 수정하면 된다.

문자열로 변환하기

물론, 모든 데이터 수정은 텍스트 포맷으로 쉽게 변환할 수 없다면 가치가 없다. 이것 역시 JavaScript에서는 간단하다.

String newJSONtext = people.toJSONString();

이것이 다이다. 원하는 곳 어디에서나 사용할 수 있는 텍스트 문자열이 생겼으니, 이것을 Ajax 애플리케이션에서 요청 스트링으로 사용할 수 있다.

훨씬 더 중요한 것은, 어떤 JavaScript 객체라도 JSON 텍스트로 변환할 수 있다. 원래 JSON 포맷 스트링으로 할당된 변수로만 작업할 필요가 없다. myObject라는 객체를 변형하려면, 같은 종류의 명령어를 실행하면 된다.

String myObjectInJSON = myObject.toJSONString();

이것이 JSON과 다른 데이터 포맷과의 가장 큰 차이이자, 이 시리즈를 통해 탐구할 주제이다. JSON에서는, 단순한 함수를 호출하면, 포맷팅 되어 사용하기에 알맞은 데이터를 얻을 수 있다. 다른 데이터 포맷의 경우, 미가공 데이터와 포맷 데이터간 변환은 여러분의 몫이다. Document Object Model 같이 데이터 구조를 텍스트로 변환하는 함수를 제공하는 API를 사용할 때도, 네이티브 JavaScript 객체와 신택스 보다는, API를 배우고 그 API의 객체를 알아야 한다.

여러분이 많은 JavaScript 객체들과 작업할 때, JSON은 데이터를 서버 측 프로그램으로 요청을 보내기에 알맞은 포맷으로 쉽게 변환할 수 있다.


----------------------------------------------------------------------------------------------------------------------


본 시리즈에서는 데이터 포맷에 대한 내용을 많은 부분을 할애했다. 여러분의 비동기식 애플리케이션이 거의 비동기식이기 때문이다. 모든 종류의 데이터를 송수신 할 수 있는 다양한 툴과 기술이 있다면, 각 데이터 유형에 가장 잘 맞는 방식으로 수행하면 되고, Ajax 전문가의 반열에도 오를 것이다. 여기에 JSON을 추가하면, JavaScript에서 보다 복잡한 데이터 구조도 능숙히 다룰 준비가 된다.

다음 기술자료에서는 단순히 데이터를 보내는 것 이상으로, 서버 측 프로그램이 JSON 포맷 데이터를 수신하여 처리하는 부분을 설명할 것이다. 또한, 서버 측 프로그램이 스크립트와 서버 측 컴포넌트에 JSON 포맷으로 된 데이터를 보내는 방법도 설명할 것이다. XML, 평이한 텍스트, JSON 요청과 응답을 혼합하는 부분에 대해서도 설명할 것이다. 목표는 어떤 환경에서도 유연하게 이러한 툴들을 능숙히 조작할 수 있도록 하는 것이다.




-JSON 동적 선택하기!!

var news_list_json = {

"mk": [

"http://file.mk.co.kr/news/rss/rss_40300001.xml",

"http://file.mk.co.kr/news/rss/rss_30100041.xml",

"http://file.mk.co.kr/news/rss/rss_30200030.xml",

"http://file.mk.co.kr/news/rss/rss_50400012.xml",

"http://file.mk.co.kr/news/rss/rss_30300018.xml",

"http://file.mk.co.kr/news/rss/rss_50200011.xml",

"http://file.mk.co.kr/news/rss/rss_50300009.xml",

"http://file.mk.co.kr/news/rss/rss_30000023.xml",

"http://file.mk.co.kr/news/rss/rss_50600001.xml"

],

"조선": {

"헤드라인": "rss주소"

}

};


function setAjaxNews(name, index){

var rss = news_list_json.mk[index];

var rss = news_list_json[name][index];

//둘다 같은출력

}


var name = 'mk';

var index = 0;

setAjaxNews(name, index);