스토브 훌로구

처음에 Maven을 사용하기 시작했던 이유는 jar 파일을 받기 쉬워서 였다 -_-;

지금도 디펜던시만 추가해주면 인터넷에서 자동으로 jar파일을 받아주는 기능을 제일 좋아하고 제일 많이 써먹는다.

처음에는 저런거 왜 쓰나 하는 생각도 했었지만 입다물고 쓰다보니 쪼매씩 쓸만한 다른 것들도 알아가고 이것저것 편한것 같다. 한번 입다물고 써볼만한 가치는 충분히 있다고 본다.


아무튼!!

이클립 인디고 버전 부터는 Maven Plugin 이 기본 업데이트 목록에 포함되 있다. m2eclipe 인것 같은데 pom.xml 에디터나 뭐 그런것들이 이것저것 조금씩은 다른것 같다.

아무튼 플러그인을 설치할려면 Help > Install New Software 로 가서 Work with 란에 기본적으로 포함되 있는

Indigo - http://download.eclipse.org/releases/indigo 를 목록에서 선택하고 잠시 기다리면 플러그인 목록들이 쭉 나오는데

목록에 보면  General Purpose Tools 아래에 m2e 어쩌고 하는 것들이 있다. 목록에서 m2e 어쩌고 하는것 2개를 선택하고 Finish 버튼을 클릭해서 설치 하면 된다.

다 설치후 이클립을 껏다 키면 설치완료. 

다 설치했으니  샘플로 Maven용 웹어플리케이션 프로젝트를 하나 만들어보고 jetty 로 서버를 띄워보자.

File > New > Project 로 프로젝트 생성하는 창을 열어보면 기존에 없던 Maven 시리즈가 새로 추가되 있다. Maven Project 를 선택하고 Next

 

Create Simple Project 에 체크하고 Next~

Group Id, Arifact Id 에 적당하게 쫌 있어보이게 입력하고 Packaging 은 웹어플 프로젝트이기 때문에 목록중에서 war를 선택한다. 나머지는 필수가 아니기 때문에 하고싶은데로~~ 하고 Finish 를 클릭해 프로젝트를 생성한다.

여기에서 Arifact Id는 프로젝트 명이 된다. 생성해 보면 안다. 

프로젝트를 맨들면 처음에 생성되는 디렉토리 구조는 위처럼 된다.(WEB-INF 는 기본적으로 생성되지 않고 따로 만들어야 된다.)

※ 굳이 위와같은 디렉토리 구조로 하지 않아도 된다. 원하면 전처럼 Dynamic Web Project 로 생생되는 디렉토리 구조로 바꿀수도 있고 Tomcat으로 서버를 띄울수도 있다. 고건 다음 기회에~

크게 보면 src 와 target 디렉토리가 생성되는 src는 당연히 java나 property나 이미지 파일들이나 js 파일이나 뭐 기타 등등등 프로젝트와 관련된  오만가지 것들이 위치할 디렉토리이다.

target 은 ant의 build 디렉토리처럼 빌드시키면 컴파일된 class 파일이나 뭐 고런것들이 들어간다.



쪼매더 상세하게 말해보면

/src/main/ java 는 Java 파일이 들어가겠고~

/src/main/resources 는 property 파일이나 Spring을 쓴다면 Spring 설정 xml 파일 같은게 들어간다. log4j.property 도 들어가겠구만. 그런데 또 굳이 꼭 이 디렉토리에 위치 안해도 된다. 하고싶으면 그냥 java 디렉토리에 때려 넣어도 된다.

/src/main/webapp 에는 html, jsp, css, js, 이미지 파일 기타등등의 파일을 넣어주면 됨. 

/src/test 는 뭐 당장은 크게 쓸일이 없는 디렉토리인데 하여튼 테스트와 관련된 것들이 들어간다. 여유 없는 사람들은 거의 쓸일이 없는 디렉토리이다. 

webpapp 에다 대충 확인할수 있는 html 이나 jsp 파일을 하나 맨들어 놓은 후 이제 jetty 로 서버를 띄어보자.




