22-05-30(월) 085일차 [JSON] JSON 형식과 활용

국비지원교육 (22.01-22.07)/강의노트

22-05-30(월) 085일차 [JSON] JSON 형식과 활용

옌炎 2022. 6. 22. 16:44

728x90

수업내용

1교시 (09:30-10:20)

앞으로의 과정 설명
- JSON
- el, jstl
- Node.js
  - MySQL
- react
  - MySQL
- Python
  - Django, bigdata, crawling(scrapping), 시각화
- Android
- ElasticSearch

2교시 (10:30-11:20)

spring 4.3.16 설치
이클립스 스프링 설치

1. 이클립스 설치 및 워크 스페이스 세팅
----------------------------------
C:\00.KOSMO108\30.Web\eclipse_web <-- 이클립스
C:\00.KOSMO108\30.Web\eclipse_web_work <-- 이클립스 워크 스페이스

C:\00.KOSMO108\90.Download\eclipse\eclipse-jee-2020-06-R-win32-x86_64 폴더에서 eclipse 폴더 카피해서
C:\00.KOSMO108\30.Web\eclipse_web 폴더에 eclpise 폴더를 복사하기 <-- 이클립스 설치

C:\00.KOSMO108\30.Web\eclipse_web\eclipse\eclipse.exe 실행
C:\00.KOSMO108\30.Web\eclipse_web_work 워크스페이스 설정하기

2. 이클립스 인코딩 세팅하기 UTF-8
--------------------------------
인코딩 종류 : UTF-8, EUC-KR, KSC5601, ISO-8859-1

Window - Preferences - General - Content Types - Java Class File - Default encoding : UTF-8  Update
                       General - Workspace - Text file encoding -  Other - UTF-8 Apply
                       General - Editors - Text Editors - Spelling - Encoding - Default(UTF-8) 체크 Apply
                       General - Web Browser - Use external web browser 체크
                           External web browsers: Chrome 체크 Apply
Web - CSS Files - Encoding - ISO 10646/Unicode(UTF-8) Apply
Web - HTML Files - Encoding - ISO 10646/Unicode(UTF-8) Apply
Web - JSP Files - Encoding - ISO 10646/Unicode(UTF-8) Apply
XML - XML Files - Encoding - ISO 10646/Unicode(UTF-8) Apply

3. jdk 이클립스 플러그인 확인하기
-----------------------------
Window - Preferences - Java - installed JREs - jdk 또는 jre 이 세팅이 됬는지 확인하기

4. tomcat 이클립스에 플러그 인 하기
----------------------------------
Window - Preferences - Server - Runtime Enviorments - 우측에 있는 Add.. 버튼 클릭
New Server Runtime Enviorments 창에서 Apache Tomcat v8.5 선택 Next
Tomcat Server 창 에서 Tomcat installation direcory : Browse 버튼 클릭
C:\Program Files\Apache Software Foundation\Tomcat 8.5 선택 하고 Finish
Apply and Close

이클립스 하단에 Servers 탭 (Window - Show View - Servers 선택)
No servers are available. Click this link to create a new server... 링크 클릭
Define a New Server 창에서
Select the server type: Tomcat v8.5 Server 선택하고 Finish 클릭

Project Explorer 창에
Servers 폴더가 생성된다.  <--   이클립스에 tomcat 플러그이 완성된 것이다.

5. STS 플러그인 하기
---------------------------
Marketplace에서 플러그인 하기
이클립스 메뉴에서 Help 누르기
Eclipse Marketplace.. 누르기
Eclipse Marketplace 창에서
Find 텍스트필드 : sts 키인하고 Go 버튼 누르기
검색된 sts 플러그인 중에서
Spring Tools 3(Standalone Edition) 3.9.14.RELEASE
에 있는 install 버튼 누르기
Confirm Selected Features 창에서 Confirm 버튼 누르기
파일 다운로드 하나라 시간이 걸린다
다운로드가 다 되면
Riview License 창이 뜬다.
I accpet the terms of the license agreements
래디오 버튼 체크하면 Finish 버튼이 활성화됨
Finish 버튼 누르기
이클립스에 파일 다운로드하면서 설치 작업을 오래 한다.
중간에 팝업이 뜨면 OK하고 이클립스가 재시작한다.

