[API] 주소 검색 - 행정안전부 API 사용하기[API] 주소 검색 - 행정안전부 API 사용하기

Posted at 2019. 11. 20. 10:34 | Posted in API/우편번호




참고 : https://www.juso.go.kr/addrlink/devAddrLinkRequestGuide.do?menu=roadApi





■ 주소 검색 API(한국지역정보개발원) 발급받기

 



API를 발급받기 위해서는 https://www.juso.go.kr/addrlink/devAddrLinkRequestWrite.do?returnFn=write&cntcMenu=URL 페이지에 접속한다.






오픈 API 신청 페이지에 접속하면


위와같이 사용할 항목을 선택하고.


신청하기 버튼을 클릭한다.







API를 사용하기 위해서는 본인인증 과정이 필요하다.

(개발용 7일 - 본인 미인증도 가능)







본인 인증 절차가 마무리 되면 위와 같이 API 키가 생성된 것을 확인 할 수 있다.













■ 주소 검색 API(JavaScript, jQuery) - 샘플코드




한국지역정보개발원에서 제공하는 도로명주소 API는 JSON 형태로 데이터를 제공해 준다.


제공하는 예제소스에서는 PHP, JSP, ASP등의 샘플과 팝업창에 띄워서 사용할 수 있는 방법을 제공하지만.


필요한 JSON으로 데이터를 받을 수 있도록,


JavaScript와, jQuery Ajax를 통해 구현 할 수 있게끔 변경을 해 보았다.



# 소스코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>:: JUSO GO API ::</title>

<style type="text/css">