서버를 띄우기 전에 pom.xml에 jetty plugin을 사용한다고 설정해 줘야 한다.

이클립스 Helios 버전에서 사용하던 m2eclipse 플러그인의 pom.xml 에 에디터에는 Plugin 탭이 있었지만 이상하게도 Indio에서 설치한 m2eclipse 에는 plugin 탭이 없었다.

뭐 아무튼 직접 pom.xml 을 편집해도 되고 프로젝트명에서 오른쪽 버튼클릭해서 Maven > Add Plugin 으로 추가해도 된다.

Add Plugin을 클릭하면 뜨는 팝업창에서 검색어로 jetty 를 입력하면 목록이 쭉 뜨는데 거기서 org.mortbay.jetty   jetty-maven-plugin 을 선택하고 Ok를 클릭하면 pom.xml에 plugin 에 관련된 항목이 추가된다.

<build>
	<plugins>
		<plugin>
			<groupId>org.mortbay.jetty</groupId>
			<artifactId>jetty-maven-plugin</artifactId>
			<version>8.0.0.M3</version>
		</plugin>
	</plugins>
</build>

이제 Jetty Plugin 에 관련된 설정도 끝났으니 Jetty 로 서버를 띄워보자. 프로젝트명에서 오른쪽 버튼 클릭 Run As > Maven Build 클릭하면 팝업창이 뜨는데 Goals 에 jetty:run 이라고 입력하고 Run 을 클릭하면 인터넷으로 Jetty Plugin을 다운로드 받은 뒤에 서버가 실행될 것이다.
(처음 실행하면 플러그인을 다운받느라고 시간이 쪼매 걸린다.)

 서버가 다 실행되면 http://localhost:8080/test.html 로 접속해 보면 뽓 뜬다. 

Tomcat 을 설치안해도 되고 간단히 pom.xml 에 설정만 해주면 지가 알아서 인터넷으로 다운받아 주니 이 얼마나 깔쌈한가!


※ Jetty 디폴트 포트인 8080 을 바꿀려면 Goals 에 jetty:run -Djetty.prot=원하는포트번호 를 입력하고 실행하면 다른 포트로 서버가 실행된다. 

내가 제일 좋아하는 기능인 jar 파일 가져오는것도 해보자. 테스트로 java mail 라이브러리를 가져와 보자!

pom.xml을 더블클릭하면 전용 에디터가 열리는데 아래쪽에 있는 탭중에서 Dependencies 를 클릭해서 Add 버튼을 클릭한다.

팝업창의 검색어란에 mail 이라 입력하면 또 목록이 쭉 뜬다. 그중에서 javax.mail   mail 을 선택해서 추가후 저장을 하면 또 인터넷에서 지가 알아서 mail-xxxx.jar 와 activation-xxx.jar 를 다운로드 받아 클래스패스에 추가시켜주서 자유롭게 Javamail 라이브러리를 쓸수 있게된다.

<dependency>
	<groupId>javax.mail</groupId>
	<artifactId>mail</artifactId>
	<version>1.4.1</version>
</dependency>

Java 에서 JSON 을 처리하기 위한 라이브러리는 많이 있겠지만 요즘은 사람들이 Jackson 라이브러리를 많이 쓰는것 같다.

