웹브라우저 JavaScript

JSON

JSON이란?

JSON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다. 이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. 이런 이유로 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용된다. JSON에 대한 자세한 내용은 아래 JSON의 공식홈페이지를 참조한다. 

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

JSON API

ECMAscript 5에는 JSON을 공식적으로 지원하는 API가 포함되었다. 

JSON.parse()

인자로 전달된 문사열을 자바스크립트의 데이터로 변환한다.

JSON.stringify()

인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다.

Ajax와 JSON

JSON의 진가는 서버와 통신을 할 때 드러난다. Ajax 수업의 내용을 조금 개조해서 타임라인의 항목을 리스트로 표현하는 에플리케이션을 만들어보자.

우선 서버 쪽에서는 타임라인의 리스트를 콤마로 구분해서 전달한다.

time.php

<?php
$timezones = ["Asia/Seoul", "America/New_York"];
echo implode(',', $timezones);
?>

결과

Asia/Seoul,America/New_York

클라이언트 측에서는 이를 받아서 처리한다.

demo2.html

<p id="timezones"></p>
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event){
	var xhr = new XMLHttpRequest();
	xhr.open('GET', './time.php');
	xhr.onreadystatechange = function(){
		if(xhr.readyState === 4 && xhr.status === 200){
			var _tzs = xhr.responseText;
			var tzs = _tzs.split(',');
			var _str = '';
			for(var i = 0; i< tzs.length; i++){
				_str += '<li>'+tzs[i]+'</li>';
			}
			_str = '<ul>'+_str+'</ul>';
			document.querySelector('#timezones').innerHTML = _str;
		}
	}
	xhr.send();	
});	
</script>

주목해야 할 부분은 아래와 같다.

var _tzs = xhr.responseText;
var tzs = _tzs.split(',');
var _str = '';

메소드 split는 인자의 값을 기준으로 문자를 잘라서 배열로 만든다. 서버에서 전송한 Asia/Seoul,America/New_York를 split(',')하면 배열 ['Aasia/Seoul','America/New_York']가 만들어진다.

PHP의 배열을 클라이언트로 전송하기 위해서 콤마로 구분된 문자열을 만들었다. 자바스크립트에서는 이를 받아서 콤마를 구분자로 다시 배열로 만들었다. 

만약 PHP의 배열을 그대로 자바스크립트에서 사용할 수 있다면? 반대로 자바스크립트의 배열을 그대로 PHP에서 사용할 수 있다면 얼마나 편리할까? 이 때 사용하는 것이 JSON이다. 

위의 예제를 JSON화시켜보자.

time2.php

<?php
$timezones = ["Asia/Seoul", "America/New_York"];
header('Content-Type: application/json');
echo json_encode($timezones);
?>

json_encode는 PHP의 데이터를 JSON 형식으로 전환해주는 PHP의 내장함수다.

결과

["Asia\/Seoul","America\/New_York"]

이를 처리하는 JavaScript 코드를 보자.

<p id="timezones"></p>
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event){
	var xhr = new XMLHttpRequest();
	xhr.open('GET', './time2.php');
	xhr.onreadystatechange = function(){
		if(xhr.readyState === 4 && xhr.status === 200){
			var _tzs = xhr.responseText;
			var tzs = JSON.parse(_tzs);
			var _str = '';
			for(var i = 0; i< tzs.length; i++){
				_str += '<li>'+tzs[i]+'</li>';
			}
			_str = '<ul>'+_str+'</ul>';
			document.querySelector('#timezones').innerHTML = _str;
		}
	}
	xhr.send();	
});	
</script>	

아래 코드를 통해서 서버에서 전송한 JSON 데이터를 JavaScript의 배열로 만들수 있었다.

var tzs = JSON.parse(_tzs);

서버로 데이터 전송

서버로 JSON 데이터를 전송하는 것도 가능하다. 아래 예제를 참고하자.

demo4.html

<p>time : <span id="time"></span></p>
<select id="timezone">
	<option value="Asia/Seoul">asia/seoul</option>
	<option value="America/New_York">America/New_York</option>
</select>
<select id="format">
	<option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
	<option value="Y-m-d">Y-m-d</option>
</select>
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event){
	var xhr = new XMLHttpRequest();
	xhr.open('POST', './time3.php');
	xhr.onreadystatechange = function(){
		document.querySelector('#time').innerHTML = xhr.responseText;
	}
	var data = new Object();
	data.timezone = document.getElementById('timezone').value;
	data.format = document.getElementById('format').value;
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.send(JSON.stringify(data));	
});
</script>

time3.php

