들어가며

maven 에 관한 문서를 찾아보다가 아래 사이트에서 상당히 괜찮은 문서를 찾았다. 아래 사이트를 따라하면서 maven 을 이해해보도록 하겠다.

http://www.sonatype.com/books/maven-book/reference/public-book.html

설치하기

eclipse 에서 maven 을 지원하는 플러그인이 나와있다 업데이트 주소는 아래와 같다

http://m2eclipse.sonatype.org/update/

이클립스 메뉴의 Help-Install New Software 에 들어가서 위의 URL 을 입력하고 설치하기 바란다.

프로젝트 만들기

m2eclipse 를 설치하면 위와같이 3가지 형태의 maven 프로젝트를 만들수 있는데 Maven Project 를 만들어 선택하고 Next 를 누르자.

maven 은 다양한 archetype을 지원하는데 여기서 archetype 란 기본적인 프로젝트 셋팅 이라고 보면된다. 우리는 셋팅이 하나도 되어있지 않은 프로젝트를 생성할것이기 때문에 archetype 를 선택하지 말고 skip 하도록 Create a simple project 를 체크하고 Next 를 누른다.

Group Id 는 java 의 package 와 같은 개념으로 보면 된다.

Artifact Id 는 메이븐 프로젝트의 이름으로 이 값이 만들어졌을때 이클립스 프로젝트 명이 된다.

Name 과 Description 은 해당 프로젝트의 설명 이다.

일단 위와같이 입력하고 Next 를 누른다.

dependencies 설정하는 부분이 나오는데 현재는 없음으로 그냥 Finish를 누른다.

위와같은 형태의 프로젝트가 생성된것을 확인할수 있을것이다.

MAVEN 프로젝트 구조

프로젝트 디렉토리를 확인해보면 아래와 같다.

simple/

   pom.xml

   src/

      main/

         java/

         resources/

      test/

         java/

         resources/

   target/

      classes/

      test-classes/

이 디렉토리 구조는 maven 표준 디렉토리 구조이다. 이제 의미를 알아보도록 하겠다.

simple/ - 디렉토리명은 artifact id 의 값과 일치한다.

pom.xml - 모든 maven 프로젝트는 Project Object Model (POM) 이라는 이름의 셋팅파일을 같는다.

main/ – 이 디렉토리는 프로그램의 모든 소스파일과 리소스 파일이 들어가는 디렉토리 이다. 예를들어 properties 파일같은경우 resources 디렉토리에 집어넣으면 된다.

test/ – 이 디렉토리는 junit 테스트 프로그램이 위치하게 된다.

HELLO 프로그램하기

우리의 maven 프로젝트에 아래 프로그램을 집어넣는다. package 가 아까 설정했던 group id 와 같은것을 유념해서 디렉토리를 만든후에 작성하도록 한다.

package net.cranix;

public class Hello {
    public static void main(String args[]) {
        System.out.println("Hello Maven World!");
    }
}

다 작성했다면 프로젝트에 마우스오른쪽 버튼 눌러서 Run As-maven package 를 차례로 클릭한다.

콘솔창에 무언가 뜨고 조금 지나면 BUILD SUCCESSFUL 이라는 결과가 출력된다.

과연 무엇이 바뀐것일까. 프로젝트 네비게이터에서 F5 키를 눌러서 리플래쉬 시켜보면 새로생긴 파일과 디렉토리가 보인다.

확인해보면 아래와 같다.

target/

   classes/

      net/

         cranix/

            Hello.class

   maven-archiver/

      pom.properties

   test-classes/

   simple-0.0.1-SNAPSHOT.jar

위와 같이 .jar 파일이 생성된 것을 알 수 있다.

테스트 하기

테스트를 하기 위해서는 junit 라이브러리가 필요하다. maven 에서는 이런 의존관계 설정이 쉽게 되는데 pom.xml 파일을 열어서 Dependencies 탭에 가서 추가만 해주면 된다.

위 버튼을 눌러서 아래와같이 검색하자. 알아서 리모트에있는 라이브러리를 검색해서 리스팅 해준다. 원하는 junit 를 선택하고 scope 를 test 로 셋팅한다음 OK 버튼을 누른다.

그럼 아래와 같이 추가된 것을 확인할 수 있으며 저장을 눌러서 적용하자.