프로젝트 홈페이지(http://jackson.codehaus.org/)에 가보면 "High-performance JSON processor!" 요런 문구가 제일 상단에 떡 있는걸 봐서는 성능도 좋은것 같다!  

일단 그냥 써보자. 계속 쓰다보면 잘 알게 된다.

먼저 라이브러리를 써묵기 위해서 jar 파일을 받아야 한다. 프로젝트 홈페이지 다운로드 메뉴(http://wiki.fasterxml.com/JacksonDownload)로 가서  

쭉 있는것들중에 core-asl 과 mapper-asl 을 다운로드 받아 클래스 패스가 참조하는 폴더에 복사해 주면된다.

웹 프로젝트 같은 경우 WEB-INF/lib 디렉토리에 복사하면 되긋다~

메이븐 프로젝트일 경우는 간단히  pom.xml 에

<dependency>
	<groupId>org.codehaus.jackson</groupId>
	<artifactId>jackson-mapper-asl</artifactId>
	<version>1.8.5</version>
</dependency>

를 추가해 주면 사용할 수 있다.

지금 현재 최신 버전이 1.8.5 이기 때문에 version 란에다 1.8.5를 적어준 것이고 나중에 또 업데이트가 될것이니

 http://mvnrepository.com/artifact/org.codehaus.jackson/jackson-mapper-asl 여기에서 확인해 보고 최신버전으로 바꿔주면 될것이다.


간단한 샘플을 보자.

// 맵에 데이터들이 들어가 있는 형태
Map dummyData1 = new HashMap();
dummyData1.put("value1", "값1");
dummyData1.put("value2", "값2");

ObjectMapper om = new ObjectMapper();

try {	
	System.out.println(om.defaultPrettyPrintingWriter().writeValueAsString(dummyData1));
} catch (JsonGenerationException e) {	
	e.printStackTrace();
} catch (JsonMappingException e) {	
	e.printStackTrace();
} catch (IOException e) {	
	e.printStackTrace();
}

출력결과

{  "value1" : "값1",  "value2" : "값2"}

Jackson 라이브러리로 하는 짓들의 대부분은 ObjectMapper 라는 클래스의 인스턴스 생성을 한다음에 한다.

생성된 고것을 가지고 Json 문자열을 객체로 변환한다던가 객체를 JSON 문자열로 변환한다던가 한다. 뭐 다른 쓸만한 것도 많을 것이다.
뭐 아직 많이 모르니깐~

아무튼 Map 이나 List에 들어가 있는 데이터들을 쪽바로 잘 변환해 준다.

물론 getter 와 setter 메소드 시리즈가 있는 도메인 오브젝트,
예를 들어 User, Account 뭐 이런 종류의 오브젝트도 writeValueAsString 메소드의 파라메터로 넣으면 잘 변환된다.


아무튼~ 각설하고~ List 인 경우도 한번 해보자

// List 에 맵이 들어가 있는 형태
List dummyData2 = new ArrayList();
Map m = new HashMap();
m.put("value1", "값1");
m.put("value2", "값2");
dummyData2.add(m);

m = new HashMap();
m.put("value1", "값3");
m.put("value2", "값4");
dummyData2.add(m);

ObjectMapper om = new ObjectMapper();

try {	
	System.out.println(om.defaultPrettyPrintingWriter().writeValueAsString(dummyData2));
} catch (JsonGenerationException e) {	
	e.printStackTrace();
} catch (JsonMappingException e) {	
	e.printStackTrace();
} catch (IOException e) {	
	e.printStackTrace();
}

출력결과

[ {  "value1" : "값1",  "value2" : "값2"}, {  "value1" : "값3",  "value2" : "값4"} ]

역시 기대했던 대로 잘 변환된다. 

위의 샘플들은 오브젝트를 String으로 변환하는 샘플이고 String 으로 변환활 필요가 없으면(웹요청처리, JSON 파일로 저장하는 경우)  ObjectMapper 클래스의 writeValue() 메소드를 이용해 OutputStream이나 Writer 에 Stream으로 출력해 버려도 된다.

ObjectMapper om = new ObjectMapper();

om.writeValue(response.getWriter(), dummyData);

CrossDomain Ajax 호출 #1 에서 연구해 보았던 jQuery JSONP 를 활용해 다음 OpenAPI 로 이미지를 검색하는 샘플을 제작해 보았다.

다행스럽게도 다음 오픈 API에서 제공하는 많은 API 들이 대부분 callback이라는 파라메터를 받는다. 그렇기 때문에 JSONP 로 ajax 호출을 통해 깔쌈하게 뭔가를 맨들수 있다.

찾아봤는데 네이버 오픈 API는 아쉽게도 callback 요런 종류의 파라메터를 받는 API 가 하나도 없는것 같다. 요것은 JSONP 방식이 아닌 Proxy Servlet 방식을 이용해서 데이터를 받아야만 한다. 뭐 이것은 차후에 한번 해 봐야지~

먼저 샘플을 맨들기 전에 다음 OpenAPI 사이트(http://dna.daum.net/DNALatte/openapi/about)에 가서 Key를 발급받아야 한다. 샘플로 검색API 에 있는 이미지 검색 API를 활용할 것이기 때문에 검색 API용 키를 발급 받는다.

localhost:8080 에서 테스트를 할것이기 때문에 사용URL 란에는 http://localhost:8080 을 입력하고 확인 버튼을 클릭하자! 고러면 키가 발급된다.

키를 발급 받았다면 샘플 제작 고고씽~

이미지 API 를 호출하는 jQuery 코드는 요렇게~

$.ajax({
	url : "http://apis.daum.net/search/image",
	dataType : "jsonp",
	type : "post",
	jsonp : "callback",
	data : {
		apikey : "발급받은 Key",        // API KEY
		q : "한예슬",                   // 검색어
		result : "10",                 // 한페이지에 출력될 결과수
		pageno : $("#pageno").val(),   // 페이지번호
		output : "json"                // JSONP 형식으로 호출하기 때문에 결과값 포맷은 json
	},
	success : function(r){
		//검색결과 처리
	}
});

검색된 결과는 json 형태로 리턴된다. json으로 보내달라고 요청했으니깐~
console에다 찍어보니 데이터 형태가 죠렇게 되있다. 검색결과에 대한 자세한 설명은 http://dna.daum.net/apis/search/image 요기에서 참고하면 된다.

검색결과는 대충보니 channel 안에 item 에 배열로 들어가 있다~ 뭐 하여튼 저 검색결과를 활용해서 쫌 쓸만하게 제작을 하면 되는 것이다!

샘플로 맨들어본 api.html 의 전체소스

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Daum OpenAPI with jQuery</title>
	
	<script type="text/javascript" src="/resource/js/jquery-1.6.2.min.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			// 이미지 검색 할래염 버튼
			$("#searchBtn").click(function(){
				// 기존 검색결과랑 조건 지우기
				$("#imgList").empty();
				$("#pageInfo").val("1");
				
				searchImg();
			});
			
			// 더보기버튼
			$("#moreBtn").click(function(){
				$("#pageno").val(parseInt($("#pageno").val())+1);
				
				searchImg();
			});
			
			var searchImg = function(){
				$.ajax({
					url : "http://apis.daum.net/search/image",
					dataType : "jsonp",
					type : "post",
					jsonp : "callback",
					data : {
						apikey : "발급받은키",               // API KEY
						q : $("#keyword").val(),         // 검색어
						result : "10",                   // 한페이지에 출력될 결과수
						pageno : $("#pageno").val(),     // 페이지번호
						output : "json"                  // JSONP 형식으로 호출하기 때문에 결과값 포맷은 json
					},
					success : function(r){
						r = r.channel;
						$("#pageInfo").text("검색된 이미지는 " + r.totalCount +"개 에요~")
						
						$.each(r.item, function(idx, data){
							var img = $("").attr({
								src : data.thumbnail,
								title : data.title
							}).click(function(){
								window.open(data.image);
							}).appendTo("#imgList");
						});
					}
				});
			};
		});
	</script>
	
	<style type="text/css">
		#result {width:800px;}
		#imgList {width: 100%;border:2px solid #ccc; padding:5px}
		#imgList img{border:1px solid #cccccc;padding:2px;margin:5px;cursor:pointer}
		#moreBtn {width:100%;height:60px;}
	</style>
</head>
<body>
	<input type="hidden" id="pageno" value="1"/>
	<input type="text" id="keyword" />
	<button id="searchBtn">이미지 검색 할래염</button>
	
	<div id="result">
		<span id="pageInfo"></span>
		<div id="imgList">여기에 검색된 이미지가 나타날꺼임</div>
		<button id="moreBtn">더보기</button>
	</div>
</body>
</html>

[샘플소스]DaumAPI.war

실행결과 Demo 원하는 검색어를 입력후 "이미지 검색 할래염" 버튼을 클릭해 보셈~

Ajax 로 다른 도메인에 있는 url 을 호출해 데이터나 HTML을 가져오는건 보안상 안된다고 한다. 되면 참 좋을텐데;;

뭐 아무튼 이걸 해결하기 위한 방법으로 JSONP 라는 형식으로 호출하던가 아니면 Proxy Servlet 을 하나 맹글어 그 서블릿을 거쳐 HttpClient 로 가져오는 방법, 훌래쉬를 이용하는 방법이 있다고 한다.!

그중에서 이번엔 JSONP 형식으로 호출하는 방법을 연구해 보겠다.

JSONP 형식이란 뭐 별건 아닌것 같고 기존에 서버에서 리턴해 주던

{"key1" : "value1",  "key2" : "value2"} 요런 json 문자열을

callback({"key1" : "value1",  "key2" : "value2"}); 요런식으로 임의의 함수를 호출해 주는 형식의 문자열로 리턴해 주는것을 말하는것 같다.

즉, jsonp 로 ajax 호출을 하기 위해선 아무 url 이나 안되고  callback({"key1" : "value1",  "key2" : "value2"});  요런식으로 함수안에 json 문자열이 들어간 형식으로 서버에서 리턴을 해줘야 가능하다.

각설하고 jQuery를 활용해 맹글어 보자.

jQuery에서 jsonp 호출하는 방법#1

$.getJSON("http://127.0.0.1:8080/server/data.jsp?callback=?", function(d){
	//d.key;
});

jQuery에서 jsonp 호출하는 방법#2

$.ajax({
	url : "http://127.0.0.1:8080/server/data.jsp",
	dataType : "jsonp",
	jsonp : "callback",
	success : function(d){
		// d.key;
	}
});

방법#1 이나 방법#2는 작동하는게 동일하다. 취향에 맞게 쓰임새에 맞게 쓰면된다. 개인적으로 방법#2 를 여러가지 원하는 ajax 호출 옵션을 줄수 있어서 더 좋아한다.

살짝 설명해 보면 방법#2 에서 쓴 ajax 옵션중 jsonp는 데이터를 넘겨줄 서버에서 받는 callback 함수명 파라메터이다. 서버에 따라 원하는 callback 함수명을 적어줘야 한다. 방법#1을 보면 대충 이해할 수 있다.

jsonp 옵션에다 적어준 함수명은 ajax 호출 url 뒤에다 방법#1에서 처럼 파라메터 형식으로 자동 추가된다.



전체소스코드 client.html

<!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>Jsonp test with jquery</title>
	
	<script type="text/javascript" src="/resource/js/jquery-1.6.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#testBtn").click(function(){
				$.getJSON("http://127.0.0.1:8080/server/data.jsp?callback=?", function(d){
					$.each(d, function(k, v){
						$("#getjson").append("<div>" + k + " : " + v + "</div>");
					});
					$("#getjson").show();
				});
							
				$.ajax({
					url : "http://127.0.0.1:8080/server/data.jsp",
					dataType : "jsonp",
					jsonp : "callback",
					success : function(d){
						$.each(d, function(k, v){
							$("#ajax").append("<div>" + k + " : " + v + "</div>");
						});
						$("#ajax").show();
					}
				});
			});
		});
	</script>
	
	<style>
		div{margin-bottom:10px;padding:2px;}
		#getjson{border:1px solid red;display:none;}
		#ajax{border:1px solid blue;display:none;}
	</style>