table { width:100%;border:1px solid #444444;border-collapse:collapse; }

th, td { border: 1px solid #444444; }

tr > td:first-child { text-align:center; }

div#wrap { display:none;border:1px solid #DDDDDD;width:500px;margin-top:5px;padding:5px; }

div#wrap > div { margin-top:10px;margin-left::5px;margin-right:5px;margin-bottom::5px; }

div#wrap a:link { color:#000000;text-decoration:none; }

div#wrap a:hover { color:#0000FF;text-decoration:underline; }

div#totoalOutcome { display:none; }

#closeBtn { float:right;margin-top:-5px;margin-right:-5px; }

#searchAddr { width:380px; }

#zipCode { text-align:center; }

#address, #detail { width:500px; }

</style>

<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script language="javascript">


/// @brief 주소검색창 - 키보드 Enter키 입력

function enterSearch() {

var evt_code = (window.netscape) ? event.which : event.keyCode;

if (evt_code == 13) {

event.keyCode = 0;

getAddr();

}

}


/// @brief 주소검색창 - 데이터 조회

function getAddr() {


// 적용예 (api 호출 전에 검색어 체크)

let keyword = document.getElementById("searchAddr");

if(!checkSearchedWord(keyword)) {

return;

}


jQuery.ajax({

  url : "http://www.juso.go.kr/addrlink/addrLinkApiJsonp.do"

, type : "POST"

, data : {

  confmKey : "발급받은 도로명 주소 API KEY"

, currentPage : document.getElementById("currentPage").value

, countPerPage : document.getElementById("countPerPage").value

, keyword : keyword.value

, resultType : "json"

}

, dataType : "jsonp"

, crossDomain : true

, success : function(jsonStr) {


jQuery("#list").html("");

let errCodejsonStr.results.common.errorCode;

let errDescjsonStr.results.common.errorMessage;


if(errCode == "0") {

if(jsonStr != null) {

makeListJson(jsonStr);

}

} else {

alert(errDesc);

}

}

, error : function(xhr, status, error) {

alert("에러발생");

}

});

}


/// @brief 주소검색창 - 주소지 선택

function makeListJson(jsonStr) {


let htmlStr = "<thead><tr><th style='width:70px;'>우편번호</th><th>주소</th></tr></thead><tbody>";


if(jsonStr.results.common.totalCount > 0) {


jQuery("#totoalOutcome").css("display", "block");

jQuery("#totalCnt").html(jsonStr.results.common.totalCount);


jQuery(jsonStr.results.juso).each(function() {


let zipNo = this.zipNo;                  // 우편번호

let roadAddr = this.roadAddr;        // 도로명 주소

let jibunAddr = this.jibunAddr;       // 지번 주소


htmlStr += "<tr>";

htmlStr += "<td>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+roadAddr+"\");'>";

htmlStr += zipNo;

htmlStr += "</a>";

htmlStr += "</td>";

htmlStr += "<td>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+roadAddr+"\");'>";

htmlStr += "도로명 : " + roadAddr;

htmlStr += "</a>";

htmlStr += "<br/>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+jibunAddr+"\");'>";

htmlStr += "지번 : " + jibunAddr;

htmlStr += "</a>";

htmlStr += "</td>";

htmlStr += "</tr>";

});


pageMake(jsonStr);


} else {

htmlStr += "<tr><td colspan='2'>조회된 데이터가 않습니다.<br/>다시 검색하여 주시기 바랍니다.</td></tr>";

}


htmlStr += "</tbody>";

jQuery("#list").html(htmlStr);

}


/// @brief 주소검색창 - 주소지 삽입

function inputTextAddress(zipcode, address) {

document.getElementById("zipCode").value = zipCode;

document.getElementById("address").value = address;

}


/// @brief 주소검색창 - 열기

function addressWindowOpen() {

jQuery("#wrap").slideDown();

jQuery("#searchAddr").focus();

}


/// @brief 주소검색창 - 닫기

function addressWindowClose() {

jQuery("#wrap").slideUp();

jQuery("#searchAddr").val("");

jQuery("#totoalOutcome").css("display", "none");

jQuery("#list").empty();

jQuery("#pagingList").empty();

jQuery("#currentPage").val("1");

}


/// @brief 주소검색창 - 특수문자 제거

function checkSearchedWord(obj) {


if(obj.value.length > 0) {


// 특수문자 제거

var expText = /[%=><]/;


if(expText.test(obj.value) == true) {

alert("특수문자를 입력 할수 없습니다.") ;

obj.value = obj.value.split(expText).join("");

return false;

}


// 특정문자열(sql예약어의 앞뒤공백포함) 제거

var sqlArray = new Array(

  "OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE"

  , "DROP", "EXEC", "UNION",  "FETCH", "DECLARE", "TRUNCATE"

);

// sql 예약어


var regex = "";

for(var num = 0num < sqlArray.lengthnum++) {


regex = new RegExp(sqlArray[num], "gi") ;


if(regex.test(obj.value)) {

alert("\"" + sqlArray[num]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");

obj.value = obj.value.replace(regex, "");

return false;

}

}

}

return true ;

}


/// @brief 주소검색창 - 페이징 생성

function pageMake(jsonStr) {


var totaljsonStr.results.common.totalCount; // 총건수

var pageNum = document.getElementById("currentPage").value; // 현재페이지

                var pageBlock = Number(document.getElementById("countPerPage").value); // 페이지당 출력 개수

var paggingStr = "";


// 검색 갯수가 페이지당 출력갯수보다 작으면 페이징을 나타내지 않는다.

if(total > pageBlock) {


var totalPages = Math.floor((total - 1) / pageNum) + 1;

var firstPage = Math.floor((pageNum1) / pageBlock) * pageBlock + 1;


if(firstPage <= 0) { firstPage1; };


var lastPage = (firstPage1) + pageBlock;


if(lastPagetotalPages) { lastPage = totalPages; };

var nextPagelastPage + 1;

var prePage = firstPage - pageBlock;


if(firstPage > pageBlock) {

paggingStr += "<a href='javascript:;' onClick='goPage(" + prePage + ");'>◀</a>";

paggingStr += "&nbsp;";

}


for(let num = firstPage; lastPage >= numnum++) {

if(pageNum == num) {

paggingStr += "<a style='font-weight:bold;color:#0000FF;' href='javascript:;'>" + num + "</a>";

paggingStr += "&nbsp;";

} else {

paggingStr += "<a href='javascript:;' onClick='goPage(" + num + ");'>" + num + "</a>";

paggingStr += "&nbsp;";

}

}


if(lastPage < totalPages) {

paggingStr += "<a href='javascript:;' onClick='goPage(" + nextPage + ");'>▶</a>";

}

}


                jQuery("#pagingList").html(paggingStr);

}


/// @brief 페이징 이동

function goPage(pageNum) {

document.getElementById("currentPage").value = pageNum;

getAddr();

}

</script>

</head>

<body>

<h1>■ 행정안정부 - 주소 검색 API</h1>

<hr/>

현재 페이지 : <input type="number" id="currentPage" value="1" style="text-align:center;"/>

<div style="height:5px;"></div>

페이지당 출력 개수 : <input type="number" id="countPerPage" value="5" style="text-align:center;"/>

<hr/><br/>

<input type="text" id="zipCode" value="" onClick="addressWindowOpen();" placeholder="00000" readonly/>

<input type="button" onClick="addressWindowOpen();" value="우편번호 찾기"/>

<div id="wrap">

<img id="closeBtn" src="./close_box_red.png" onClick="addressWindowClose();"/>

<div>

<input type="text" id="searchAddr" value="" onkeydown="enterSearch();" placeholder="도로명주소, 건물명 또는 지번 입력"/>

<input type="button" onClick="getAddr();" value="주소검색"/>

</div>

<div>

<div id="totoalOutcome">

검색결과 : <span id="totalCnt">0</span>

</div>

<table id="list"></table>

</div>

<div id="pagingList" style='text-align:center;'></div>

</div>

<div style="height:5px;"></div>

<input type="text" id="address" value="" placeholder="도로명 주소, 지번 주소" readonly/>

<div style="height:5px;"></div>

<input type="text" id="detail" value="" placeholder="상세 주소지 입력"/>

</body>

</html>




# 출력결과





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] AJAX 통신 정리[JavaScript] AJAX 통신 정리

Posted at 2019. 11. 17. 22:35 | Posted in JavaScript & jQuery/JavaScript




참고① : 하루 10분씩 핵심만 골라 마스터하는 Ajax 핸드북

참고② : Ajax 시작하기 





전통적인 방식의 사이트들을 이용할 때에는 텍스트와 그림, 데이터 입력 폼(Form) 등이 하나의 페이지 단위로 처리되었다.


각각의 페이지들도 다른 페이지로 이동하기 전에는 페이지 전체가 하나의 독립된 페이지로 처리되었다.



예를 들면, 폼의 데이터 입력 필드에 값을 기록하고 또 수정하는 등의 작업을 하더라도 우리가 전송 버튼을 누르기 전에는


어떠한 내용도 서버에 보내지 않는다.



입력된 폼을 전송하거나 링크를 통해서 다른 곳으로 이동할 때,


사용자는 반드시 새로운 페이지가 서버로부터 전송되어 화면에 업데이트될 때까지 기다려야 한다.







■ AJAX에 대하여




사용자 경험을 위해서 기존의 페이지 방식의  디자인에서 몇 가지 기능을 추가해야 한다.


그것은 사용자의 행동에 따라 변화된 내용으로 응답이 이루어져야 하고,


화면이 지워지고 페이지가 다시 로드되는 등의 방해 없이 업데이트가 이루어져야 한다.


이를 위해서, Ajax는 웹 페이지와 서버 간에 별도의 처리 단계를 둔다.





이 층(Layer)을 Ajax 엔진이나, Ajax 프레임워크라고 하는데,


사용자의 요청을 가로채서, 서버와의 통신을 뒤에서 비동기적(Asynchronously)으로 조용하고 묵묵히 처리한다.


이는 서버 요청과 응답이 더 이상 사용자의 특정한 요청에 의해서 동시에 일어나는 것이 아니라,


사용자나 어플리케이션에 알맞은 시간에 어느 때나  일어날 수 있다는 말이다.


브라우저는 마지막 요청에 대한 응답을 무작정 멈춰서 기다리지 않고,


사용자가 스크롤하거나, 마우스로 클릭하거나 글을 입력하는 등의 일을 하도록 한다.




새로 변경된 정보를 받아서 페이지의 일부를 수정하는 일도 AJAX를 거쳐 이루어진다.


물론 이 일을 하는 중에도 페이지는 여전히 사용 가능하다.









■ AJAX의 동작 원리




새로운 AJAX 어플리케이션을 개발한다거나 기존 웹 어플리케이션에 AJAX를 추가한다고 가정해보면


먼저 어떤 페이지 이벤트와 사용자 입력을 비동기 HTTP 요청을 통해 처리할 것인지를 결정할 필요가 있다.


예를 들어, 어떤 그림의 onMouseOver 이벤트가 발생했을 때,


서버로 그 그림에 대한 자세한 정보를 요청할 수도 있다.


예를 들어, 어떤 그림의 onMouseOver 이벤트가 발생했을 경우,


서버로 그 그림에 대한 자세한 정보를 요청할 수도 있다.


또는 버튼의 onClick 이벤트가 발생했을 때, 폼의 어떤 필드를 확장할 것인지에 대한 정보를 서버에 요청할 수도 있다.



앞으로 작성할 AJAX 어플리케이션에서는 이러한 이벤트 핸들러들이 비동기 HTTP 요청을 생성하고


XMLHTTPRequest를 통해서 보내는 일을 하도록 해야 한다.



요청(Request)을 보냈다면, 그 요청의 진행 상태를 감시하기 위한 루틴을 작성해야 하고,


서버로부터 요청이 성공적으로 처리되었다는 것을 확인해야 한다.







마지막으로 서버로부터 처리된 응답을 받으면, 그 응답을 받아서 정보를 처리하는 루틴을 작성하고,


어플리케이션에 반영하는 일을 해야 한다.


예를 들면, 새로받은 데이터를 웹 페이지의 본문 내용을 업데이트하는 데 사용하거나,


팝업창을 나타내거나, 폼의 필드를 추가하는 등의 일이 그것이다.








■ XMLHTTPRequest 객체



하이퍼링크를 클릭하거나 폼의 전송 버튼을 누를 때, 브라우저는 서버에게 HTTP 요청(Request)을 보낸다.


그러면 서버는 새로운 페이지나 수정된 페이지를 사용자에게 다시 보낸다.


그러나 비동기적으로 동작하는 웹 어플리케이션에서는 서버에게 화면을 새롭게 갱신하지 않는 성질의 요청을 보낼 필요가 있다.



이를 위해서 XMLHTTPRequest 객체를 이용해야 한다.


이 자바스크립트 객체는 서버에 연결하고 HTTP 요청을 새로운 페이지 로드 없이 보낼 수 있게 한다.



Tip.


  보안을 위해 XMLHTTPRequest 객체는 일반적으로 페이지와 같은 도메인에 있는 URL로만 명령을 내릴 수 있고,

  외부 서버로의 직접 호출은 할 수 없다.

       



XMLHTTPRequest 객체는 실질적으로 현재 사용되는 모든 웹 브라우저에서 지원된다.


인터넷 익스플로러 5.0이상 버전과 모질라 파이어폭스, 구글 크롬, 오페라, 사파리등이 모두 지원한다.


또안 MS 윈도우즈는 물론이고, UNIX / Linux, Mac OS X 등의 플랫폼에서 위에서 나열한 브라우저들을 이용해서 사용할 수 있다.



XMLHTTPRequest 객체의 목적은 자바스크립트가 HTTP 요청을 생성하고 서버로 전송하는 것이다.


전통적인 웹 어플리케이션은 이러한 요청을 동기적으로 수행했다.


이는 사용자가 클릭하거나 폼을 전송하면, 그에 따라서 새로운 페이지가 브라우저로 전송되는 방식이다.



XMLHTTPRequest 객체를 이용하면 이러한 서버 호출을 배후에서 비동기적으로 수행할 수 있다.


이는 웹 페이지 전체가 새롭게 로드되는 등의 방해없이 계속 사용할 수 있을을 의미한다.



이러한 기능은 모든 Ajax 어플리케이션에서 기초가 되는 개념이고,


XMLHTTPRequest가 Ajax 프로그래밍의 핵심인 이유이다.





#01. XMLHTTPRequest 객체의 속성


속성(Properties)

내   

 onreadystatechange

 · 객체의 readyState 속성이 변경될 때 어떤 이벤트 처릴르 호출할지를 결정한다.

 readyState

 · 요청(Request)에 대한 상태를 나타내는 정수값

   0 = 초기화되지 않음

   1 = 로드 중( Loading )

   2 = 로드 됨( Loaded )

   3 = 상호작용( Interactive )

   4 = 완료됨( Completed )

 responseText

 · 서버로부터 리턴된 데이터(문자형식)

 responseXML

 · 서버로부터 리턴된 문서 객체 형식의 XML 데이터

 status

 · 서버가 리턴한 HTTP 상태 코드

 statusText

 · 서버가 리턴한 HTTP 상태 설명



#02. XMLHTTPRequest 메소드


메소드(Methods)

설   명 

 abort( )

 · 현재 요청을 취소함

 getAllResponseHeaders( )

 · 모든 헤더 정보를 문자열로 얻어냄

 getResponseHeader( × )

 · 헤더 ×의 내용을 문자열로 얻어냄

 open( "method", "URL", "A" )

 · HTTP 명령(GET, POST 등)과 그 대상 URL을 통해서 HTTP 요청을 비동기적으로 처리할지를 나타냄

  ( A에 true(기본값)를 넣으면 비동기적으로 동작하고, false는 동기적으로 동작한다. )

 send( CONTENT )

 · 요청을 보냄 POST의 내장 데이터도 필요할 경우 보낼 수 있음

 setRequestHeader( "x", "y" )

 · 요청을 보낼 때 추가적인 파라미터를 지정하기 위한 메소드.

 · x=y 쌍으로 된 파라미터를 헤더에 추가하는 기능을 한다.




① open( ) 메소드


open( ) 메소드를 이용해서 XMLHTTPRequest 객체가 서버와 통신하기 위한 준비과정을 진행한다.


최소한 2개의 인자는 필수적으로 넘겨야 한다.


 -. 첫째. 어떤 HTTP 명령을 사용할 것인지 여부인데, GET 또는 POST를 많이 사용할 것이다.


 -. 둘째. 요청을 보낼 대상 URL이다.

    GET 쵸엉을 보낸다면, URL에 파라미터에 대한 내용이 인ㅌ코딩되어 URL에 포함된 상태여야 한다.



보안상의 이유로 XMLHTTPRequest 객체는 같은 도메인 내에서만 통신할 수 있다.


외부의 도메인에 접근하고자 할 때는 권한이 없다는 에러 메시지인 "permission denied"를 받게 된다.


 -. 셋째. open( ) 요청에 세번째 인자는 Bool-ean 값으로, 보내는 요청이 비동기적으로 이루어질 것인지를 나타낸다.

    false로 설정하면, 서버로 보내는 요청은 동기적으로 처리도리 것이기 때문에 응아답이 올 때까지 화면은 응답하지 않는 잠김 상태가 된다.

    기본값인 true를 넣거나 인자를 생략하면, 요청은 비동기적으로 처리된다.




②  send( ) 메소드


open( ) 메소드를 이용해서 XMLHTTPRequest를 준비한 후에, 실제 요청을 보내기 위해서 send( ) 메소드를 사용한다.


send( ) 함수는 한 개의 인자를 받는다.



보낼 요청이 GET 형식이라면, 요청 정보가 URL 안에 인코딩된 값이 포함되므로, 인자는 null 인자를 넣어서 호출하면 된다.


GET방식

 objectname.send( null );



그러나 POST 형식의 경우는 요청 내용을 인코딩한 후 이 메소드의 인자로 넘겨야 한다.



POST방식

 objectname.setRequestHeader("Content-Type", "application/x-www-from-urlencoded");

 objectname.send(var1=value1&var2=value2);




이 경우는 setRequestHeader 메소드를 호출해서 요청 내용이 어떤 종류의 데이터를 가지고 있는지를


HTTP 요청 헤더에 기록하게 된다.

 









■ AJAX를 이용하여 XML 데이터 출력하기




# 소스코드 - XML 데이터 생성

 tell_time_xml.php

<?php

header("Content-Type:text/xml");

echo "<?xml version='1.0'?>";

echo "<clock>";

echo "<timeNow>";

echo date("Y-m-d H:i:s");

echo "</timeNow>";

echo "</clock>";

?>




# 소스코드 - AJAX 호출 영역

 ajax_application.html

<html>

<head>

<meta charset="UTF-8">

<title>:: Ajax Demonstration ::</title>

<style type="text/css">

body { text-align:center; }

#showTime {

display:inline-block;

width:250px;

background-color:#FFFFFF;

border:2px solid #000000;

padding:10px;

font:24px normal verdana, helvetic, arial, sans-serif;

}

</style>

<script language="JavaScript" type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

// HTML 실행이 완료되었을 경우 getServerTime( ) 함수를 실행한다.

getServerTime();

});