6. 프로젝트 만들기 : Dynamic Web Project
-----------------------------------------
스프링 프로젝트 이름 : testSpring
File -> New -> Dynamic Web Project 선택하기
Dynamic Web Project 창 Project name : testSpring 입력하고 Next 버튼 클릭
Java 창 아래에 있는 Default output folder 아래 텍스트 필드에서
build/classes --> WebContent\WEB-INF\classes 변경하고 Next 버튼 클릭하기
-- testSpring\WebContent\WEB-INF\classes
Web Module 창에서
Generate web.xml deployment descripter 체크박스 체크하고 Finish 버튼 누르기
Project Explorer에
testSpring 프로젝트가 생성된다.
testSpring 프로젝트에 마우스로 우클릭하면
아래에 Spring 메뉴 아이템이 보인다.
Spring 메뉴 아이템에 마우스를 롤오버해서 Add Spring Project Nature 클릭하면
testSpring 프로젝트 폴더에 파란색 S 이미지가 보인다.

7. 수동으로 라이브러리 포팅하기
------------------------------
Context/WEB-INF/lib 폴더에 포팅하고자 하는 라이브러리를 복사해둔다.

스프링 + 마이바티스 17개

spring library
spring-aop-4.3.16.RELEASE.jar
spring-beans-4.3.16.RELEASE.jar
spring-context-4.3.16.RELEASE.jar
spring-context-support-4.3.16.RELEASE.jar
spring-core-4.3.16.RELEASE.jar
spring-expression-4.3.16.RELEASE.jar
spring-jdbc-4.3.16.RELEASE.jar
spring-tx-4.3.16.RELEASE.jar
spring-web-4.3.16.RELEASE.jar
spring-webmvc-4.3.16.RELEASE.jar

mybatis library
mybatis-spring-1.2.2.jar <-- Spring + Mybatis 연결 library
mybatis-3.2.4.jar <-- Mybatis Framework library

JDBC
ojdbc6.jar

log4j
log4j-1.2.17.jar

jstl
jstl.jar
standard.jar

스프링로그
commons-logging-1.1.2.jar

Context 우클릭 Build Path - Configure Build Path
Properties for firstWeb 창에서 -  Java Build Path -
Libraries 탭 선택하고 우측에 Add External JARs... 버튼 클릭
폴더에서 포팅할 라이브러리 전체 선택 하고
Java Build Path 창에서 Apply and Close 클릭
Context
Referenced Libaries 에 라이브러리가 포팅된다.

8. 설정 확인
---------------
Servers - Tomcat v8.5 Server at localhost-config
web.xml
server.xml
context.xml 수정
<Resource auth="Container"
maxActive="100"
maxIdle="30"
maxWait="10000"
type="javax.sql.DataSource"
name="jdbc/jndi_orclKSY00"
driverClassName="oracle.jdbc.driver.OracleDriver"
url="jdbc:oracle:thin:@127.0.0.1:1521:orclKSY00"
username="scott"
password="tiger" />

WebContent/WEB-INF/web.xml 수정 *log4j.xml 복사 해두기
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance "
xmlns="http://xmlns.jcp.org/xml/ns/javaee "
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd "
id="WebApp_ID" version="3.1">

<display-name>kosmoSpring</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>


<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/classes/log4j.xml</param-value>
</context-param>
</web-app>

3교시 (11:30-12:20)

JSON이란
- var literal = {”key”: “value”, “key”: “value”, …};
- var json = ‘{”key”: “value”, “key”: “value”, …}’;

4교시 (12:30-13:20)

literal_object_1.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>
	<!-- jQuery CDN 불러오기 -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
	
		/*
			JSON : JavaScript Object Notation
			1. 경량의 데이터 교환 형식(xml보다 경량)
			2. 다른 프로그래밍 언어 간의 데이터 교환에 사용
			3. jQuery에서는 기본 문법 체계가 JSON이다.
			4. JSON 자체가 하늬 데이터로 사용
			5. Ajax 에서는 JSON을 통신시 데이터 규격으로 사용
				: JSON 데이터를 서버에 전송한다.
				{"key":"value", "key":"value", ...}
				QueryString 처럼 보낸다.
			사용 예)
			var literal = {"key":"value", "key":"value", ...};
			var json = '{"key":"value", "key":"value", ...}'
		*/
		
		$(document).ready(function(){
			
			document.body.mydata = { title: '리터럴 객체 ' };
			alert(document.body.mydata.title);
		
			var ju = {
					 "name": "홍길동"
					,"age": 27
					,"gender": "남자"
					,"visual": "멋짐"
			};
			
			alert("ju >>> : " + ju);
			
			$("#div_1_btn").click(function(){
				
				document.getElementById('div_1').innerHTML = ju.name;
				document.getElementById('div_1').innerHTML = ju.HTML;
				document.getElementById('div_1').innerHTML = ju.gender;
				document.getElementById('div_1').innerHTML = ju.visual;
			});
			
			$("#div_2_btn").on("click", function(){
				
				const aa_1 = document.getElementById('div_2');
				aa_1.innerHTML += ju.name;
				const aa_2 = document.getElementById('div_2');
				aa_2.innerHTML += ju.age;
				const aa_3 = document.getElementById('div_2');
				aa_3.innerHTML += ju.gender;
				const aa_4 = document.getElementById('div_2');
				aa_4.innerHTML += ju.visual;
			});
			
			$(document).on('click', '#div_3_btn', function(){
				
				var t_ju = $("<table border='1' />");
				var row =  $('<tr />').append(
							$('<td />').text(ju.name),
							$('<td />').text(ju.age),
							$('<td />').text(ju.gender),
							$('<td />').text(ju.visual)
				);
				t_ju.append(row);
				$('#div_3').append(t_ju);
			});
		});
		
	</script>
