[클라이언트에 응답데이터 전송하기]
1. 정적리소스를 클라이언트에 전달
=>css, js, html
2. SSR(서버사이드 랜더링)
=> 서버에서 응답메시지를 만들어서 response
=> 동적으로 view를 작성해서 클라이언트에 전달
=> 실행하면 DBMS에서 조회한 결과를 이용해서 HTML을 서버에서 생성해서 클라이언트로 전달
=> JSP, 타임리프
3. CSR(클라이언트사이드 랜더링)
=> DBMS에서 조회한 결과를 데이터만 클라이언트로 전송
=> 클라이언트에서 자바스크립트로 전달받은 데이터를 필요한 위치에 출력할 수 있도록 변경
(DOM API를 이용 : DOM이 복잡하고 어렵기에 JQuery)를 주로 사용
=> 뷰가 스프링에서 해석할 수 없는 경우 즉 react같은 라이브러리를 뷰로 사용하는 경우 필수
=> 안드로이드에서 데이터를 WAS에 요청해서 받을 수 있다.
=> 다른 서버로 데이터를 전달할 수 있다.
=> react, Vue.js를 이용하는 경우 필수
=> 데이터는 xml(무거워서 현재는 xml은 잘 사용하지 않음), 텍스트(복잡한 데이터 불가능), JSON(가장많이사용)
4. CSR을 위해서 필요한 기술
1) JSON(클라이언트로 전달되는 데이터 형식)
2) 자바스크립트에서 JSON데이터를 접근하는 방식
3) 스프링에서 JSON데이터로 만들어서 response하는 방법
=> 자동으로 JSON데이터를 만들어서 response한다.
(1) 라이브러리 추가
4) Ajax(서버로 데이터를 요청하기 위해 사용되는 비동기 방식)
5) 스프링에서 Ajax로 요청받아 JSON데이터로 만들어서 response하는 방법
6) 자바스크립트(JQuery)에서 response받은 JSON데이터를 DOM을 이용해서 원하는 위치에 출력하기
7) Ajax를 쉽게 함수로 만들어놓은 것이 fetch(자바스크립트에 포함된 기술), axios(별도의 라이브러리를 추가) -> 지금 보지는 않을것
실습
JSON 관련 설명 링크
https://www.json.org/json-en.html
https://blog.naver.com/heaves1/220700745842
설정 텍스트파일 추가
https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple/1.1.1
XML과 JSON 차이
데이터를 JSON형식으로 만들기
- {} : JSONObject => 자바의 객체와 매핑 - DTO
- [] : JSONArray => 자바의 List와 매핑
JSONMakerTest
- 원래 스프링mvc에서 자동으로 만들어주고, 파싱도 해줌.
구성보려고 직접 만들어 보는 것 - FileWriter로 만든 파일에서 일자로만 찍히는건 ctrl+shift+f키 누르면 정리됨
public class JSONMakerTest {
@SuppressWarnings("unused")
//자바컴파일러가 워닝을 인식하지 못하도록 처리
public static void main(String[] args) throws IOException {
//{} JSONObject 만들기 - HashMap의 하위
JSONObject myjson = new JSONObject();
myjson.put("id", "bts");
myjson.put("name", "방탄소년단");
myjson.put("age", "30");
//[] JSONArray 만들기 - ArrayList의 하위
//ArrayList<String>과 같음
JSONArray subjectlist = new JSONArray();
subjectlist.add("자바");
subjectlist.add("스프링");
subjectlist.add("하둡");
subjectlist.add("안드로이드");
//위에서 작성한 JSONArray를 JSONObject에 추가
myjson.put("subject", subjectlist);
//JSONObject를 JSONArray에 저장하기 - List<DTO>
//List에 DTO담겨있는 느낌
/*
1. JSONObject 만들기
2. JSONObject를 리스트에 담기
3. 리스트를 상위오브젝트에 추가
*/
JSONObject sing1 = new JSONObject();
sing1.put("no", "1");
sing1.put("title", "다이너마이트");
sing1.put("year", "2020");
JSONObject sing2 = new JSONObject();
sing2.put("no", "2");
sing2.put("title", "불타오르네");
sing2.put("year", "2016");
JSONObject sing3 = new JSONObject();
sing3.put("no", "3");
sing3.put("title", "봄날");
sing3.put("year", "2017");
JSONArray singlist = new JSONArray();
singlist.add(sing1);
singlist.add(sing2);
singlist.add(sing3);
myjson.put("singlist", singlist);
System.out.println(myjson.toJSONString());
//파일로 만들기
FileWriter fw = new FileWriter("src/main/java/test/json/myjason.json");
fw.write(myjson.toJSONString());
fw.flush();
fw.close();
}
}- console에 한줄로 찍힘. 정리하는(?) 사이트
https://jsonlint.com/
미션. JSONMakerExam
https://blog.naver.com/heaves1/223448439453
json문자열만들기(JSONMakerExam.java)
파일로도 출력하기(myjson2.json)
public class JSONMakerExam {
public static void main(String[] args) throws IOException {
JSONObject myjson2 = new JSONObject();
myjson2.put("name","김서연");
myjson2.put("age","25");
JSONArray subjectlist = new JSONArray();
subjectlist.add("자바");
subjectlist.add("하둡");
subjectlist.add("시큐어코딩");
myjson2.put("subject", subjectlist);
JSONObject addr = new JSONObject();
addr.put("zip", "111-222");
addr.put("addr1", "인천시");
myjson2.put("addr", addr);
JSONArray historylist = new JSONArray();
JSONObject history1 = new JSONObject();
history1.put("subject", "java");
history1.put("month", "3");
JSONObject history2 = new JSONObject();
history2.put("subject", "servlet");
history2.put("month", "3");
historylist.add(history1);
historylist.add(history2);
myjson2.put("history", historylist);
System.out.println(myjson2.toJSONString());
FileWriter fw = new FileWriter("src/main/java/test/json/myjason2.json");
fw.write(myjson2.toJSONString());
fw.flush();
fw.close();
}
}JSONParserTest
- json파일을 JSONArray나 JSONObject로 변경하는 작업
- 앞서 FileWriter로 만든 json파일을 변경
public class JSONParserTest {
public static void main(String[] args) throws FileNotFoundException, IOException, ParseException {
//1. json parser를 생성
// => json문자열을 분석할 수 있는 객체
JSONParser parser = new JSONParser();
//2. json문자열을 파싱
JSONObject root = (JSONObject) parser.parse(new FileReader("src/main/java/test/json/myjason.json"));
//3. JSONObject에서 데이터 읽기
String id = (String) root.get("id");
String name = (String) root.get("name");
String age = (String) root.get("age");
System.out.println("id="+id);
System.out.println("name="+name);
System.out.println("age="+age);
//4. JSONArray에서 데이터 읽기
JSONArray subjectlist = (JSONArray) root.get("subject");
for(int i=0;i<subjectlist.size();i++) {
String subject = (String) subjectlist.get(i);
System.out.println("subject: "+subject);
}
JSONArray singlist = (JSONArray) root.get("singlist");
for(int i=0;i<singlist.size();i++) {
JSONObject sing = (JSONObject) singlist.get(i);
System.out.println("no: "+sing.get("no"));
System.out.println("title: "+sing.get("title"));
System.out.println("year: "+sing.get("year"));
}
}
}
미션 JSONParserExam
myjson2.json파일을 파싱해서 결과를 출력하도록 작업해보세요
JSONParserExam.java
public class JSONParserExam {
public static void main(String[] args) throws FileNotFoundException, IOException, ParseException {
JSONParser parser = new JSONParser();
JSONObject root = (JSONObject) parser.parse(new FileReader("src/main/java/test/json/myjason2.json"));
String name = (String) root.get("name");
String age = (String) root.get("age");
System.out.println("name="+name);
System.out.println("age="+age);
JSONArray subjectlist = (JSONArray) root.get("subject");
for(int i=0;i<subjectlist.size();i++) {
String subject = (String) subjectlist.get(i);
System.out.println("subject= "+subject);
}
JSONObject addr = (JSONObject) root.get("addr");
String zip = (String) addr.get("zip");
String addr1 = (String) addr.get("addr1");
System.out.println("zip="+zip);
System.out.println("addr1="+addr1);
JSONArray historylist = (JSONArray) root.get("history");
for(int i=0;i<historylist.size();i++) {
JSONObject history = (JSONObject) historylist.get(i);
System.out.println("subject="+history.get("subject"));
System.out.println("month="+history.get("month"));
}
}
}
var와 let의 차이점
JavaScript에서 var로 선언된 변수는 호이스팅(hoisting)됩니다. 즉, 해당 변수가 선언되기 전에도 참조할 수 있습니다. 그러나 let과 const로 선언된 변수는 블록 스코프(block scope)를 가지며 호이스팅되지 않습니다. 이것은 변수가 선언된 라인 이전에 해당 변수에 접근할 경우 ReferenceError를 발생시킵니다. 호이스팅의 동작은 코드의 예측 가능성과 가독성에 영향을 미칠 수 있으므로 변수를 사용할 때 이러한 동작을 고려하는 것이 중요합니다.
자바스크립트에서 json객체/ json_test.jsp
<%@ 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>
</head>
<body>
<script type="text/javascript">
//자바스크립트에서 json객체(자바스크립트의 사용자정의객체와 유사)
//var는 호이스팅되고 let은 안됨
let person = {
"singlist": [
{
"no": "1",
"year": "2020",
"title": "다이너마이트"
},
{
"no": "2",
"year": "2016",
"title": "불타오르네"
},
{
"no": "3",
"year": "2017",
"title": "봄날"
}
],
"subject": [
"자바",
"스프링",
"하둡",
"안드로이드"
],
"score": {
"mnet":"1",
"mbc":"2"
},
"name": "방탄소년단",
"id": "bts",
"age": "30"
}
alert(person);
//person이 json오브젝트
//json object는 속성으로 접근 객체.속성
document.write("<h3>"+person.name+"</h3>");
document.write("<h3>"+person.id+"</h3>");
document.write("<h3>"+person.age+"</h3>");
document.write("<h3>"+person.score.mnet+"</h3>");
document.write("<h3>"+person.score.mbc+"</h3>");
//jsonArray는 자바스크립트의 배열처럼 접근하기
document.write("<h3>"+person.subject[0]+"</h3>");
document.write("<h3>"+person.subject[2]+"</h3>");
document.write("<h3>"+person.singlist[2].title+"</h3>");
alert(person.singlist.length);//배열이니까 렝쓰
</script>
</body>
</html>문자열로 json이 전달되는 경우/ json_parser.jsp
<%@ 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>
</head>
<body>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<script type="text/javascript">
//문자열로 json이 전달되는 경우
let deptlist = '{"dept":'
+'[{"code":"001","name":"정보시스템팀","loc":"4층"},'
+'{"code":"002","name":"시스템지원팀","loc":"7층"},'
+'{"code":"003","name":"기업영업팀","loc":"6층"},'
+'{"code":"004","name":"전산실","loc":"5층"}'
+']'
+ '}';
alert(deptlist);
//문자열로 json이 전달된 경우 자바스크립트의 JSON파서를 이용해서 파싱해서 JSON객체를 만들고 작업
let jsonObj = JSON.parse(deptlist);
alert(jsonObj);//json객체
alert(jsonObj.dept.length);
//각 부서의 부서명을 result1,result2,result3,result4에 출력하기 (미션)
document.getElementById("result1").innerHTML = jsonObj.dept[0].name;
document.getElementById("result2").innerHTML = jsonObj.dept[1].name;
document.getElementById("result3").innerHTML = jsonObj.dept[2].name;
document.getElementById("result4").innerHTML = jsonObj.dept[3].name;
</script>
</body>
</html>미션
json_parder.jsp에서 json을 파싱한 후
각 부서의 부서명을 result1,result2,result3,result4에 출력하기(화면캡쳐해서 제출)
-
"document.getElementById("result1").innerHTML"은 JavaScript에서 DOM(Document Object Model)을 사용하여 HTML 문서의 요소를 선택하고 해당 요소의 내용을 변경하는 방법 중 하나입니다.
-
document : 현재 HTML 문서를 나타냅니다.
-
getElementById("result1") : HTML 문서 내에서 id가 "result1"인 요소를 선택
-
.innerHTML : 선택한 요소의 내용을 나타내는 속성
-
따라서 이 코드는 HTML 문서에서 id가 "result1"인 요소의 내용을 변경하는 데 사용될 수 있습니다.
json관련 라이브러리 두개 추가
json.jsp
<%@ 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>
</head>
<body>
<h3><a href="/erp/json/getString">스트링데이터받기</a></h3>
<h3><a href="/erp/json/getJsonObj">DTO를 json으로 변환해서 받기</a></h3>
<h3><a href="/erp/json/getJsonArr">ArrayList에 저장된 DTO를 json으로 변환해서 받기</a></h3>
</body>
</html>etc-tiles.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="etcview/json" extends="mainTemplate">
<put-attribute name="menu" value="/WEB-INF/menu/it_menu.jsp"/>
<put-attribute name="content" value="/WEB-INF/etcview/json.jsp"/>
</definition>
<definition name="etcview/ajax" extends="mainTemplate">
<put-attribute name="menu" value="/WEB-INF/menu/it_menu.jsp"/>
<put-attribute name="content" value="/WEB-INF/etcview/ajax.jsp"/>
</definition>
<definition name="etcview/ajaxexam" extends="mainTemplate">
<put-attribute name="menu" value="/WEB-INF/menu/it_menu.jsp"/>
<put-attribute name="content" value="/WEB-INF/etcview/ajaxexam.jsp"/>
</definition>
</tiles-definitions>
it_menu.jsp
<%@ 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>
</head>
<body>
<div class="list-group">
<a href="#" class="list-group-item">분석설계자료</a>
<a href="#" class="list-group-item">디자인확인</a>
<a href="#" class="list-group-item">front-end</a>
<a href="#" class="list-group-item">back-end</a>
<a href="#" class="list-group-item">프로젝트진행상황</a>
<a href="#" class="list-group-item">개발이슈조회</a>
<a href="/erp/json/showpage" class="list-group-item">JSON테스트</a>
<a href="/erp/ajax/showpage" class="list-group-item">Ajax테스트</a>
<a href="/erp/ajax/exam" class="list-group-item">Ajax연습하기</a>
</div>
</body>
</html>EtcViewController
@Controller
public class EtcViewController {
//json테스트페이지
@GetMapping("/json/showpage")
public String showJsonPage(){
return "etcview/json";
}
//Ajax테스트페이지
@GetMapping("/ajax/showpage")
public String showAjaxPage(){
return "etcview/ajax";
}
}
미션
EtcViewController에서 List< BoardDTO>가 json array로 변환되어 리턴되도록 추가하세요
본 포스팅은 멀티캠퍼스의 멀티잇 백엔드 개발(Java)의 교육을 수강하고 작성되었습니다.