function getXMLHTTPRequest() {

let request = false;

// 브라우저(FireFox, Chrome)에 맞는 생성자를 이용해서 객체의 인스턴스를 생성

try {

request = new XMLHttpRequest();

}

// 객체가 존재하지 않는경우 MS방식의 브라우저 이므로 ActiveX객체를 검사하고 생성하는 작업을 수행한다.

catch(err01) {

try {

request = new ActiveXObject("Msxml2.XMLHTTP"); // some versions IE

}

catch(err02) {

try {

request = new ActiveXObject("Microsoft.XMLHTTP"); // some versions IE

}

catch(err03) {

request = false;

}

}

}

return request;

}

// XMLHTTPRequest 객체를 생성하여 http라는 전역 변수에 담아 필요할때 바로 사용한다.

let http = getXMLHTTPRequest();

function getServerTime() {

// xml 형태의 시간정를 가지고 있는 URL 정보

let xmlUrl = "tell_time_xml.php";

// XMLHTTPRequest 객체가 서버와 통신하기 위한 준비과정을 진행한다.

                // true : 비동기, false : 동기

http.open("GET", xmlUrl, true);


                // onreadystatechange 메소드는 useHttpResponse( ) 함수를 호출한다.

                // 해당 함수를 수행하는 것이 아니라 단순하게 어떤 함수가 불릴 것인지만 지정한다.

                // 단순하게 그 함수를 지정하는 것이므로 그 함수로 어떠한 변수도 전달하지 않는다. ( 괄호사용× )

                // 또한 단순하게 함수를 연결하면 되기 때문에 함수 본체를 기입해도 된다.

http.onreadystatechangeuseHttpResponse;

// .open( ); 메소드를 이용해서 XMLHTTPRequest를 준비된 내용을 가지고,

// 서버에 실제 요청을 보내기위해 .send( ); 메소드를 사용한다. 

http.send(null);

}