이제 라이브러리도 받았으니 테스트 소스만 만들면 된다. 테스트를 위해서는 테스트를 원하는 클래스의 위치를 test 폴더에다가 만들고 *Test 형태로 클래스를 만들어 주면 된다. 예를 들어 Hello 클래스면 HelloTest 라는 클래스를 만들어 주면 된다.

위와 같이 HelloTest.java 파일을 위치시켰다.

HelloTest 파일의 내용은 아래와 같다.

package net.cranix;

import junit.framework.TestCase;

public class HelloTest extends TestCase{
    public HelloTest(String app) {
        super(app);
    }
    public void testHello() {
        assertTrue(true);
    }
}

이제 테스트를 수행하려면 패키지이름에 마우스오른쪽버튼 누르고 Run As-maven test 를 클릭하면 된다. Console 창에 테스트가 수행되는 화면을 확인할 수 있을 것이다.

프로그램 실행하기

Run As – Maven build 를 차례로 클릭해서 아래와 같이 설정한다. 파라메터에 mainClass 지정해 주는 것도 잊지 말자.

Run 을 누르게 되면 Console 화면에 실행되는 결과를 볼 수 있다.

[INFO] Searching repository for plugin with prefix: 'exec'.
[INFO] Attempting to resolve a version for plugin: org.codehaus.mojo:exec-maven-plugin using meta-version: LATEST
[INFO] Using version: 1.1.1 of plugin: org.codehaus.mojo:exec-maven-plugin
[INFO] Scanning for projects...
[INFO] ------------------------------------------------------------------------
[INFO] Building simplename
[INFO]
[INFO] Id: net.cranix:simple:jar:0.0.1-SNAPSHOT
[INFO] task-segment: [exec:java]
[INFO] ------------------------------------------------------------------------
[INFO] [exec:java]
Hello Maven World!
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1 second
[INFO] Finished at: Sun Aug 16 00:48:28 KST 2009
[INFO] Final Memory: 1M/8M
[INFO] ------------------------------------------------------------------------

마치며

요즈음에는 자바기반 프로젝트를 하게 되면 거의 필수적으로 아파치 같은 공개 라이브러리를 쓰게 된다. 그러나 이런 라이브러리 역시 다른 라이브러리를 사용하는 것이 대부분이다. 이러다 보니 몇 개의 라이브러리만 가져다 써도 나중에 배포할 때는 의존관계를 따져가며 상당히 귀찮은 작업을 해야 한다. maven 은 이런 귀찮은 작업을 상당히 줄여줄 것으로 기대된다.

서론

얼마전 java 프로젝트를 하나 했었는데 거기서 maven 이라는 도구를 처음 봤다. 처음 느낀점은 상당히 복잡하다는 것이다. “이걸 구지 써야하나?” 라는 생각이 들정도 였다. 그러나 프로젝트를 진행하면서 이 도구는 잘만쓰면 상당히 유용할 것이라는 생각이 들었다. 그래서 이참에 메이븐이 무엇이고 그 사용법에대해 알아보려고 한다.

본론

maven 의 사전적 의미는 이디시어로 “지식의 축적” 을 의미한다고 한다. 이 프로젝트는 Jakarta Turbine 프로젝트에서 빌드과정을 간략히 하려는데서 출발했다. 우리는 프로젝트를 빌드하는데 표준화된 방법, 프로젝트의 확실한 정의, 프로젝트의 정보를 공개하는 쉬운 방법 그리고 프로젝트들간의 JAR 파일의 공유를 원했다. 그래서 maven 이 나왔고 현재는 모든 java 기반 프로젝트에 적용가능하다.

maven 의 첫번째 목표는 개발자가 개발산출물을 최단시간내에 이해할수 있도록 하는것이다.

목표를 이루기위해 다루는 영역은 다음과 같다

- 쉬운 빌드 과정
- 동일한 빌드 시스템 제공
- 양질의 프로젝트 정보 제공
- 모범사례에 대한 지침 제공
- 새로운 기능에 투명성 있는 마이그레이션 제공

결론

오늘은 메이븐 홈페이지에서 메이븐 소개를 그냥 해석해 봤다. 역시 소개부분이라 상당히 추상적이지만 maven 이 무엇을위해 만들어졌는지는 어느정도 감이 잡힌다. 다음번에는 메이븐과 이클립스를 연동하면서 실제로 프로젝트를 생성해보도록 하겠다.

서론