</head>

<body>
	<button id="testBtn">테스트!</button>
	<div id="getjson"></div>
	<div id="ajax"></div>
</body>
</html>

다음으로 간단한 테스트를 위해 초간단 심플 데이터 제공용 jsp 파일을 하나 맹글어 보자. JSON 변환용 라이브러리로 Jackson JSON Processor를 사용했다.

<%@ page language="java" contentType="text/javascript; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ page import="java.io.StringWriter"%>
<%@ page import="java.util.HashMap"%>
<%@ page import="java.util.Map"%>

<%@ page import="org.codehaus.jackson.map.ObjectMapper"%>

<%
	Map<String, String> dummyData = new HashMap<String, String>();
	dummyData.put("value1", "값1");
	dummyData.put("value2", "값2");
	dummyData.put("value3", "값3");
	dummyData.put("value4", "값4");
	
	StringWriter sw = new StringWriter();
	
	// Jackson JSON Mapper 를 사용해서 Map 을 JSON 문자열로 변환
	ObjectMapper mapper = new ObjectMapper();
	mapper.writeValue(sw, dummyData);
	
	request.setAttribute("sw", sw);
%>

<%-- ajax 에서 넘겨준 callback 함수 파라메터 가져오기 --%>
${param.callback}(${sw});

ajax로 호출한 url 경로에 맞게금 /server/data.jsp 로 저장하고 http://localhost:8080/client.html 로 접속해보자. 왜냐하면 localhost 랑 127.0.0.1 은 도메인이 다르니깐.  