function useHttpResponse() {

// readyState값이 4인경우 완료됨을 의미한다.

if(http.readyState == 4) {

// HTTP 응답이 "OK"인 경우

if(http.status == 200) {

var timeValue = http.responseXML.getElementsByTagName("timeNow")[0];

document.getElementById("showTime").innerHTML = timeValue.childNodes[0].nodeValue;

}

else {

// 서버가 리턴한 http 상태를 설명한다.

        // statusText 의 기본값은 'OK' 이다. 

alert("An error has occurred : " + http.statusText);

}

}

// 완료되지 않은경우 버퍼링 이미지를 노출한다.

else {

document.getElementById("showTime").innerHTML = "<img src='http://gph.is/1XRTmuh' style='width:100%;'>";

}

}

</script>

</head>

<body style="background-color:#CCCCCC">

<h1>Ajax Domonstration</h1>

<h2>Getting the server time without page refresh</h2>

<form>

<input type="button" value="Get Server Time" onClick="getServerTime();"/>

</form>

<div id="showTime"></div>

</body>

</html>



# 출력결과









■ AJAX를 이용한 JSON 데이터 전송 및 출력




위와같이 자바스크립트를 통한 Ajax 통신방법을 알아 보았다.


그렇지만 현업에서는 jQuery의 Ajax를 실제로 더 많이 사용하게 되고.


