스토브 훌로구

처음에 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>

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

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

 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>

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

 Zencoding 에서 기본적으로 설정되 있는 변수로

lang : ko
locale : en-US
charset : UTF-8 

등등등이 있다.

그래서 html:4t 를 입력하고 tab 키를 누르면 설정된 변수값에 의해

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

으로 변환된다.
 

뭐 굳이 상관은 없지만 일일이 en을 ko 로 바꾸기 귀찮고 뭐 혹시 프로젝트에서 쓰는 charset 이 UTF-8이 아니라 EUC-KR 일수도 있으니까...

디폴트로 출력되는 lang, locale, charset 값을 바꿔 보았다.

※ 먼저 작업하기 전에 이클립을 끈 다음에 해야 된다.

변경할 파일은 [이클립설치디렉토리]\plugins\ru.zencoding.eclipse_xxxxxxxxxxxx.jar 파일이다. xxxxxxxx 이부분은 설치된 zencoding 버전에 따라 다르다.

jar 파일을 압축프로그램으로 열어보면 여러개 파일이 있을 건데 그 중에서 /ru/zencoding/zencoding.js 파일을 살짝 변경해 주면 된다.

jar 파일에서 zencoding.js 파일만 빼내서 텍스트에디터로 열어보면 위에서 말했던 변수들이 보인다.

 

저부분을 원하는 값으로 바꾸고 저장후 jar 파일에 변경된 zencoding.js 파일을  덮어쓰고 다시 이클립을 실행시키면 끝~

 

html:4t 로 변경이 잘됬나 확인해 보자. 

<html lang="ko">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

기대했던 대로 잘 나옴~

프로젝트 생성시 프로젝트를 Dynamic Web Project 로 생성을 하면 Javascript 코드 작성시 쩜을 찍었을때 쓸수 있는 메소드를 뽓뽓 알려준다.

하지만 일반 Java Project 나 Maven Project  등 다른 프로젝트로 생성을 하면 쩜을 찍어도 아무 반응이 없다.

Javascript Code Assist 기능을 활성화 시킬려면

Project >  Properties > Project Facets 에 가서 오른쪽 항목들 중에 JavaScript 를 체크해 주면 정상적으로 작동된다.

 

※ 참고로 자바에디터에서 처럼 Ctrl 키를 누른 상태에서 메소드를 클릭하면 해당 메소드로 이동된다.

 

html, css를 작성할때 특히 html 태그를 작성할때 기가맥힌 이클립 플러그인이다.

일단 바로 설치를 한 다음에 간단한 사용법을 살펴보자.

Help >  Install New Software 에 가서 Work with에 http://zen-coding.ru/eclipse/updates/ 입력한후 Add 버튼을 클릭해서 적당한 이름으로  사이트를 등록한다.

사이트를 등록하면 잠시후에 설치할 플러그인 목록이 조회되는데 체크후 Next 버튼을 클릭해서 플러그인 설치를 완료한다.

 설치완료 후 이클립을 리스탓트 하면 끝~


자~ 이제 간단히 기능을 살펴보기 위해서 html 파일이나 jsp 파일이나 뭐 아무파일이나 생성해서 에디터를 열어보자.

뭐 이왕이면 html 이나 jsp 파일을 생성하는게 컬러링이 되니깐 좋을것이다.

참고로 Zencoding 플러그인은 이클립스 상의 왠만한 텍스트에서나 다 쓸 수 있다. java 소스 에디터에서도 된다! 할일은 없지만. 아무튼!!

div#tree>ul>li*3

요렇게 입력하서 Tab 키를 뽓 눌러보면

<div id="tree">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

요렇게 후딱 싹 바뀌는걸 볼수 있다! 뭐 별기능 아니지만 어째보면 보기만 해도 흐뭇한 기능이 아닐수 없다.
코딩할때 카피&붙여넣기 하는 일이 많을까? 이걸 쓸 일이 많을까 하는 생각은 문득 해보긴 해본다.

뭐 또 아무튼 Zencoding 에서 쓸수 있는 문법이랄까? 하여튼 그게 css 문법이랑 거의 똑같다는게 또 큰 장점이 아닐수 없다.





계속해서 몇가지 예를 들어보자.



html:4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

script:src

<script type="text/javascript" src=""></script>

link:css

<link rel="stylesheet" type="text/css" href="style.css" media="all" />

ul#nav.tree>li*3>a

<ul id="nav" class="tree">
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

ul#nav.tree>li*2>a.navBtn[href=#]

<ul id="nav" class="tree">
	<li><a href="#" class="navBtn"></a></li>
	<li><a href="#" class="navBtn"></a></li>
</ul>

ul#nav.tree>li*2>a#link$.navBtn[href=#]

<ul id="nav" class="tree">
	<li><a href="#" id="link1" class="navBtn"></a></li>
	<li><a href="#" id="link2" class="navBtn"></a></li>
</ul>

ul#nav.tree>li*2>a#link$$.navBtn[href=#]

<ul id="nav" class="tree">
	<li><a href="#" id="link01" class="navBtn"></a></li>
	<li><a href="#" id="link02" class="navBtn"></a></li>

table+ul#nav.tree>li*2

<table></table>
<ul id="nav" class="tree">
	<li></li>
	<li></li>
</ul>

table#summary>(caption)+(thead>tr>th)+(tbody>tr*2>td*2)

<table id="summary">
	<caption></caption>
	<thead>
		<tr>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

우째 쓰는지는 대략 알수 있을 것이다. 더 많은 것을 알고 싶을땐!

[HTML 예제보러 가기]

 [CSS 예제보러 가기]