<?php
$data = json_decode(file_get_contents('php://input'), true);
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($data['timezone']));
echo $d1->format($data['format']);
?>

 

댓글

댓글 본문
  1. goldkiwiijjang
    XML (eXtensible Markup Language)
    XHR (XmlHttpRequest)
    JSON (JavaScript Object Notation)
    AJAX (Asychoronous Javascript And XML)

    .split 메소드 - 인자의 값을 기준으로 문자를 잘라서 배열로 만듦
    ex) Asia/Seoul,America/New_York를 split(',')하면
    배열 ['Aasia/Seoul','America/New_York']

    JSON.parse() - 자바스크립트의 객체(배열)로 만들어줌
    JSON.stringify() - 객체를 JSON 형식에 맞는 문자열로 만들어줌
  2. 드림보이
    2022.01.05. 네트워크 통신 - JSON 파트 수강완료
  3. pmxsg
    2021.12.23. 수강
  4. labis98
    20210915 좋은 강의 감사합니다.
  5. gf0308
    감사합니다 json에 대해 제대로 보고 갈 수 있었습니다
  6. 정승옥
    완료
  7. 한강
    JSON 일종의 통신 규약 같은 느낌이네요.
    오늘도 감사합니다~~^^!
    200717
  8. 준바이
    객체나 배열과 같은 자료구조를 순회할 때 쓰는 for문입니다.
    for( var index in array ) {
    // 배열을 탐색합니다. 이때 index에는 0 부터 순서대로 정수 값이 입력 됩니다.
    }

    for(var obj in objs){
    // 객체를 탐색합니다. 이때 obj에는 객체에서 선언한 key 값 들이 순서대로 배정됩니다.
    }

    web n 강의의 자바스크립트나 자바스크립트 문법 강좌 듣는 걸 추천합니다.
    대화보기
    • 준바이
      저도 많이 어려워서 공감이 가네요. 저는 한 3번 정도 다시 보고 결국 이해하고 넘어갑니다 지금
      대화보기
      • Coder가 되고싶다
        이게 무슨 뜻인가요?

        for (var name in infoobj) {
        console.log(name, infoobj[name]);
        ]

        for문이 이렇게 생긴건 처음보는데, 이해가 잘 안되네요.
      • 한지혁
        영상강의에는 서버로 전송하기 부분이 빠졌네요..
      • 굼벵이
        완료
      • 광주토박이
        초보자 입장으로 조금 어려워서 다음에 다시 봐야겠어요. 항상 좋은 글들 감사합니다.
      • ㅡ ㆍㅡ
        처음엔 이해 안갔는데, json을 통한 통신이 일종의 정보전달의 규약(형식)으로서, 다른 언어, 다른 네트워크 간 dto역할을 하는거나, 간편한 사용법이나, 이래저래 쓸모가 많다고 느끼네요.
        프로그래밍 공부라는게, 아무리 봐도 몰랐다가, 어느순간 너무 쉽고 재밌게 느껴질때도 있는게 신기하네요.
        특히 재밌는건, json을 이용해서 정보를 넘겨주면 서버쪽 처리 영역을 클라이언트로 분산하거나, 반대로도 가능.
        Json너무좋음.
      • polo
        주제넘은 사견일지 모르겠으나, 이번 강의가 이해안되시는 것은 너무 당연한 일입니다.
        강의를 다시 한번 들으시면서 핀스님이 어디서 부터 막히는지부터 파악하시고, 그 부분을 먼저 이해할수 있도록 노력해보시는 것이 어떨까요? '서브라임 텍스트'라는 에디터의 사용성이 궁금하시다면 "생활코딩"에서 마련한 [개발도구]토픽에 보시면 '서브라임 텍스트'에 관한 사용소개서를 참고해보세요. '서브라임 텍스트'에 언더라인이 왜 나오는것인지에 대한 것 조차 설명을 해드려야 한다면, 이번 강의는 현재 핀스님의 공부수준에 좀 버거운 강의입니다. 현재 본인의 수준(개발언어에 대한 수준)을 잘 파악하시고 그에 맞는 강의부터 듣고 직접 예제들을 실행하시면서 지식의 단계를 높여가실 것을 추천드립니다.
        대화보기
        • 핀스
          이번 강의는 실망이네요. 하나도 이해 못하겠어요. 대체 어디까지 안다는 가정하에 강의를 시작하신건지 말씀이라도 해주셔야 그걸 보고 이걸 공부할텐데, 처음부터 서브라임 텍스트를 쓰시면서 서브라임이 어떻게 쓰는건지도 모르겠고 무슨 툴들을 설치하셨는지, 언더라인이 왜 나오는건지.. 다른 강의들은 A to Z 식으로 알아듣기 좋게 해주시던데 이번거는 좀 다르네요. 순전히 초보자 입장에서 댓글남기는 겁니다.
        • 퍼픙
          감사합니다. 굿굿
        • JuicyFresh
          감사합니다.
        • 박인호
          1-4
          수강완료.
          항상 감사합니다.
        • Seongho Kim
          JSON이 뭔지 잘 이해했습니다. 배울 게 많다 싶을 때는 이고잉님을 생각합니다. 보기는 쉬워도 만드는 데는 몇 배나 시간이 들 텐데 웬 배부른 투정인가 하는 생각을...ㅋㅋㅋ 미리 코드를 준비해야 하고, 강의의 순서를 정해야 할 것이고, 소개할 참고 자료, 참조 사이트도 찾아서 소개할 내용도 학습해야 할 것이고...참으로 대단합니다. 오픈 튜토리얼이 성공적인 사회적 기업이 될 수 있기를...
        • 김현우
          엄청 설명을 잘하시는거같아요~ 부산에서 오프라인 하셨으면좋겠어요
        • bong
          정말 쉽게 설명해주셨네요. 감사합니다
        • 러브뱌뱌
          어쩜 이렇게 풀어서 잘 설명해주시는지~ 항상 감사합니다.
        • 감사합니다. 많이 배웠습니다.
        • 이병일
          잘 봤습니다. 설명 대단합니다. 저에게 큰 도움이 되어 감사합니다.
        • crable
          감사합니다.
        • Byeong Heon Lee
          감사합니다~
        • 학생
          JSON 언젠가 배워야지 했는데 여기설명이 쏙쏙 들어옵니다.
          감사합니다~
        • jhma625
          강의를 잘 보고 있습니다
          위 강좌에서 크롬에서는 잘 동작하나
          ie11에서는 xhr.responseText 가 null로 읽히네요

          구글에서 찾아보니 ie는 버젼에 따라 다르다고 하는데....

          수고스럽지만 답변 부탇 드립니다
        • 신입1
          감사합니다.
        • 감사합니다
        • JustStudy
          2016.07.18 월
          고맙습니다 3.
        • JustStudy
          2016.07.03 일
          고맙습니다 2.
        • 온달장군
          강좌 잘보고 갑니다. 감사합니다.
        • 이주환
          2016. 04. 28
          잘보고갑니다.
        • JustStudy
          고맙습니다
        • 국제표준규격
          1. 맞습니다.

          2. 쪼개질 수 있죠. 다만 JSON이나 string형식으로 바꾸어 한번에 전달해야 합니다
          대화보기
          • 국제표준규격
            검색해보니 많이 나오네요.
            http://stackoverflow.com......ost

            stackoverflow에 자세하게 설명되어 있지만 만약 영어가 어려우실 경우
            http://www.phpschool.com......772

            파싱하기 전 raw POST 데이터를 받아올때 사용하네요.
            $_POST는 오직 랩핑된 데이터만 쓰도록 되어 있고요.
            대화보기
            • 코알라
              time3.php 파일코드에서
              $data = json_decode(file_get_contents('php://input'), true);
              의 php://input 이 코드는 무슨뜻이죠?
              검색해도 잘 안나오네요.
            • 궁그미
              궁금한점이 만약 오브젝트의 값자체가 ,가 포함되어있는 문자열이면 어떻게 될까요.
              구분자로서의 쉼표와 그냥 값으로서의 쉼표가 구분이 잘되나요?
              {
              val1:",,,,",
              val2:",,,,,"
              }
              이런 객체를 JSON.parse 한다고 가정한다며요
            • Simon Lee
              아 이거 Linux/Unix안써보신 분들에게는 기술적으로는 설명하기 매우 어려운 질문이네요. :-)

              웹서버(또는 HTTP 프로토콜로 동작하는) 서버역활의 프로그램들은, 접속한 클라이언트에 대해서 통신으로 주고받는 통신채널같은 게 존재합니다. 보통 표준출력(Standard output)이라고 부르는 건데요. (참조: http://ko.perlmaven.com......ion )

              그래서 shell 스크립트에서 echo로 출력하던, php로 만들어서 무언가를 출력하던 간에, 기본적으로는"standard ouput"으로 출력이 됩니다.

              그런데 Terminal(xterm 등)에서 echo를 쓰거나 php에서 print를 하면 이 standard output이 terminal이라서 terminal로 나오는 거고,
              웹 서버에서 (shell script or php를 실행해서) standard output으로 출력시키면 이게 (네트워크 통신을 통해서)"브라우저쪽"으로 전달되는 것입니다.

              쉽게 설명하기 너무 어렵네요...-_-
              대화보기
              • 히쓰리
                안녕하세요. 의문점이 있어서 글을 남깁니다.
                현재 이해하기로 html -> php 로 데이터를 주고,
                경우를 따져 (if 같은) 데이털를 php에서 echo로 반환하는것입니다.

                이것이 맞는지 의문이고, echo가 아닌 변수값으로써 3개의 값을 반환하는것이 가능할까요?
                예를들면,
                echo $d1->format($data['format']); 문장이
                --> echo $d1->'시간';
                --> echo $d1->'분';
                --> echo $d1->'초';
                3개로 쪼깨질 수 있는지 궁금합니다.
              • 쥬슈야
                저도 오류나오길래 혹시해서 댓글 봤는데 해결법을 올려주셨네요.
                그래도 결국 저는 3번째 동영상에서 뭐가뭔지 몰라 좌절했습니다;; 제게 JSON은 좀 광범위해보이네요.
                다른 부분 쭉 배워보고 나중에 다시 도전해야겠네요.
                대화보기
                • 코딩!
                  아직 100%로 이해하지 않았지만 반복하면 금방 습득할 것 같습니다!
                • taek171@daum.net
                  개념이해가 잘 되네요. 감사합니다.
                • 감나무
                  동영상으로 배우니 너무 쉽네요
                  기초부터 고급까지 손색이 없네요
                  정말 감사하고 수고하셨습니다
                • 벌써자니
                  이고잉님 강좌잘봤습니다! 3번째 동영상(JSON의 적용)과 4번째 동영상(Element.classList)의 영상 섬네일에서 차례가 (4/4)로 동일하네요. 혹시나 해서 댓글달아드립니다. 수고하세요!
                • 비둘기
                  JavaScript는 클라이언트에서 사용되는 프로그램 언어이고
                  (요즘에는 서버용으로 NodeJS를 이용해서? JavaScript를 사용한다고합니다.)
                  PHP는 서버에서 사용되는 프로그램 언어입니다.

                  클라이언트에서 요청을 하면...
                  서버에서 답변을 해줍니다.

                  가정에서 사용하는 컴퓨터는 보통 클라이언트고...
                  다음이나 네이버등은 서버입니다.
                  (http://www.wampserver.com/
                  자세히 모릅니다만 이곳에서 프로그램설치해서 PHP공부할 수 있습니다. 개인용 컴퓨터를 서버로 만들어주는 프로그램인 것 같습니다.)
                  http://opentutorials.org......669 > 이곳에서 PHP수업하고 있군요.

                  익스플로러라는 클라이언트 프로그램으로 다음같은 곳의 서버에 접속해서
                  검색서비를 이용하는 것을 생각하면, 클라이언트와 서버의 관계를 알 수 있습니다.

                  조금 틀린 것이 있는지 모르겠습니다. 배우고 있는 중이라서요...
                  대화보기
                  • twinbraid.blogspot.kr
                    생활코딩의 수업을 보면
                    http://opentutorials.org......233
                    php의 역할에 대해 나와있습니다

                    php의 존재이유는 html이 고정되어있어서 항상 같은 내용만 보여주기때문에
                    일부러 몇몇 부분을 비워두고
                    php에서 따로 연산을 해서 html의 비워둔 곳을 채워주는 것입니다
                    그럼 그 html을 브라우저가 해석하는 것이죠.

                    거기에 php의 변수가 $a 이런식으로 섞여봤자
                    그게 변수란건 php만 알뿐입니다. 브라우저는 그대 $a 라고 출력합니다
                    그런걸 방지하기 위해 제대로된 것으로 만들어서 출력해줄 필요가 있고
                    그것중 하나가 echo 인것입니다.

                    아무의미없이 그냥 보여줄려고 프린트 하는게 아니라..
                    그 출력이란게 php의 진정한 본래의 목적입니다
                    대화보기
                    • 하늘을날다
                      혹시나 해서 글 올립니다.
                      호스팅을 받아서 공부하거나 테스트 하시는 분들은
                      php 5.4미만 버전이라서
                      아래와 같은 방법으로 배열을 올리면 에러뜹니다.
                      에러문구
                      ------
                      Parse error: syntax error
                      unexpected '[' in /home/hosting_users/homesi/www/ajax/time4.php on line 2
                      ----
                      $timezones = ["Asia/Seoul", "America/New_York"];


                      위 부분을
                      $timezones = array("Asia/Seoul", "America/New_York");
                      이렇게 수정해서 사용하세요.
                    버전 관리
                    egoing@gmail.com
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기