필자또한 jQuery의 Ajax기능을 안쓰고 비동기 이벤트를 구현한다는것은 거의 상상하기도 힘들었다.


jQuery를 안쓰는 추세라곤 하지만, 필자의 생각은 역시 완전히 jQuery가 사라지기에는


적어도 필자의 개발을 하는 가운데서는 아마도 이루어지 지지 않을것이라고 생각한다.


그런데도 위와같이 자바스크립트를 통한 Ajax 통신 방법을 따로 정리하는 이유는


jQuery가 앞도하던 시장에서 Vue.js React.js Angular.js 등이 각광받고 있지만.


결국 JavaScript로 구현 가능하다면,


기초와 기본에 충실하게 사용할 수 있어 프론트개발자의 길에 흠들림의 여파를 줄이고 싶었기 때문이기도 하다.




# 소스코드 - JSON 데이터 전송 받고 JSON 형태로 내보내기

 tell_time_json.php

<?php

$RetVal = array("ret"=>"fail", "error"=>"", "error_msg"=>"", "message"=>"");

$backUrl = $_SERVER['HTTP_REFERER'];


// php://input은 내용의 유형에 관계없이 요청 HTTP 헤더 뒤에 모든 원시 데이터를 반환한다.

$data = json_decode(file_get_contents("php://input"), true);


switch($data['mode']) {


    case "timeIs" :


        $timestamp = mktime(

          $data['hour'] // 시간

        , $data['minute'] // 분

        , $data['second'] // 초

        , $data['month'] // 월

        , $data['day'] // 일

        , $data['year'] // 년도

        );

        

$RetVal['data']['date'] = date('Y-m-d H:i:s', $timestamp);

        $RetVal['ret'] = "success";


        print json_encode($RetVal);

        return;


    break;


    default :

   

    $RetVal['message'] = "데이터 조회 실패";

   

    print json_encode($RetVal);

        return;

        

    break;

}


header("location:".$backUrl);

?>



# 소스코드 - AJAX 호출(JSON 데이터 전송 및 파싱)

 ajax_application_post.html

<html>

<head>

<meta charset="UTF-8">

<title>:: Ajax Demonstration ::</title>

<style type="text/css">

body { text-align:center; }

#showTime {

display:inline-block;

width:250px;

background-color:#FFFFFF;

border:2px solid #000000;

padding:10px;

font:24px normal verdana, helvetic, arial, sans-serif;

}

</style>

<script language="JavaScript" type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

// HTML 실행이 완료되었을 경우 getServerTime 함수를 실행한다.

getServerTime('timeIs');

});

function getXMLHTTPRequest() {

let request = false;

try { request = new XMLHttpRequest(); }

catch(err01) {

try { request = new ActiveXObject("Msxml2.XMLHTTP"); }

catch(err02) { 

try { request = new ActiveXObject("Microsoft.XMLHTTP"); }

catch(err03) { request = false; }

}

}

return request;

}

const ajax = getXMLHTTPRequest();

function getServerTime(mode) {

// 서버로 전송할 데이터 생성

const toTime = new Date(); 

const arrData =  {

  "mode" : mode                                           // 실행조건

, "year" : toTime.getFullYear().toString()               // 년

, "minute" : (toTime.getMonth() + 1).toString()      // 월

, "day" : toTime.getDate().toString()                    // 일

, "hour" : toTime.getHours().toString()                 // 시

              , "minute" : toTime.getMinutes().toString()           // 분

, "second" :  toTime.getSeconds().toString()          // 초

};

// XMLHTTPRequest 객체가 서버와 통신하기 위한 준비과정을 진행한다.

ajax.open("POST", "/tell_time_json.php", true);

// send() 함수를이용해 POST 형식의 데이터를 넘기는 경우는

// setRequestHeader() 함수를 이용해 인코딩한 후 이 메소드의 인자로 넘겨야 한다.

ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8;");

// json 타입으로 변경하여 데이터를 전송한다.

ajax.sendJSON.stringify(arrData) );

ajax.onreadystatechange = function() {

if(ajax.readyState == 4) {

if(ajax.status == 200) {

// responseText 속성은 서버가 리턴한 정보를 텍스트 형식으로 가져온다.

const json = JSON.parse(ajax.responseText);

if(json.ret == "success") {

document.getElementById("showTime").innerHTML = json.data.date;

} else {

console.log(json.message);

}

}

else {

alert("An error has occurred : " + ajax.statusText);

}

} else {

document.getElementById("showTime").innerHTML = "<img src='http://gph.is/1XRTmuh' style='width:100%;'>";

}

};

}

</script>

</head>

<body style="background-color:#CCCCCC">

<h1>Ajax Domonstration</h1>

<h2>Getting the server time without page refresh</h2>

<form>

<input type="button" value="Get Server Time" onClick="getServerTime();"/>

</form>

<div id="showTime"></div>

</body>

</html>




# 출력결과




위의 GET 전송방식의 예제와 같은 결과 화면이 나오는 것을 확인 할 수 있다.









Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JAVA] Java의 역사와 JVM, 알아두어야 하는 상식[JAVA] Java의 역사와 JVM, 알아두어야 하는 상식

Posted at 2019. 11. 6. 19:04 | Posted in JAVA







■ 자바의 역사




자바의 역사는 1991년으로 거슬러 올라간다. 1991년에 "Green"이라는 프로젝트가 생기면서 자바의 모태가 탄생하기 시작했다.


제임스 고스링(James Gosling), 마이크 쉐리든(Mike Sheridan), 패트릭 노튼(Patrick Naughton) 이렇게 3명의 젊은이가


TV와 시청자가 서로 상호 작용을 하는(interactive 한) 것을 만들기 위해서 시작되었다.


지금은 IPTV와 같은 것이 대중화 되어 있지만, 그때만 해도 너무 앞서가는 것이었다.


