5월 ~ 7월) 웹/ajax
63Day - data_one & data_two / clock_one & clock_two/ example_one & example_two / csv_one& csv_two/ xml_one & xml_two / json_one & json_two
첼로그
2023. 7. 4. 19:02
7월 4일 (63Day)
main > webapp)
data_one .jsp [실행문]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
#display {
width: 50%;
padding: 5px;
margin: 10px;
font-size: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>AJAX - 값 전달</h1>
<hr>
<div id="display">요청 웹프로그램에 대한 응답 결과 출력</div>
<div>
이름 : <input type="text" id="name">
<button type="button" id="getBtn">GET 방식의 요청</button>
<button type="button" id="postBtn">POST 방식의 요청</button>
</div>
<script type="text/javascript">
//[GET 방식의 요청] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
document.getElementById("getBtn").onclick=function() {
//입력태그의 입력값을 제공받아 저장
var name=document.getElementById("name").value;
//입력값 검증
if(name=="") {
document.getElementById("display").innerHTML="이름을 입력해 주세요.";
return;
}
//입력태그 초기화
document.getElementById("name").value="";
//XMLHttpRequest 객체를 생성하여 저장
var xhr=new XMLHttpRequest();
//XMLHttpRequest 객체의 준비상태가 변경될 때마다 호출될 이벤트 처리 함수 등록
xhr.onreadystatechange=function() {
if(xhr.readyState==4) {//XMLHttpRequest 객체에 응답결과가 전달된 경우
if(xhr.status==200) {//XMLHttpRequest 객체의 응답결과에 대한 상태코드가 [200]인 경우
//XMLHttpRequest 객체의 응답결과(HTML)를 이용하여 페이지의 태그 변경
document.getElementById("display").innerHTML=xhr.responseText;
} else {
alert("에러코드 = "+xhr.status);
}
}
}
//XMLHttpRequest 객체를 이용하여 웹프로그램을 GET 방식으로 요청
// => GET 방식으로 웹프로그램을 요청할 경우 질의문자열(QueryString)를 사용하여 값 전달
//문제점)질의문자열로 전달되는 값에 URL 주소로 표현 불가능한 문자가 존재할 경우 400 에러코드 발생 가능
//해결법)입력값을 부호화 처리하여 질의문자열로 전달
name=encodeURIComponent(name);
xhr.open("get", "data_two.jsp?name="+name, true);
xhr.send(null);
}
//[POST 방식의 요청] 태그를 클릭한 경우 호출되는 이벤트 처리 함수
document.getElementById("postBtn").onclick=function() {
//입력태그의 입력값을 제공받아 저장
var name=document.getElementById("name").value;
//입력값 검증
if(name=="") {
document.getElementById("display").innerHTML="이름을 입력해 주세요.";
return;
}
//입력태그 초기화
document.getElementById("name").value="";
//XMLHttpRequest 객체를 생성하여 저장
var xhr=new XMLHttpRequest();
//XMLHttpRequest 객체의 준비상태가 변경될 때마다 호출될 이벤트 처리 함수 등록
xhr.onreadystatechange=function() {
if(xhr.readyState==4) {//XMLHttpRequest 객체에 응답결과가 전달된 경우
if(xhr.status==200) {//XMLHttpRequest 객체의 응답결과에 대한 상태코드가 [200]인 경우
//XMLHttpRequest 객체의 응답결과(HTML)를 이용하여 페이지의 태그 변경
document.getElementById("display").innerHTML=xhr.responseText;
} else {
alert("에러코드 = "+xhr.status);
}
}
}
//XMLHttpRequest 객체를 이용하여 웹프로그램을 POST 방식으로 요청
// => send() 메소드의 매개변수를 이용하여 요청 웹프로그램에 값 전달
//문제점)send() 메소드를 이용하여 값을 전달할 경우 [multipart/form-data] 형식으로 값 전달
// => 요청 웹프로그램에서 request.getParameter() 메소드로 전달값 반환 불가능
//해결법)[application/x-www-form-urlencoded] 형식으로 값이 전달되도록 리퀘스트 메세지의 헤더 정보 변경
xhr.open("post", "data_two.jsp");//async 매개변수에 전달값이 생략된 경우 자동으로 [true]로 처리
//XMLHttpRequest.setRequestHeader(header, value) : XMLHttpRequest 객체를 이용하여
//웹프로그램 요청시 사용되는 리퀘스트 메세지의 헤더 정보를 변경하는 메소드
// => 리퀘스트 메세지 몸체부에 저장된 값이 문자데이타로 표현되도록 헤더 정보 변경
// => open() 메소드 호출 후 사용 가능
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name="+name);//리퀘스트 메세지 몸체부에 값을 저장하여 전달
}
</script>
</body>
</html>data_two .jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//POST 방식으로 요청하여 전달된 값에 대한 캐릭터셋 변경
request.setCharacterEncoding("utf-8");
//전달값을 반환받아 저장
String name=request.getParameter("name");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
<%=name %>님, 안녕하세요.
</body>
</html>
main > webapp)
clock_one .jsp [실행문]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
div {
font-size: 20px;
margin: 10px;
}
</style>
</head>
<body>
<h1>브라우저 캐싱</h1>
<hr>
<div>클라이언트 플렛폼의 현재 날짜와 시간은
<span id="clientTime">2023년 7월 4일 12시 22분 30초</span>입니다.</div>
<div>서버 플렛폼의 현재 날짜와 시간은
<span id="serverTime">2023년 7월 4일 12시 22분 30초</span>입니다.</div>
<script type="text/javascript">
//브라우저가 실행된 클라이언트 플렛폼의 현재 날짜와 시간을 제공받아 태그를 변경하는 함수
// => 브라우저가 실행된 클라이언트에 따라 다른 결과 제공 가능
function displayClientTime() {
var now=new Date();
var displayTime=now.getFullYear()+"년 "+(now.getMonth()+1)+"월 "+now.getDate()+"일 "
+now.getHours()+"시 "+now.getMinutes()+"분 "+now.getSeconds()+"초";
document.getElementById("clientTime").innerHTML=displayTime;
}
displayClientTime();
setInterval(displayClientTime, 1000);
//웹프로그램을 실행하는 서버 플렛폼의 현재 날짜와 시간을 제공받아 태그를 변경하는 함수
// => 서버 플렛폼의 날짜와 시간을 제공받아 사용하므로 모든 클라이언트에게 동일한 결과 제공
//문제점)동일한 웹프로그램을 지속적으로 요청한 경우 브라우저 캐싱 기능에 의해 서버에서
//제공된 응답결과가 아닌 기존 응답결과 재사용 - 최초 응답결과를 사용하여 응답 처리
//해결법-1)요청 웹프로그램의 URL 주소에서 질의문자열(QueryString)를 계속 변경하여 요청
//해결법-2)요청 웹프로그램의 응답결과가 브라우저 캐싱 기능으로 사용되지 않도록 무효화 처리
function displayServerTime() {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
document.getElementById("serverTime").innerHTML=xhr.responseText;
} else {
alert("에러코드 = "+xhr.status);
}
}
}
xhr.open("get", "clock_two.jsp");
//xhr.open("get", "clock_two.jsp?dummy="+new Date().getTime());
xhr.send(null);
}
displayServerTime();
setInterval(displayServerTime, 1000);
</script>
</body>
</html>
clock_two .jsp
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//request.getProtocol() : 웹프로그램을 요청할 때 사용한 통신규약(Protocol)을 반환하는 메소드
String protocol=request.getProtocol();
//프로토콜을 구분하여 브라우저 캐싱 기능을 사용하지 않도록 설정
if(protocol.equals("HTTP/1.0")) {
response.setDateHeader("Expires", -1);//캐싱 만료기간 설정
response.setHeader("Pragma", "no-cache");//캐싱 기능 비활성화 설정
} else if(protocol.equals("HTTP/1.1")) {
response.setHeader("Cache-control", "no-cache");//캐싱 기능 비활성화 설정
}
Date now=new Date();
SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy년 M월 d일 H시 m분 s초");
String displayTime=dateFormat.format(now);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<title>AJAX</title>
</head>
<body>
<%=displayTime %>
</body>
</html>
값전달/ 캐싱기능 - 주의
main > webapp)
example_one
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
#display {
width: 50%;
padding: 5px;
margin: 10px;
font-size: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>AJAX - 값 전달</h1>
<hr>
<div id="display">요청 웹프로그램에 대한 응답 결과 출력</div>
<table>
<tr>
<td>아이디</td>
<td><input type="text" id="id"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td colspan="2">
<button type="button" id="btn">입력완료</button>
</td>
</tr>
</table>
<script type="text/javascript">
//[입력완료] 태그를 클릭한 경우 AJAX 기능을 사용하여 [example_two.jsp] 문서를 요청하여
//응답결과를 제공받아 태그 변경
// => [example_two.jsp] 문서를 요청할 때 사용자로부터 입력받은 아이디와 이름 전달
document.getElementById("btn").onclick=function() {
var id=document.getElementById("id").value;
if(id=="") {
document.getElementById("display").innerHTML="아이디를 입력해 주세요.";
return;
}
var name=document.getElementById("name").value;
if(name=="") {
document.getElementById("display").innerHTML="이름을 입력해 주세요.";
return;
}
document.getElementById("id").value="";
document.getElementById("name").value="";
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
document.getElementById("display").innerHTML=xhr.responseText;
} else {
alert("에러코드 = "+xhr.status);
}
}
}
/*
id=encodeURIComponent(id);
name=encodeURIComponent(name);
xhr.open("get", "example_two.jsp?id="+id+"&name="+name);
xhr.send(null);
*/
xhr.open("post", "example_two.jsp");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("id="+id+"&name="+name);
}
</script>
</body>
</html>
example_two
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String id=request.getParameter("id");
String name=request.getParameter("name");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
<%=name %>[<%=id %>]님, 환영합니다.
</body>
</html>
webapp > news)
csv_one.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- [csv_two.jsp] 문서를 AJAX 기능으로 요청하여 CSV 형식 데이타로 응답받아 태그를 변경하여
클라이언트에게 전달하여 응답하는 JSP 문서 --%>
<%-- => CSV 형식 데이타를 제공받아 HTML 태그로 변환하여 페이지 변경 - 파싱(Parsing) 처리 --%>
<%-- CSV(Comma Separated Values) : 콤마(,)를 사용하여 값을 구분하여 제공하는 비구조적인 데이타 표현 방식 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
#newsList {
width: 50%;
margin: 0 auto;
}
#newsHeader {
padding: 5px;
text-align: center;
font-size: x-large;
border: 2px solid black;
}
#newsContents {
padding: 5px;
font-size: medium;
border: 2px dashed black;
display: none;
}
</style>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr>
<div id="newsList">
<div id="newsHeader">오늘의 뉴스</div>
<div id="newsContents">
<%--
<ol>
<li>뉴스제목-1[언론사-1]</li>
<li>뉴스제목-2[언론사-2]</li>
<li>뉴스제목-3[언론사-3]</li>
<li>뉴스제목-4[언론사-4]</li>
<li>뉴스제목-5[언론사-5]</li>
</ol>
--%>
</div>
</div>
<script type="text/javascript">
document.getElementById("newsList").onmouseover=function() {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
//document.getElementById("newsContents").innerHTML=xhr.responseText;
//CSV 형식의 데이타를 제공받아 변수에 저장
var csv=xhr.responseText;
//CSV 형식의 데이타를 행(뉴스) 단위로 분리하여 Array 객체의 요소에 저장
var newsArray=csv.split("*");
//alert(newsArray.length);
var html="<ol>";
for(i=0;i<newsArray.length;i++) {
//행(뉴스)을 열(값 - 뉴스제목과 언론사) 단위로 분리하여 Array 객체의 요소에 저장
var news=newsArray[i].split("|");
var title=news[0].trim();//Array 객체(news)의 0번째 요소값 - 뉴스제목
var publisher=news[1].trim();//Array 객체(news)의 1번째 요소값 - 언론사
html+="<li>"+title+"["+publisher+"]</li>";
}
html+="</ol>";
document.getElementById("newsContents").innerHTML=html;
document.getElementById("newsContents").style="display: block;";
} else {
alert("에러코드 = "+xhr.status);
}
}
}
xhr.open("get", "csv_two.jsp");
xhr.send(null);
}
document.getElementById("newsList").onmouseout=function() {
document.getElementById("newsContents").style="display: none;";
}
</script>
</body>
</html>
csv_two.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 요청에 대한 실행결과를 CSV 형식의 데이타를 응답하는 JSP 문서 --%>
<%-- => 뉴스 제목과 언론사를 , 대신 | 문자를 사용하여 구분 --%>
<%-- => 뉴스와 뉴스는 엔터(Enter) 대신 * 문자를 사용하여 구분 --%>
손예진 출산 후 첫 근황, 공항 런웨이 만 여전한 청순美|OSEN*
최수종♥하희라 子민서, 90도 인사하는 훈남…"바라만 봐도 배불러"|마이데일리*
'키 187cm' 박성웅 "친형은 192cm, 부모님이 잘 만들어주셨다"|엑스포츠뉴스*
강경준♥장신영 아들 정우, 배우 DNA 그대로 물려받았네|뉴스엔*
'재벌집 막내아들'로 자신감 찾고 '닥터 차정숙'으로 웃은 SLL, "대중성 잡을 것"|텐아시아
webapp > news)
xml_one .jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- [xml_two.jsp] 문서를 AJAX 기능으로 요청하여 XML 형식 데이타로 응답받아 태그를 변경하여
클라이언트에게 전달하여 응답하는 JSP 문서 --%>
<%-- => XML 형식 데이타를 제공받아 HTML 태그로 변환하여 페이지 변경 - 파싱(Parsing) 처리 --%>
<%-- XML(eXtensible Markup Language) : 엘리먼트(태그)를 사용하여 값을 구분하여 제공하는 구조적인 데이타 표현 방식 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
#newsList {
width: 50%;
margin: 0 auto;
}
#newsHeader {
padding: 5px;
text-align: center;
font-size: x-large;
border: 2px solid black;
}
#newsContents {
padding: 5px;
font-size: medium;
border: 2px dashed black;
display: none;
}
</style>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr>
<div id="newsList">
<div id="newsHeader">오늘의 뉴스</div>
<div id="newsContents">
<%--
<ol>
<li>뉴스제목-1[언론사-1]</li>
<li>뉴스제목-2[언론사-2]</li>
<li>뉴스제목-3[언론사-3]</li>
<li>뉴스제목-4[언론사-4]</li>
<li>뉴스제목-5[언론사-5]</li>
</ol>
--%>
</div>
</div>
<script type="text/javascript">
document.getElementById("newsList").onmouseover=function() {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
//XMLHttpRequest.responseXML : 웹프로그램 요청에 대한 실행결과를 XML 문서로
//응답받은 경우 응답결과가 저장된 프로퍼티 - XMLDocument 객체 제공
//document.getElementById("newsContents").innerHTML=xhr.responseXML;
var xmlDoc=xhr.responseXML;
//alert(xmlDoc);//[object XMLDocument]
//Document.getElementsByTagName(tagName) : Document 객체(Element 객체)에서
//태그명으로 태그를 검색하여 검색된 모든 태그(Element 객체)가 요소로
//저장된 NodeList 객체(HTMLCollection 객체)를 반환하는 메소드
var newsList=xmlDoc.getElementsByTagName("news");
//alert(newsList);//[object HTMLCollection]
//alert(newsList.length);
var html="<ol>";
for(i=0;i<newsList.length;i++) {
//NodeList.item(index) : NodeList 객체에서 index 위치의 요소값(Element 객체)을 반환하는 메소드
var news=newsList.item(i);
//alert(news);//[object Element]
var title=news.getElementsByTagName("title").item(0).firstChild.nodeValue;
var publisher=news.getElementsByTagName("publisher").item(0).firstChild.nodeValue;
html+="<li>"+title+"["+publisher+"]</li>";
}
html+="</ol>";
document.getElementById("newsContents").innerHTML=html;
document.getElementById("newsContents").style="display: block;";
} else {
alert("에러코드 = "+xhr.status);
}
}
}
xhr.open("get", "xml_two.jsp");
xhr.send(null);
}
document.getElementById("newsList").onmouseout=function() {
document.getElementById("newsContents").style="display: none;";
}
</script>
</body>
</html>
xml_two .jsp
<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 요청에 대한 실행결과를 XML 형식의 데이타를 응답하는 JSP 문서 --%>
<%-- => 엘리먼트(태그)를 사용하여 값을 구분하여 표현 --%>
<newsList>
<news>
<title>손예진 출산 후 첫 근황, 공항 런웨이 만 여전한 청순美</title>
<publisher>OSEN</publisher>
</news>
<news>
<title>최수종♥하희라 子민서, 90도 인사하는 훈남…"바라만 봐도 배불러"</title>
<publisher>마이데일리</publisher>
</news>
<news>
<title>'키 187cm' 박성웅 "친형은 192cm, 부모님이 잘 만들어주셨다"</title>
<publisher>엑스포츠뉴스</publisher>
</news>
<news>
<title>강경준♥장신영 아들 정우, 배우 DNA 그대로 물려받았네</title>
<publisher>뉴스엔</publisher>
</news>
<news>
<title>'재벌집 막내아들'로 자신감 찾고 '닥터 차정숙'으로 웃은 SLL, "대중성 잡을 것"</title>
<publisher>텐아시아</publisher>
</news>
</newsList>
webapp > news)
json_one
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- [json_two.jsp] 문서를 AJAX 기능으로 요청하여 JSON 형식 데이타로 응답받아 태그를 변경하여
클라이언트에게 전달하여 응답하는 JSP 문서 --%>
<%-- => JSON 형식 데이타를 제공받아 HTML 태그로 변환하여 페이지 변경 - 파싱(Parsing) 처리 --%>
<%-- JSON(JavaScrip Object Notation) : 자바스트립트의 객체 표현 방식을 사용하여 값을 구분하는 구조적인 데이타 표현 방식 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
#newsList {
width: 50%;
margin: 0 auto;
}
#newsHeader {
padding: 5px;
text-align: center;
font-size: x-large;
border: 2px solid black;
}
#newsContents {
padding: 5px;
font-size: medium;
border: 2px dashed black;
display: none;
}
</style>
</head>
<body>
<h1>헤드라인 뉴스</h1>
<hr>
<div id="newsList">
<div id="newsHeader">오늘의 뉴스</div>
<div id="newsContents">
<%--
<ol>
<li>뉴스제목-1[언론사-1]</li>
<li>뉴스제목-2[언론사-2]</li>
<li>뉴스제목-3[언론사-3]</li>
<li>뉴스제목-4[언론사-4]</li>
<li>뉴스제목-5[언론사-5]</li>
</ol>
--%>
</div>
</div>
<script type="text/javascript">
document.getElementById("newsList").onmouseover=function() {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
//document.getElementById("newsContents").innerHTML=xhr.responseText;
//eval(text) : 매개변수로 전달받은 문자값을 자바스트립트 명령을 실행하는 함수
// => JSON 형식의 데이타를 전달받아 자바스크립트 객체로 변환
//var result=eval("("+xhr.responseText+")");
//JSON.parse(json) : 매개변수로 전달받은 JSON 형식의 데이타를 자바스크립트
//객체로 변환하여 반환하는 메소드
var result=JSON.parse(xhr.responseText);
//alert(result);//[object Object],[object Object],[object Object],[object Object],[object Object] - Array 객체
var html="<ol>";
for(i=0;i<result.length;i++) {
var title=result[i].title;
var publisher=result[i].publisher;
html+="<li>"+title+"["+publisher+"]</li>";
}
html+="</ol>";
document.getElementById("newsContents").innerHTML=html;
document.getElementById("newsContents").style="display: block;";
} else {
alert("에러코드 = "+xhr.status);
}
}
}
xhr.open("get", "json_two.jsp");
xhr.send(null);
}
document.getElementById("newsList").onmouseout=function() {
document.getElementById("newsContents").style="display: none;";
}
</script>
</body>
</html>
json_two
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 요청에 대한 실행결과를 JSON 형식의 데이타를 응답하는 JSP 문서 --%>
<%-- => 크롬(Chrome) 웹스토어에서 JSON Viewer 프로그램을 브라우저에 설치하여 실행 --%>
[{"title":"손예진 출산 후 첫 근황, 공항 런웨이 만 여전한 청순美","publisher":"OSEN"}
,{"title":"최수종♥하희라 子민서, 90도 인사하는 훈남…\"바라만 봐도 배불러\"","publisher":"마이데일리"}
,{"title":"'키 187cm' 박성웅 \"친형은 192cm, 부모님이 잘 만들어주셨다\"","publisher":"엑스포츠뉴스"}
,{"title":"강경준♥장신영 아들 정우, 배우 DNA 그대로 물려받았네","publisher":"뉴스엔"}
,{"title":"'재벌집 막내아들'로 자신감 찾고 '닥터 차정숙'으로 웃은 SLL, \"대중성 잡을 것\"","텐아시아":"OSEN"}]
.parse(요청하기위해 ) / string pet (전달할때)
json을 sm 파싱하는것 중요