html 목록을 표시하기 위해서 ul,ol 등의 태그들을 많이들 쓴다. 특히 요즈음 들어 css와 이런 태그를 같이 사용하는게 대세를 이루면서 더욱 많이 쓰게되었다. 그러나 이런 태그의 정확한 의미를 모르고 사용을 했었다. 그래서 한번 정리해 두려고 한다.

본론

1.태그이름

ul (Unordered List) : 순서 없는 목록

ol (Ordered List) : 순서 있는 목록

li (List Item) : 목록 아이템

dl (Definition List) : 용어 정의 목록

dt (Definition Terms) : 용어

dd (Definition Description) : 용어의 설명

2. ul (순서 없는 목록) 예시

- 소스

<ul type=”disc”>
    <li type=”square”>item1</li>
    <li type=”circle”>item2</li>
    <li type=”disc”>item3</li>
    <li>item4</li>
</ul>

- 결과

• item1
• item2
• item3
• item4

3. ol (순서 있는 목록) 예시

- 소스

<ol>

    <li type="a">item1</li>
    <li type="A">item2</li>
    <li type="i">item3</li>

    <li>item4</li>
</ol>

- 결과

1. item1
2. item2
3. item3
4. item4

4. dl (용어 정의 목록) 예시

- 소스

<dl>
    <dt>def1_title</dt>
    <dd>def1_description</dd>
    <dt>def2_title</dt>
    <dd>def2_description</dd>
</dl>

- 결과

def1_title

def1_description

def2_title

def2_description

결론

사실 몇년 전만해도 이런 태그들은 그리 주목받지 못했다. 그러나 시맨틱웹 같은 개념이 등장하면서 이러한 태그들은 다시 주목받기 시작했다.  그 이유는 이런 태그들과 css에 의해서 html 에서 데이터와 디자인을 어느정도 분리 할 수 있게 되었기 때문이다. 그러나 아직 완전한 분리는 아니다. 내가 생각하기에 완전한 분리를 위해서는 xml 과 xslt 기술을 이용하여 웹사이트를 제작하여야 가능 할 것이라고 본다.

div 로 레이아웃을 구성할때 왼쪽에 메뉴를 넣고 오른쪽에 본문을 넣는 경우가 많다.

그런데 만약 오른쪽에 표시되는 본문 div 의크기를 가변적으로 하고싶다면 어떻게 해야할까?

이것을 해결하기위해 여러가지 테스트를 해 보았다.

먼저 기본적으로 본문의 너비를 400px 로 한 레이아웃은 아래와 같다.

가장 먼저 생각한것은 main 의 너비를 100% 로 하는것인데 이렇게 하면 아래와같이 된다.

이건 아니다.

다음으로는 left 의 position 을 absolute 로 설정하고 main 의 margin-left 를 left 의 크기만큼 주는것이다.

이것역시 위처럼 left 의 크기만큼 오른쪽으로 삐져나가는 현상이 발생했다.

결국 아직 답을찾지 못했다.

어떤 방법이 있을까?

크로스 브라우저 웹기반 위지윅 에디터를 만들려고 몇일간 삽질중이었다.

그러던중 IE 에서 자꾸 focus 가 달아나 버리는 이상한 현상이 발생했다.

색상선택기를 열심히 만들어서 클릭을 하면 에디터의 포커스가 없어져 버려서 색상이 바뀌지 않게 되는것이었다.

그런데 이상한건 다른 버튼들과 다른점이 없는데 그 버튼들은 되고 색상선택기만 안된다는것.!

연구에 연구를 거듭한 결과...(아니 삽질에 삽질..;;)

황당한 결과를 얻었다.

색상선택기는 테이블에다가 onclick 이벤트를 걸어서 구현한거고 나머지 버튼들은 이미지에다가 onclick 이벤트를 걸어서 작성했다.

결국 table 태그에 onclick 이벤트를 걸어서 클릭한건 포커스가 없어지고 image 태그에 onclick 이벤트를 걸어서 클릭한건 포커스가 그대로 남아있는것이었다.

이런 황당한 시츄에이션으로 색상선택기의 테이블에 걸려있는 onclick 이벤트를 싹빼주고 대신 투명 이미지를 덮어서 거기에 onclick 이벤트를 걸어줬더니 이상없이 잘 돌아간다.

버그.. 겠지?

IE 와 FF(firefox) 의 차이점

1. hand 는 웹표준이 아니여서 익스에서만 된다. 다음부턴 pointer 를 쓰자.

cursor:hand(x) --> cursor:pointer(0)