1992년 고슬링의 사무실 앞에 있는 참나무를 보고 이름을 지은 "Oak"라는 언어다.



그 이후에 1995년 "Oak"라는 언어의 이름이 커피의 한 종류를 뜻하는 "자바 커피"의 이름을 본따 "Java"라고 바뀌면서 자바 기술이 시작하게 되었다.


1995년에 자바 언어를 만들면서 "Write Once, Run Anywhere(WORA)"라는 모토가 만들어졌으며,


여러 플랫폼에서 수행할 수 있는 개발 언어를 목표로 개발되었다.


1996년에 드디어 JDK 1.0이 출시되었으며, 그 이듬해 1997년에 출시한 JDK 1.1DMS 3주만에 22만 다운로드를 기록하면서 폭발적인 성장을 예견하게 되었다.


여기서 JDK라는 단어는 Java Development Kit의 약자다.



1998년 12월 J2SE라는 이름으로 자바의 기본 버전 명칭이 바뀌면서 J2SE 1.2가 출시되었다.


참고로 J2SE는 Java 2 Standard Edition의 약자이며 기존의 JDK를 의미하는 것이다.


왜 이렇게 이름이 바뀌었냐면, 기업 등에서 만드는 시스템을 개발하기 위한 J2EE라는 Enterprise Edition과


블랙베리와 같은 전화기에서 아직도 사용하고 있는 J2ME라는 Micro Edition과 혼동을 막기 위함이었다.



그 이후에 2000년 J2SE 1.3이, 우리나라에서 월드컵이 열린 2002년 J2SE 1.4가 출시되었다. 그리고 2004년 J2SE 5가 출시되었다.


J2SE 1.4 버전까지만 해도 버전 이름이 1.1 ~ 1.4까지 증가하였지만, J2SE 1.5 버전부터는 앞의 1.을 뺀 J2SE 5라고 불리게 되었다.


그 다음에 약간의 개선이 이루어진 Java SE 6가 2006년 출시되었다.


그리고, 2011년 오랜 기간동안의 업그레이드 준비를 마친 Java SE 7이 탄생되었다.



Java SE 6까지는 이제는 역사속으로 사라진 Sun Microsystems라는 회사에서


자바에 대한 주요 스팩을 만들고 Java를 만들어 왔지만, Java SE 7 부터는 Oracle이라는 회사가


Sun Microsystems를 인수하여 지금에 이르고 있다.




※ 자바의 표준 버전의 이름이 JDK, J2SE, Java SE로 변경되어 왔지만 일반적으로 JDK라고 통일하여 불리고 있다.









■ JDK, J2SE, Java SE 외에 자바에서 사용되는 다른 용어




앞서 설명한 각각의 용어는 다음의 약자다.



   ● JDK : Java Development Kit


   ● J2SE : Java 2 Standard Edition


   ● Java SE : Java Standard Edition



여기서 Java 2에서 빠진 것은 Java SE 6가 출시되면서 부터이며,


이렇게 빠진 이유는 마케팅을 위해서라기 보다 쉽게 자바를 부를 수 있도록 Java로 통칭했다고 한다.



그리고, 자바를 개발하기 위해서 설치를 하다 보면, JDK와 JRE로 분리되어 있는 것을 알고 있을 것이다.


여기서 각각의 용어는 다음을 의미한다.



   ● JDK : Java Development Kit


   ● JRE : Java Runtime Environment



각각의 이름에서 알 수 있듯이 JRE는 실행만을 위한 환경이다.


따라서, 이 JRE만 설치하면, 자바를 컴파일하는 등의 각종 프로그램이 제외된 상태로 설치된다.







가장 좌측을 보면 JDK와 JRE로 나뉘어져 있는 것을 볼 수 있다.


즉, JRE는 자바를 실행할 수 있는 환경의 집합이라고 보면 된다.


그리고, JRE에 있는 여러 가지 레고 블록처럼 칸칸이 쌓여 있는 것들은 자바에서 제공하는 라이브러리들이라고 보면 된다.











■ 자바 언어의 다섯가지 특징




#01. 자바는 "단순하고, 객체지향이며, 친숙"해야 한다.



지금 자바를 배우는 사람들은 자바가 단순하지 않은 언어라는 것을 알고 있다.


왜냐하면 수 많은 프레임웍들이 있고, 여러 관련된 사항들을 알아야 프로그램을 작성할 수 있기 때문이다.


(여기서 이야기 하는 단순한 이란 자바에 대한 기본 컨셉을 배우는 것이 어렵지 않다는 것을 의미한다.)




자바는 처음 만들 때부터 객체지향으로 디자인되어 있다.


그리고, 다형성, 캡슐화등 객체지향 언어의 특징들을 지원할 수 있는 구조로 되어 있다.


그리고 다형성, 캡슐화 등 객체지향 언어의 특징을 지원할 수 있는 구조로 되어 있다.


물론 개발하는 사람이 객체지향 프로그램을 작성하지 않으면 이러한 이점은 모두 사라진다.


다시 말해서, 자바를 쓴다고 해서 무조건 객체지향적으로 개발된다는 것은 아니다.




그리고, 자바로 개발할 때에는 처음부터 모든 것을 만들 필요가 없다.


개발하면서 필요한 여러 기능들은 이미 API를 통해제 제공하고 있다.


파일을 읽고 쓰거나 네트워크로 데이터를 주고 받는 I/O, 그래픽, UI등을 개발하기 위한 여러 라이브러리를 통해서


보다 쉽게 개발할 수 있는 환경을 제공한다.




#02. 자바는 "견고하며, 보안상 안전"하다.



자바는 컴파일 할 때와 실행할 때 문법적 오류에 대한 체크를 한다.


메모리 관리 모델이 매우 단순하고, C를 배우고 사용하는 개발자들의 머리를 아프게 하는 포인터의 개념이 없다.


이러한 특징들은 자바를 매우 믿을 수 있고, 견고한 소프트웨어가 될 수 있도록 도와준다.



자바는 기본적으로 분산 환경에서 사용하기 위해서 디자인 되었다.