음 잘 작동된다~~ 초간단 심플 예제이기 때문에 간단하게 JSP로 구현했는데 다음번에 쫌더 실제적으로 프로젝트에 써먹을수 있도록 Spring으로 예제를 하나 맹글어 봐야긋다~

[샘플소스]CrossDomain1.war

뭐 하는 기능인지는 직접해보면 알 수 있다.

먼저 에디터에서 작업하고자 하는 문자열 목록을 아래 예처럼 쪽 입력한다.

 jQuery Core
ul#leftMenu>li.menu* id와 class로 의미부여

<ul id="leftMenu">
	<li class="menu">jQuery Core</li>
	<li class="menu">Selectors</li>
	<li class="menu">Attributes</li>
	<li class="menu">Traversing</li>
	<li class="menu">Manipulation</li>
	<li class="menu">Css</li>
	<li class="menu">Events</li>
	<li class="menu">Effects</li>
	<li class="menu">Ajax</li>
	<li class="menu">Utilities</li>
	<li class="menu">jQuery UI</li>
</ul>

ul#leftMenu>li.menu*>a[href=http://] 링크추가

<ul id="leftMenu">
	<li class="menu"><a href="http://">jQuery Core</a></li>
	<li class="menu"><a href="http://">Selectors</a></li>
	<li class="menu"><a href="http://">Attributes</a></li>
	<li class="menu"><a href="http://">Traversing</a></li>
	<li class="menu"><a href="http://">Manipulation</a></li>
	<li class="menu"><a href="http://">Css</a></li>
	<li class="menu"><a href="http://">Events</a></li>
	<li class="menu"><a href="http://">Effects</a></li>
	<li class="menu"><a href="http://">Ajax</a></li>
	<li class="menu"><a href="http://">Utilities</a></li>
	<li class="menu"><a href="http://">jQuery UI</a></li>
</ul>

ul#leftMenu>li#menu$*>a 각 메뉴버튼마다 다른 아이디 부여

<ul id="leftMenu">
	<li id="menu1"><a href="">jQuery Core</a></li>
	<li id="menu2"><a href="">Selectors</a></li>
	<li id="menu3"><a href="">Attributes</a></li>
	<li id="menu4"><a href="">Traversing</a></li>
	<li id="menu5"><a href="">Manipulation</a></li>
	<li id="menu6"><a href="">Css</a></li>
	<li id="menu7"><a href="">Events</a></li>
	<li id="menu8"><a href="">Effects</a></li>
	<li id="menu9"><a href="">Ajax</a></li>
	<li id="menu10"><a href="">Utilities</a></li>
	<li id="menu11"><a href="">jQuery UI</a></li>
</ul>

뭐 대충 요런 응용을 많이 할 수 있지 않을까??