728x90
지금까지 json 을 엄청 나게 많이 사용하고 또 사용할때마다 정리를 했었다. 그런데 이제보니 JSON 이 제대로 무엇이고 JAVA 에서 어떻게 만들 수 있고, 어떻게 전달하고 하는 그런 것들에 대해서 적어놓은 글이 없다는 것을 깨달았다.
또한 JSON 과 함께 많이 쓰이는 XML 에 대해서도 이번 기회에 정리해놓고자 한다.
JSON JavaScript Object Notation
JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식
- JSON 은 참으로 위대한 자료형이다. 만들기 쉽고, 보내기 쉽고, 알기 쉽다!
- JSON 은 기본적으로 { KEY : VALUE } 형식으로 이루어져 있다. 이는 자바에서의 hashmap 과 비슷한 방식이라고 생각하면 된다.
- JSON은 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준입니다.
- JSON은 자바스크립트를 기반으로 만들어졌습니다. 자바스크립트에 대한 기초 지식이 있으면 배우기 수월합니다.
- JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었습니다.
- JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있습니다.
- JAVA 에서 json 형식으로 데이터를 주고 받을 때 이러한 json 형태를 만드는 방법은 크게 2가지가 있다. 하나는 직접 데이터 형식 그대로 내가 직접 만들어주는 것이고, 다른 하나는 JSON 관련 라이브러리를 이용해서 쉽게! 만드는 것이다.
1. 직접 만드는 JSON
- 사실 아래 코드는 이번에 학원에서 했던 프로젝트 중 내가 만들었던 채팅 기능을 만들면서 사용한 코드이다. 이때 이상하게 json 라이브러리를 생각하지 못해서 굉장히 무식하게...직접 json 을 만들었다.
- chatList 라는 배열에서 nickName과 detail , time 을 끌어와서 result 라는 JSON 으로 저장한다. 이때 굉장히 무식하게? 내가 직접 json 형태로 만들어서 프론트에 있는 jsp 로 내용을 던지게 만들었다.
- 딱 봐도 복잡하고, 무엇보다 데이터를 추가할때마다 에러가 뿜뿜 미친듯이 터져서 정말 많이 고생했었다.
- 이 채팅 부분에 대해서는 추후 따로 정리할 예정이다.
// 전체 채팅 내역을 조회해온 후 JSON 형태로 묶어서 return 하는 메소드
private String getChatList(int rno) {
StringBuffer result = new StringBuffer("");
result.append("{\"result\":[");
// 여기는 rno 가 들어가야함
ArrayList<ChatVO> chatList = dao.getChatList(rno);
//System.out.println("size : "+chatList.size());
try {
for(int i = 0; i < chatList.size(); i++) {
// 이렇게 직접...만들었습니다ㅠㅠ
result.append("[ {\"value\": \"" + chatList.get(i).getNickname() + "\"},");
result.append("{\"value\": \"" + chatList.get(i).getCdetail() + "\"},");
result.append("{\"value\": \"" + chatList.get(i).getCtime() + "\"}]");
if(i != chatList.size() -1) result.append(",");
}
result.append("], \"last\":\"" + chatList.get(chatList.size() - 1).getCno() + "\"}");
//System.out.println("size : "+chatList.size());
return result.toString();
}catch(Exception e) {
return "";
}
}
// 가장 최신의 채팅 내역만 조회해온 후 JSON 형태로 잘라서 return 하는 메소드
private String getRecentList(int rno, int cno) {
//System.out.println("실행중");
StringBuffer result = new StringBuffer("");
result.append("{\"result\":[");
try {
// 여기는 rno 가 들어가야함
ChatVO chat = dao.getRecentChat(rno, cno);
// 결과를 가져올 수 있다면 JSON 형태로 묶음
if(chat !=null) {
result.append("[ {\"value\": \"" + chat.getNickname() + "\"},");
result.append("{\"value\": \"" + chat.getCdetail() + "\"},");
result.append("{\"value\": \"" + chat.getCtime() + "\"}]");
result.append("], \"last\":\"" + chat.getCno() + "\"}");
return result.toString();
}else {
return "";
}
}catch(Exception e) {
e.getMessage();
return "";
}
}
}
2. 스마트하게 JSON 라이브러리 사용하기
- json 관련 라이브러리가 많은 것으로 알고 있는데 가장 간편하게 사용할 수 있는 라이브러리는 json-simple 라이브러리이다.
https://code.google.com/archive/p/json-simple/downloads
Google Code Archive - Long-term storage for Google Code Project Hosting.
...
code.google.com
- 보통 아래 2가지 객체와 메소드를 가장 많이 사용한다.
- JSONArray 의 경우 ArrayList 와 메소드가 비슷하다
| 클래스 | 메서드명 | 설명 |
| JSONObject | put(key, value) | key 와 value 를 이용해 json 형태로 만듦 |
| get(key) | key 를 기준으로 value 를 Object 타입으로 return 한다. | |
| JSONArray | add(JSONObject) | json 타입의 객체를 배열에 저장함 |
| get(index num) | 해당 index 에 맞는 json 객체를 가져온다. |
1) 서버의 역할 jsp : json 파일을 만들어서 묶어서 프론트로 전달
<%@page import="org.json.simple.JSONArray"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// 여기서 반복문을 안써서 그렇지 직접 만드는 것보다 10배는 간단하고 보기 좋다!
// json 배열
JSONArray gameArray = new JSONArray();
// 게임 정보 하나가 들어갈 JSON Object 선언
JSONObject game = new JSONObject();
// json 객체에 key : value 를 넣는다
// 넣을 때는 당연히 put(key, value)
game.put("title", "LoL");
game.put("price", "무료");
game.put("OS", "window, mac");
gameArray.add(game);
// 게임 정보 하나가 들어갈 JSON Object 선언
JSONObject game2 = new JSONObject();
game2.put("title", "HOTS");
game2.put("price", "무료");
game2.put("OS", "window, mac");
gameArray.add(game2);
// 게임 정보 하나가 들어갈 JSON Object 선언
JSONObject game3 = new JSONObject();
game3.put("title", "스타필드");
game3.put("price", "미정");
game3.put("OS", "window");
gameArray.add(game3);
// 게임 정보 하나가 들어갈 JSON Object 선언
JSONObject game4 = new JSONObject();
game4.put("title", "모여봐요 동물의 숲");
game4.put("price", "52000");
game4.put("OS", "Nintendo SWITCH");
gameArray.add(game4);
// 보낼때는 String 으로 보내야함
response.getWriter().write(gameArray.toJSONString());
%>
2) json 데이터를 전달받아 출력할 프론트 jsp
- 전달받은 json 은 당연히 배열 형식이다 => JSONArray 로 전달받았기 때문에
- 프론트에서 출력할때 for 문을 사용하는데 기존의 for 문과 약간의 차이가 있다.
- 마치 java 에서의 향상된 for 문처럼 for(임의의 변수 : 반복할 객체) 으로 선언 후 사용한다. 이때 임의의 변수는 객체의 길이 즉 length 가 되고 따라서 객체[임의의변수] 를 넣어서 배열의 요소를 꺼내 올 수 있다.
- 배열객체[임의의변수].key 를 사용하면 key 기준으로 value 를 가져올 수 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$("input").on("click", function(){
$.ajax({
url: "server05.jsp",
type : "GET",
dataType : "JSON",
success : function(data){
// JSONArray.toJSONString() 로 날아오면 java 의 배열로 온다고 생각하면됨
console.log(data)
// for 문을 돌리면서 data 에서 요소를 꺼내옴
// 이때 꺼내온 요소는 json 형태가 될꺼고, json 형태에서 다시 각 key 를 기준으로 value 를 가져옴
// key : dname, loc, deptno
for(num in data){
console.log(data[num].title)
console.log(data[num].price)
console.log(data[num].OS)
$("ul").append(
"<li>"+
data[num].title +
" : "+
data[num].price+
" : "+
data[num].OS+
"</li>"
)
}
}
})
})
})
</script>
</head>
<body>
<input type="button" value="출력" />
<div>
<ul>
<li>내용 출력</li>
</ul>
</div>
</body>
</html>- JS 에서의 for문은 아래와 같은 문법으로도 사용 가능하다.
// key : value 의 json 형태
// JS에서 json 을 만들고
var list2 = {"a":"AAAA", "b":"BBBB", "c":"CCCC"};
console.log(list2["a"])
// 이쪽이 진짜 향상된 for 문
// for 문을 사용해서 임의의 변수 key 를 사용해서 list2 배열안의 값을 key 기준으로 가져온다
for(key in list2){
console.log(key+" : "+list2[key]);
} */
XML : eXtensible Markup Language
- XML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어입니다.
- XML은 EXtensible Markup Language의 약자로, 수많은 응용 분야에서 데이터를 저장하고 전달하는 중요한 역할을 맡고 있습니다.
- XML를 배우기 전에 HTML, 자바스크립트 등의 기초 지식이 필요합니다.
- 난 별로 안 좋아한다 -> 일단 만들기가 어렵다(가장 중요), 사용하는 것도 설정파일에서 많이 사용하고 보통 다른 곳에서는 json 을 더 많이 사용하는 듯 하다.
1. xml 전달 & 전달받기
- 웹에서 xml 의 값을 가져오기 위해서는 jquery 에서 아래 문법을 사용한다.
- jquery 의 each 문법을 사용해 넘어온 결과에 대해서 반복문을 돌린다 ⇒ java 의 향상된 for 문 느낌?
- xml 을 받아온 데이터를 find.(xml태그명)과 find.(xml태그명).text() 를 사용해 태그명을 기준으로 값을 가져올 수 있다.
- $(data).find("game")
- var price = $(this).find("price").text();
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
// 1. 출력 버튼을 클릭하면 콘솔에 메시지 출력
// 2. server02.xml 에서 게임 정보 가져와서 출력
$(function(){
$("input").on("click", function(){
$.ajax({
url : "server02.xml",
type : "GET",
dataType : "XML",
success : function(data){
// 받아온 결과값 data
// data 에 대해서 반복문 돌리기 => 이때 gamelist 태그 찾아서 해당 태그에 대해서 반복
$(data).find("game").each(function(){
// 아래에서 this 는 현재 반복되는 객체를 의미
var title = $(this).find("title").text();
var price = $(this).find("price").text();
var os = $(this).find("OS").text();
// 반복되는 값을 하나로 묶어서 text 변수에 저장
var text = "<li>" + title +" : "+ price +" : "+ os +"</li>";
// ul 밑 li 에 출력
$("ul").append(text);
})
}
})
})
})
2) 전달되는 xml 파일 구조
<?xml version="1.0" encoding="UTF-8"?>
<gamelist>
<game>
<title>LOL</title>
<price>무료</price>
<OS>window, mac</OS>
</game>
<game>
<title>HOTS</title>
<price>무료</price>
<OS>window, mac</OS>
</game>
<game>
<title>스타필드</title>
<price>미정</price>
<OS>Window</OS>
</game>
<game>
<title>모여봐요 동물의 숲</title>
<price>52000</price>
<OS>Nintendo SWITCH</OS>
</game>
</gamelist>
JSON 과 XML 의 공통점과 차이점
공통점
- 둘 다 데이터를 저장하고 전달하기 위해 만들어졌다
- 둘 다 기계뿐만 아니라 사람도 쉽게 읽을 수 있따 -> 사람이 쉽게 만들 수 있다
- 둘 다 계층적인 데이터 구조를 가집니다.
- 둘 다 다양한 프로그래밍 언어에 의해 파싱될 수 있습니다 => 대표적으로 JAVA 와 JS , Python 에서 등등 모두 사용 가능하다
- 둘 다 XMLHttpRequest 객체를 이용하여 서버로부터 데이터를 전송받을 수 있다
- 둘다 key : value 느낌을 갖는다 => json 은 보여지는 것도 key : value 형태고, xml 역시 태그가 key, 안에 있는 내용이 value 로 보면 비슷하다
차이점
JSON은 종료 태그를 사용하지 않는다 => 대신 중간중간 , 와 { } 처럼 열고 닫기가 필수이다.
JSON의 구문이 XML의 구문보다 더 짧다 => 만들기 더 쉽다
JSON 데이터가 XML 데이터보다 더 빨리 읽고 쓸 수 있다
XML은 배열을 사용할 수 없지만, JSON은 배열을 사용할 수 있다 => 데이터를 가져올 때도 xml 은 배열로 가져오지 못하지만 json 은 배열로 가져 올 수 있다
XML은 XML 파서로 파싱되며, JSON은 자바스크립트 표준 함수인 eval() 함수로 파싱된다
Reference
XML과 JSON의 특징, 공통점, 차이점
XML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어입니다.XML은 EXtensible Markup Language의 약자로, 수많은 응용 분야에서 데이터를 저장하고 전...
velog.io
https://derveljunit.tistory.com/214
[JavaScript] JSON 만들기, 파싱하기
JSON의 간단한 설명 JSON 이란? JSON은 JavaScript Object Notation 의 약자에서 알 수 있듯이 Javascript 객체를 구조화된 데이터로 주고받기 위한 포맷입니다. 현재는 가장 대중적인 HTTP Content-Type 데이터유.....
derveljunit.tistory.com
댓글