분산 환경에서 보안은 매우 주용한 부분 중 하나다.


자바 기술은 외부에서 침입이 불가능한 애플리케이션을 만들 수 있도록 해준다.


네트워크 환경에서 클라이언트로 다운로드한 승인받지 않은 프로그램은 실행할 수 없도록 되어 있다.


따라서 바이러스를 생성하거나 파일 시스템을 공격할 수가 없다.




#03. 자바는 "아키텍처에 중립적이어야 하며 포터블"해야 한다.



자바로 작성한 프로그램은 매우 다양한 하드웨어 아키텍처에서 수행 할 수 있도록 되어 있다.


따라서 자바는 아키텍처에 중립적인 바이코드를 생성한다.


따러서, 자바의 버전만 동일하다면, 동일한 프로그램은 어떤 플랫폼에서도 실행 할 수 있다.



아키텍처 중립적이라는 말은 포터블한 시스템의 일부분일 뿐이다.


그래서, 기본 데이터 타입의 크기를 지정해 놓고, 숫자 연산자에 대한 행위들을 정의해 두었다.


따라서, 여러분들이 만드는 프로그램은 어떤 플랫폼에서도 동일한 결과가 나오며,


하드웨어와 소프트웨어 아키텍처에 따른 데이터 타입의 호환성에 문제가 발생하지 않는다.


이러한 호환성과 포터블한 환경을 제공하는 것은 JVM 덕분이다.




#04. 자바는 "높은 성능"을 제공해야 한다.



성능은 항상 고려를 하는 부분이다.


자바는 실행환경에서 최대한의 성능을 낼 수 있도록 되어 있다.


게다가 자동화된 가비지 컬렉터는 낮은 우선순위의 쓰레드로 동작하기 때문에 보다 높은 성능을 낼 수 있다.


그리고, 보다 빠른 성능을 위해서 네이티브한 언어로 작성한 부분을 자바에서 사용할 수도 있도록 되어 있다.

(자바가 이 세상에서 제일 빠른 언어라는 말은 아니다.)




#05. 자바는 "인터프리트 언어이며, 쓰레드를 제공하고, 동적인 언어"이다.



자바 인터프리터는 자바 바이트코드를 어떤 장비에서도 수행할 수 있도록 해준다.


따라서, 기존에 사용하던 무거운 컴파일과 링크와 테스트 사이클을 거쳐야 하는 개발환경보다 빠른 환경을 구축할 수 있다.



자바는 멀티 쓰레드 환경을 제공하기 때문에, 동시에 여러 작업을 수행할 수 있다.


따라서, 사용자에게 매우 빠른 사용 환경을 제공한다.



자바 컴파일러는 컴파일시 매우 엄격한 정적인 점검을 수행한다.


그리고, 실행시에 동적으로 필요한 프로그램을 링크시킨다.


게다가 새로운 코드는 다양한 소스에서 요청에 의해서 연결될 수 있다.



지금까지 간단하게 자바 언어의 특징에 대해서 살표보았다.


이러한 특징들은 자바 개발 초기에 정해진 것으로, 약간은 지금의 상황과 다른 부분이 있다.


하지만, 이 내용간의 근간은 달라지지 않고 계속 유지되고 있으므로, 기억해 두면 좋을 것이다.









■ JIT(Just-In-Time) 컴파일러란?




JIT라는 것은, Just-In-Time의 약자다.


JIT를 사용하는 언어에는 Java와, .NET 등이 있다. 즉, 자바에서만 사용하는 개념이 아니다.


JIT를 좀더 쉬운 말로 하면 "동적 변환(Dynamic Translation)"이라고 보면 된다.


이러한 JIT라는 것을 만든 이유는 프로그램 실행을 보다 빠르게 하기 위해서이다.


명칭이 컴파일러이지만, 실행시에는 적용되는 기술이다.



역사적으로 보면, 컴퓨터 프로그램을 실행하는 방식은 두가지로 나눌 수 있다.


하나는 인터프리터(Interpret) 방식이며, 다른 하나는 정적(Static) 컴파일 방식이다.



인터프리터 방식은 프로그램을 실행할 때마다 컴퓨터가 알아 들을 수 있는 언어로 변환하는 작업을 수행한다.


따라서, 간편하기는 하지만 성능이 매우 느릴 수 밖에 없다.



정적 컴파일 방식은 실행하기 전에 컴퓨터가 알아 들을 수 있는 언어로 변환화는 작업을 미리 실행한다.


따라서, 변환 작업은 딱 한 번만 수행한다.



JIT는 이 두 가지 방식을 혼합한 것이라고 보면 된다.


변환 작업은 인터프리터에 의해서 지속적으로 수행되지만,


필요한 코드의 정보는 캐시에 담아두었다가(메모리에 올려두었다가) 재사용 하게 된다.



여기서 헷갈릴 수 있는 부분은 javac 명령어를 사용하여 컴파일을 하기때문에


그럼 자바는 정적 컴파일 방식 아닌가? 라고 생각 할 수 있는데


자바 프로그래밍 과정에서는 javac라는 명령어를 사용하여 컴파일을 하는 단계에서 만들어진


class라는 파일은 바이트코드(ByteCode)일 뿐이다.



자바의 모토 중에 하나가 "Compile once, Run anywhere"다.


한번 컴파일한 코드로  Linux, Mac OS X, Window 등에서 모두 사용할 수 있다.


다시 말해서, javac라는 명령어를 수행한다는 것은 텍스트로 만드 java파일을 어떤 OS에서도 수행될 수 있도록


바이트코드라는 파일로 만든 것뿐이다.


컴퓨터가 알아먹을 수 있도록 하려면 다시 변환 작업이 필요한데,


이 작업을 JIT 컴파일러에서 한다고 보면 된다.






위 그림에서 "JVM → 기계코드"로 변환되는 부분은 JIT에서 수행하는 것이다.


JIT를 사용하면 반복적으로 수행되는 코드는 매우 빠른 성능을 보인다는 장점이 있지만,


반대로 처음에 시작할 때에는 변환 단계를 거쳐야 하므로 성능이 느리다는 단점이 있다.