2. FF에서의 javascript 는 function 밖에서 변수 초기화가 되지 않는다.
예를들어 아래 소스를 보자.

[code]var timeInterval = 5000;

function startInterval() {
    setTimeout("test()",timeInterval);
}
function test() {
    alert("hello!");
}
startInterval();[/code]

IE 에선 5초있다가 test() 를 실행하게되지만 FF 에선 바로 test() 가 실행된다.
이유는 timeInterval 이 초기화 되지 않기 때문이다.
유의하자.


3. FF 에선 selectSingleNode 와 같은 XPATH 탐색 함수가 지원되지 않는다.
예를들어 IE 의 아래와같은 구문은

[code]var obj = xmlObj.selectSingleNode("root/subnode");[/code]

FF에선안되고 아래와 같이 바꿔야 IE,FF 모두 쓸수있다.

[code]var obj = xmlObj.getElementsByTagName("root")[0].getElementsByTagName("subnode")[0];[/code]

XPATH 가 웹표준이 아니었나? 상당히 편했는데 하루빨리 지원됬으면 좋겠다.


4. IE 에서 노드 탐색시 .text 로 텍스트를 불러올수있는데 FF 에선 불가능하다.
아래 소스는 IE 에서는 가능하나 FF 에선 불가능하다.

[code]var text = xmlObj.getElementsByTagName("root")[0].text[/code]

모두 가능하게 하려면 아래 소스를 쓰자

[code]var text = xmlObj.getElementsByTagName("root")[0].firstChild.nodeValue;[/code]

5. 위지윅 에디터 모드 변경법
IE 에서는 어떤 오브젝트든 contentEditable="true" 라는 플랙만 주면 에디터 모드가 된다. 예를들면 아래와 같다

[code]<div id="editor" contentEditable="true"></div>[/code]

FF 에서는 아래와같이 javascript 로 designMode 를 On 시켜줘야 한다.

[code]editor.contentDocument.designMode="On";[/code]

FF 에서는 document 객체에서 designMode 를 켜줘야 하기때문에 iframe 으로 써야한다.

[font-style]

[font-weight]

[font-size]

[font-variant]

[text-align]

[text-indent]

[text-decoration]

[text-transform]

[letter-spacing]

[word-spacing]

[color]

[background-color]

[background-image]

[background-repeat]

[background-position]

[background-attachment]

[background]

[padding]

[margin]

[border-style]

[border-width]

[border]

[float]

[visibility]

[list-style-type]

[list-style-image]

[list-style-position]

[list-style]

[cursor]

spring 이나 struts 같은 프레임웍은 jsp 의 처리를 컨트롤러에 위임하게 된다.

그래서 *.do 같은 형태의 url 로 접근 하도록 만들어 놓은건데.

좀 똑똑한 사용자가 jsp 파일의 경로를 알아서 컨트롤러를 거치지 않고

바로 jsp 에 접근하는게 가능하다.

이것을 막기위해 web.xml 에다가 아래 코드를 추가하면 된다.

[code]<security-constraint>
  <display-name>JSP Protection</display-name>
  <web-resource-collection>
   <web-resource-name>SecureJSPPages</web-resource-name>
   <url-pattern>*.jsp</url-pattern>
  </web-resource-collection>
  <auth-constraint>
   <role-name>nobody</role-name>
  </auth-constraint>
 </security-constraint>
 
 <security-role>
  <description>
  Nobody should be in this role so JSP files are protected
  from direct access.
  </description>
  <role-name>nobody</role-name>
 </security-role>[/code]

방문자님의 제보로 제로보드4 utf-8 버젼의 버그 하나를 발견해서 수정해 보기로 했다.

원인은 url 로 한글이 그대로 보내져서 제대로 파싱을 못하는것이었다.

해결책은 아래와 같다.

1. 아래 파일들을 텍스트 에디터로 연다.

zboard.php, view.php, write.php, _head.php

찾을 텍스트 : keyword=$keyword
변경할 텍스트 : keyword=".urlencode($keyword)."

변경할 텍스트 : keyword=".urlencode($keyword)

HTML 페이지에 부분적으로 XML/XSL 을 적용할수 있게 하는 javascript

[code]    var xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async=false;
    xml.load("a.xml");

    var xsl = new ActiveXObject("Microsoft.XMLDOM");
    xsl.async=false;
    xsl.load("a.xsl");

    document.write(xml.transformNode(xsl));[/code]