</head>
<body>
	<div id="div_1"></div>
	<button id="div_1_btn">div_1</button><br>
	
	<div id="div_2"></div>
	<button id="div_2_btn">div_2</button><br>
	
	<div id="div_3"></div>
	<button id="div_3_btn">div_3</button><br>
</body>
</html>

5교시 (14:30-15:20)

literal_object_2.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>
	<!-- jQuery CDN 불러오기 -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
	
		function initCompany(){
			var company = {
					"name":"(주)은비컴퍼니"
				   ,"since": 2022
				   ,"department": ["기획팀","영업팀","디자인팀","개발팀"]
				   ,"biz": ["소프트웨어개발팀","통신판매업","위치정보서비스"]
				  };
		
			alert(company);
			document.getElementById("name").innerHTML = company.name;
			document.getElementById("since").innerHTML = company.since;
			
			var deptLi = "";
			for (var i=0; i < company.department.length; i++ ){
				deptLi += "<li>" + company.department[i] + "</li>";
			}
			document.getElementById("department").innerHTML = deptLi;
			
			var bizLi = "";
			for (var i=0; i < company.biz.length; i++ ){
				bizLi += "<li>" + company.biz[i] + "</li>";
			}
			document.getElementById("biz").innerHTML = bizLi;
		}
	</script>
</head>
<body onload="initCompany()">
	<h1 id="name"></h1>
	<p>
	<strong>설립년도 : </strong><span id="since"></span>
	</p>
	<h2>주요 사업 부서</h2>
	<ul id="department"></ul>
	<h2>주요 사업 분야</h2>
	<ul id="biz"></ul>
</body>
</html>

6교시 (15:30-16:20)

barChart.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="http://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript">
	
		google.charts.load('current', {'packages':['bar']});
		google.charts.setOnLoadCallback(drawChart);
		
		function drawChart() {
			var data = google.visualization.arrayToDataTable(
				[
					['Year', 'Sales', 'Expenses', 'Profit'],
					['2014', 1000, 400, 200],
					['2015', 1170, 460, 250],
					['2016', 660, 1120, 300],
					['2017', 1030, 540, 350]
				]
			);
			
			var options = {
					chart: {
						title : 'Company Performance',
						subtitle: 'Sales, Expenses and Profit: 2014 - 2017',
					}
			};
			
			var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
			chart.draw(data, google.charts.Bar.convertOptions(options));
		}
	</script>
</head>
<body>
	<div id="columnchart_material" style="width: 800px; height:500px;"></div>
</body>
</html>

literal_object_3.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>
	<!-- jQuery CDN 불러오기 -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
	
		var keyworkdRank= {
				 "r1" : {"k": "HTML5", "s": "+", "v": 178}
				,"r2" : {"k": "CSS3", "s": "new", "v": 150}
				,"r3" : {"k": "jQuery", "s": "+", "v" : 135}
		}
		
		var tag = "<h1>인기 검색어 순위</h1><ul>";
		tag += "<li>" + keyworkdRank.r1.k + "("
					  + keyworkdRank.r1.s
					  + keyworkdRank.r1.v + ")";
		tag += "<li>" + keyworkdRank.r2.k + "("
					  + keyworkdRank.r2.s
					  + keyworkdRank.r2.v + ")";
		tag += "<li>" + keyworkdRank.r3.k + "("
					  + keyworkdRank.r3.s
					  + keyworkdRank.r3.v + ")";
		
		document.write(tag);
	</script>
</head>
<body>

</body>
</html>

7교시 (16:30-17:20)

