PHP와 Javascript에서 JSON 데이터 처리하기
웹이든 어플이든 요즘 서비스에서 서버를 사용하지 않는 경우를 찾기 힘들죠.
서버가 있다는 것은 서버에게 요청과 응답을 받는다는 얘기가 됩니다.
즉, 어떤 형식으로든 정보가 왔다갔다 해야한다는 얘기죠.
공통된 데이터 형식
어쨋건 클라이언트와 서버가 데이터를 주고 받아야 하는 상황입니다.
이런 경우를 한번 생각해보죠.
안드로이드 어플에서 Java Spring으로 만든 서버와 데이터를 주고 받는다고 가정해 보죠.
안드로이드가 Java 기반의 플랫폼이기 때문에 데이터를 주고 받는데 크게 어려움이 없을 겁니다.
하지만 갑자기 새로운 서버와 데이터를 주고 받는다면 어떨까요?
PHP기반의 웹서버와 데이터를 주고 받아야 한다면 이야기가 달라지죠.
안드로이드 쪽에서 데이터를 받아서 처리하는 부분을 새로 만들어야 할 수도 있습니다.
그래서 플랫폼, 언어에 상관없이 사용할 수 있는 데이터 표준을 만들자!!!
라는 의미에서 XML과 JSON이 나오게 된 것이죠.
XML과 JSON은 데이터를 표현하는 양식 또는 문법이라고 할 수 있습니다.
말 그대로 데이터를 어떤 형식으로 포장해서 보내줄 것인가?
이 질문에 대한 답이라고 할 수 있죠.
그럼, 왜 JSON인가?
그럼 XML과 JSON 중에서 근래에 JSON이 더 많이 사용되는 이유는 무엇일까요?
결론을 말하자면 JSON이 더 가볍고 빠르기 때문입니다.
XML과 JSON 모두 앞서 말한 것 처럼 플랫폼, 언어를 가리지 않고 데이터를 전달하기 위해 만들어 졌습니다.
그렇기 때문에 기계 입장에서도 읽기 편해야 하고, 사람이 읽기에도 편해야 합니다.
XML 예시
<data>
<name> aaa </name>
<family> bbb </family>
</data>이렇게 태그 형식으로 데이터를 나타내게 됩니다.
데이터를 받는 쪽에서는 XML을 해석할 수 있는 분석기(Parser)를 사용합니다.
플랫폼 또는 프로그래밍 언어에 알맞게 데이터를 분해하는 것이죠.
JSON 예시
{
"name" : "aaa",
"family" : "bbb"
}이것이 JSON의 형식입니다.
XML처럼 태그형식으로 나타내지 않기 때문에 데이터 용량 자체가 더 적습니다.
또 큰 장점 중 하나는 바로 배열을 사용할 수 있다는 점입니다.
XML은 태그안에 배열값이 들어갈 수 없지만 JSON은 가능합니다.
주고 받는 데이터가 많고, 형식이 복잡해도 JSON은 이를 커버할 수 있는 것이죠.
또 중요한 부분은 JSON의 데이터 처리 속도입니다.
JSON이 XML 보다 더 빠른 데이터 처리가 가능한 이유는 이 둘의 처리 방식에 있는데요.
JSON의 경우에는 문자열로 데이터가 오기 때문에 JSON 문법에 맞게 분해하면 바로 데이터를 얻을 수 있습니다.
JSON Parser가 문자열을 분해하여 메모리 상에 데이터를 바로 올리는 것이죠.
반면 XML은 두 가지 방식으로 데이터를 분해할 수 있습니다.
- DOM 방식 → 메모리에 XML 문서를 모두 올리구 분해를 시작
- SAX 방식 → XML 문서를 순차적으로 읽으면서 파싱. 하지만 DOM 보다 사용하기가 복잡하고 어려움
SAX 방식은 빠르지만 사용하기가 좀 복잡합니다ㅠㅜ
DOM 방식은 메모리에 문서를 다 올리고 나서 분해를 시작하니 당연히 JSON 방식보다 느릴 수 밖에 없겠죠?
결국 JSON이 많이 사용되는데에는 문법의 간결함, 적은 용량, 빠른 데이터 처리!
이 세가지 이유를 들 수 있겠네요.
PHP, Javascript에서 JSON을 다루는 방법
PHP
"aaa", "data" => array("1", "2", "3"));
$json_data = json_encode($array_data); //JSON 형식으로 바꿉니다
$parsed_data = json_decode($json_data); //위의 문서에서 볼 수 있듯이 Object가 리턴됩니다
$parsed_data->name; // "aaa"
$parsed_data->data[0]; // "1"
?>
json_decode 메서드의 결과값으로 Object가 오기 때문에 → 연산자를 이용해서 데이터에 접근하면 됩니다.
JSON 데이터안에 배열이 들어있는 경우는 배열의 Index를 활용해서 접근할 수도 있습니다.
Javascript
var data = {"order_by" : "New", "write_user_id" : write_user_id};
var success = function(data, status, response){
var parsed_data = JSON.parse(data); //서버로부터 받은 JSON 데이터를 분해합니다
var result_code = parsed_data["result_code"]["major_code"]; //Javascript Object
if(result_code == "SUCCESS")
{
var estimate_suggest_data = parsed_data["return_data"];
load_data_on_target(estimate_suggest_data);
/*다음과 같이 값을 참조할 수 있습니다*/
estimate_suggest_data.title;
estimate_suggest_data.id;
}
else
{
alert("데이터를 불러오는데 실패했습니다.");
window.location = "main_page.php";
}
};
var fail = function(response, status, error){
alert("오류가 발생했습니다. 다시 시도해주세요");
};
var http = new HttpRequest(target, data, success, fail); //HTTP 요청을 생성합니다
http.sendPost(); //HTTP 전송을 보냅니다
Javascript에서 JSON 객체를 활용해 데이터를 분해하게 되면 Object 형태로 리턴되게 됩니다.
그러면 배열을 사용하듯이 사용하면 됩니다.
위의 코드에서 result_code의 value에 해당하는 값이 JSON 데이터이기 때문에 거기에서 또 major_code라는 key로 값을 찾는 것입니다.
Javascript에서 PHP를 사용하는 경우
var parsed_data = <?php echo json_encode($data); ?>;Javascript에서 PHP 값을 바로 가져와서 사용할 수 있는데요.
위와 같은 경우에서는 JSON.parse()를 사용하여 파싱하는 작업이 따로 필요없습니다.
json_encode 작업을 통해 전달된 데이터는 바로 Javascript에서 Object형태로 전달됩니다.
따라서 따로 분해작업이 필요하지 않고 바로 배열처럼 사용이 가능합니다.
한 가지 주의할 점은 Javascript 변수에 PHP 값을 넣을 때 quote(홑따옴표나 쌍따옴표)를 사용하지 않아야 한다는 것입니다.
var parsed_data = '<?php echo json_encode($data); ?>';이렇게 해버리면 그냥 문자열로 인식이 되어 버립니다. 그러면 당연히 JSON 형식의 데이터에 접근이 안되겠죠?
그냥 문자열일 뿐이니까요.
Reference
- Ajax로 HTML 로드하기 → http://findfun.tistory.com/398
- 생활코딩 JSON → https://opentutorials.org/course/49/3473
- JSON과 XML 차이점 → http://tcpschool.com/json/json_intro_xml
- XML을 위해 건배, JSON이여 영원하라 → http://www.ciokorea.com/news/30044#csidxc541ad405867edc8e245a38279d0d09
- JSON 데이터 분해방법 → http://sunghodev.tistory.com/4
- XML 데이터 분해방법 → http://humble.tistory.com/23
- PHP json_decode → http://php.net/manual/kr/function.json-decode.php
- PHP Object Access → http://php.net/manual/en/sdo.sample.getset.php
- Javascript Array as JSON → https://www.w3schools.com/js/js_json_parse.asp