하지만, 최근들어 CPU 성능이 많이 좋아졌고, JDK의 성능 개선도 많이 이루어졌기 때문에 방금 이야기한 단점도 많이 개선되었다.









■ 자바를 배우면 꼭 알아야 하는 용어(JVM, GC)




일반적으로 자바를 설명할 때 많이 사용되는 용어들은 다음과 같은 것들이 있다.



   ● JVM : Java Virtual Machine (자바 가상 머신)


   ● GC : Garbage Collector (가비지 컬렉터)



JVM은 작성한 자바 프로그램이 수행되는 프로세스를 의미한다.


다시 말해서, java라는 명령어를 통해서 애플리케이션이 수행되면, 이 JVM 위에서 애플리케이션이 동작한다.


이 JVM에서 여러분들이 작성한 프로그램을 찾고 실행하는 일련의 작업이 진행된다.



자바의 기본 메모리 관리는 개발자가 하지 않아도 된다.


메모리 관리를 JVM이 알아서 하기 때문이다. 이때 JVM 내에서 메모리 관리를 해주는 것을 바로 "가비지 컬렉터"라고 부른다.


Garbage는 우리나라말로 "쓰레기"라는 의미이며, 사용하고 남아 있는 전혀 필요없는 객체들이 여기에 속한다.


아무리 가비지 컬렉터가 쓰레기를 알아서 청소한다고 하더라도, 메모리를 효율적으로 사용하도록 개발하는 것은 중요하다.



일반적으로 사용되는 GC라는 말의 의미는 Garbage Collection(가비지 컬렉션)을 의미한다.


예를 들어, 쓰레기를 청소하는 작업이 수행되면 "가비지 컬렉션이 수행되었다"라고 표현한다.


아니면 짧게 "GC가 발생했다"고 이야기한다.









■ Garbage Collector의 진행방식




자바 프로그래밍 과정에 있어 어떤 객체를 생성하더라도 그 객체는 언젠가는 쓰레기가 되어 메모리에서 지워져야만 한다.


예를 들어 "abc"라는 문자열이 있는데, 더 이상 사용할 일이 없다면 메모리에서 삭제되어야 한다.


만약 지워지지 않으면, 더 이상 상요할 일이 없다면 메모리에서 삭제되어야 한다.


허나 계속 지워지지 않고 있다면, 자바 프로그램은 엄청난 메모리가 필요할 것이다.


그래서, C를 사용하여 개발 할 때에는 메모리를 해제하는 작업을 꼭 해줘야만 한다.


하지만, 자바는 그런 작업을 해줄 필요가 없다.


가비지 컬렉터라는 것이 알아서 쓰레기들을 치워주기 때문이다.


JDK 7부터 공식적으로 사용할 수 있는 G1(Garbage First)라는 가비지 컬렉터를 제외한 나머지 JVM은


다음과 같이 영역을 나누어 힙(Heap)이라는 공간에 객체들을 관리한다.

(여기에서 사용되는 영역에 대한 요어들은 JDK의 벤더에 따라서 조금씩 다르다.)



가장 왼쪽에 있는 Young 영역에는 말 그대로 젊은 객체들이 존재하며, Old 역역에는 늙은 객체들이 자리잡게 된다.


그리고 Perm 이라는 영역에는 클래스나 메소드에 대한 정보가 쌓인다.

(Perm에 저장되는 데이터는 더 많지만, 이정도만 알고 있어도 된다.)



Young 영역은 Eden과 두개의 Survivor 영역으로 나뉘는데, 이 중에서 객체를 생성하자마자 저장되는 장소는 Eden이다. 


일반적으로 자바에서 메모리가 살아가는 과정은 다음과 같다.



 ① Eden 영역에서 객체서 생성된다.


 ② Eden 영역이 꽉 차면 살아있는 Survivor 영역으로 복사되고, 다시 Eden 영역을 채우게 된다.


 ③ Survivor 영역이 꽉 차게 되면 다른 Survivor 영역으로 객체가 복사된다.

    이때, Eden 영역에 있는 객체들 중 살아있는 객체들도 다른 Survivor 영역으로 간다.

    즉, Survivor 영역의 둘 중 하나는 반드시 비어 있어야만 한다.



지금까지 서술한 것을 마이너(Minor) GC 혹은 Young GC라고 부른다.


여기서 GC는 가비지 컬렉터가 아니라 가비지 컬렉션을 의미한다.



그러다가, 오래 살아있는 객체들은 Old 영역으로 이동한다.


지속적으로 이동하다가 Old 영역이 꽉 차면 GC가 발생하는데 이것을 메이저(Major) GC 혹은 FUll GC라고 부른다.



일반적으로 Young GC와 Full GC의 속도를 비교하면 Young GC의 속도가 빠르다.


Young GC는 더 작은 공간이 할당되고, 객체들을 처리하는 방식도 다르기 때문이다.


그렇다고, 전체의 힙 영역을 영 영역으로 만들면 장애로 이어질 확률이 매우 높아진다.



오라클 JDK에서 제공하는 GC의 방식은 크게 4가지 버전이 있으며,


JDK 7.0부터 추가된 G1(Garbage First)를 포함하여 총 5가지의 가비지 컬렉터가 존재한다.


정리하면 다음과 같다.



   ● Serial GC


   ● Parallel Young Generation Collector


   ● Parallel Old Generation Collector


   ● CMS : Concurrent Mark & Sweep Collector


   ● G1 : Garbage First



이중에서 WAS로 사용하는 JVM에서 사용하면 안되는 것은 Serial GC이다.


이 GC 방식은 -client 옵션을 지정했을 때 사용된다.


즉 클라이언트용 장비에 최적화된 GC이기 때문에 WAS에서 이 방식을 사용하면 GC의 속도가 매우 느려져


웹 애플리케이션이 엄청 느려진다.



그 외에 다른 GC 방식들은 서로 장단점이 존재하기 때문에 어떤 GC방식이 가장 적합하다고 이야기하기는 매우 어렵다.






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기