literal_object_4.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<!-- jQuery CDN 불러오기 -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		
		var bbs = {
			 "title": "Javascript + jQuery + Ajax"
			,"description": "완벽 가이드"
			,"total": 4
			,"item":
				[
					 {"no": "공지", "subject": "강의자료 ", "hit": 4, "date": "2019.01.29"}
					,{"no": 3, "subject": "강의 자료 ", "hit": 6, "date": "2019.02.19"}
					,{"no": 2, "subject": "강의 자료 ", "hit": 15, "date":"2019.03.19"}
					,{"no": 1, "subject": "강의 자료 ", "hit": 19, "date": "2019.04.19"}
				]
			};
		
		alert(bbs);
		
		var html = "<h1>" + bbs.title + "</h1>";
			html += "<p>" + bbs.description + "</p>";
			html += "<p>총 게시물 수: " + bbs.total + "</p>";
			html += "<ul>";
			
		for (var i=0; i < bbs.item.length; i++){
			var item = bbs.item[i];
				html += "<li>("
							+ item.no + ")"
							+ item.subject
							+ "(조회수: " 
							+ item.hit
							+ " / 날짜: " 
							+ item.date
						    +")</li>";					
		}
		
		html += "</ul>";
		
		document.write(html);
		
	</script>
</head>
<body>
</body>
</html>

literal_object_5.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>
	<!-- jQuery CDN 불러오기 -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
	
		var sayHello = {
				 "name": "javaScript"
				,"eng": function(){
							var console= document.getElementById("console");
							console.innerHTML = "Hello " + this.name;
							console.type.color = "#ff0000";
						}
				, "kor": function(){
							var console = document.getElementById("console");
							console.innerHTML = "안녕하세요 " + this.name;
							console.style.color = "#0000ff";
						}
		}
	</script>
</head>
<body>
	<h1>리터럴 객체 그룹화된 함수 호출</h1>
	<input type="button" value="sayEng" onclick="sayHello.eng()" />
	<input type="button" value="sayKor" onclick="sayHello.kor()" />
	<h1 id="console"></h1>
</body>
</html>

literal_object_6.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>
	<!-- JQuery CDN 불러오기 -->
	<script src="http://code.jquery.com/jquery-latestm.min.js"></script>
	<script type="text.javascript">
	</script>
</head>
<body>
	<h3>
		JSON.stringify() 메소드는 인수로 전달받은<br>
		자바스크립트 객체를 문자열로 변환하여 반환한다.
	</h3>
	<hr>
	<p id="json"></p>
	<script>
		// 자바스크립트 객체
		var dog = {name: "식빵", family: "웰시코기", age: 1, weight: 2.14};
		
		var data = JSON.stringify(dog); // 자바스크립트 객체를 문자열로 변환함
		document.getElementById("json").innerHTML = data;
	</script>
	<p><p>
	
	<h3>
		JSON.parse() 메소드는 JSON.stringify() 메소드와는<br>
		반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환합니다.
	</h3>
	<hr>
	<p id="json1"></p>
	<script>
		// JSON 형식의 문자열
		var data1 = '{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14}';
		
		var dog1 = JSON.parse(data1); // JSON 형식의 문자열을 자바스크립트 객체로 변환
		document.getElementById("json1").innerHTML = dog1 + "<br>";
		document.getElementById("json1").innerHTML += dog1.name + ", " + dog1.family;
	</script>
	
	<h3>
		자바스크립트의 toJSON() 메소드는 자바스크립트의 Date 객체의 데이터를<br>
		JSON 형식의 문자열로 변환하여 반환합니다.
	</h3>
	<hr>
	<p id="json2"></p>
	<script>
		var date = new Date();		// 자바스크립트 Date 객체
		var str = date.toJSON();	// Date 객체를 JSON 형식의 문자열로 변환
	
		document.getElementById("json2").innerHTML = date + "<br>";
		document.getElementById("json2").innerHTML += str;
	</script>
</body>
</html>

8교시 (17:30-18:30)

회의
- 스프링 팀 회의: 기능과 세션에 대한 논의
- 프로젝트 회의: 그룹웨어에 대한 조사
스프링 코드 버전업하기

Notes

728x90

저작자표시

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

22-06-02(목) 087일차 [JSON, EL, JSTL] 차트 시각화, EL 기초 (0)	2022.06.23
22-05-31(화) 086일차 [JSON] 인코딩과 JSON의 활용 (0)	2022.06.23
22-05-27(금) 084일차 [Spring Framework, Mybatis Framework] 결제창 띄우기 (0)	2022.06.22
22-05-26(목) 083일차 [Oracle, Spring Framework, Mybatis Framework] 좋아요 만들기 (0)	2022.06.22
22-05-25(수) 082일차 [Oracle, Spring Framework, Mybatis Framework] 댓글 만들기 (0)	2022.06.22

현재글22-05-30(월) 085일차 [JSON] JSON 형식과 활용

A New Life

22-05-30(월) 085일차 [JSON] JSON 형식과 활용

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

티스토리툴바

22-05-30(월) 085일차 [JSON] JSON 형식과 활용

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

관련글

티스토리툴바