회사에서 조그마한 모바일 웹 개발 개선작업 프로젝트를 진행하고 있다. jQuery Mobile과 전자정부 프레임워크로 구성되어

있는데 사실 굉장히 작은 규모의 프로젝트라 전자정부 프레임워크 내부 API를 이것저것 사용할 일도 없고 사정상 지금 회사

에서 사용하는 노트북이 거의 10년전에 집에서 뒹굴던 노트북(싱글코어.. 램 2Gb)이라 이클립스가 무거우면 견디기가 어렵고

전자정부 프레임워크 개발환경은 왤케 무거운지.. validator 한번 돌아가면 노트북 팬이 터질듯이 돌아가고 손도 댈수 없을

정도여서 구조 리팩토링을 결심했다. 기존소스에서 전자정부 API를 사용하는 부분을 제거하고 Spring설정도 다시 잡고

하다보니 이틀이 꼬박.. 전자정부 프레임워크.. 참 좋긴한데 이번에는 제대로 신경질 나게 해주는 개발툴이 되버렸다.

물론 오래된 노트북 탓이 크긴하지만 ㅜ

기존소스에서 사용하던 jQuery Mobile이 훌륭한 디자인 테마와 템플릿을 제공하는건 높히 평가하지만 개인적으로 CSS가 너무

많아서 복잡한 편이고 제일 중요한건 이 프로젝트가 완전히 상업용으로 진행되는 프로젝트가 아니라서 파일럿 프로젝트보단

조금 부담있는 프로젝트이기 때문에 구조변경시에 디자인 문제가 맘에 걸렸다. 그래서 jQuery Mobile을 걷어내기로 하고

기존 HTML도 재사용 가능부분을 빼고 전부 새로 작성하기로 했다. 또 한가지 Value Object로 파라미터가 왔다갔다 하는걸

싫어해서 이 부분도 개선하려고 했지만 이것저것 다하면 눈에 보이는 결과물이 안나올 것 같아서 백엔드는 그대로 가기로 했다.

 

jQuery Mobile의 테마를 보면 위 사진과 같이 라운드 형태의 디자인이 많은데 요새 iOS도 그렇고 웹디자인 트렌드가 전반적

으로 플랫디자인으로 흘러가는 것 같아서 시간도 별로 없고 색하고 폰트만 잘 맞추면 플랫디자인 그까이꺼.. 생각하고 덤볐는데

역시..디자인하고는 거리가 먼 듯 하다. 플랫디자인 정말 어렵다 ㅜ

 

 

이렇게 플랫디자인을 한답시고 작업하다 보니 망할 콤보박스를 생각을 못했다. 셀렉트 박스를 그냥 넣으면 위와 같이 브라우저

or OS테마에 따라 제각각 다르게 보이기도 하고 우선 모양새가 영 좋지 않다. input 태그의 경우 보통 스타일링 하면

span{vertical-align:middle;padding:4px;border:2px solid #ccc;}

span input{border:0;}

과 비슷하게 input의 border를 지우고 감싸는 태그에 border를 주는것으로 스타일을 주면 되지만 불행하게도 우리가 흔히 쓰는

콤보박스 (Radio, Check, Select) 는 일반적인 방법으로는 스타일링 할수가 없다. 셀렉트 박스의 경우도 input과 마찬가지로

border를 0을 주면 전체적인 틀까지는 스타일링 할수 있지만 우측 Arrow는 어쩔수가 없다. 디자인만 보자면 셀렉트 박스를

UL, LI를 사용해서 새로 만들던지 기존 셀렉트 박스를 레이어처럼 감싸서 스타일링 하는 방법밖에 없다. 전자를 택하면

기존 로직도 다 변경해야 되니 귀찮기도 하고 시간도 오래 걸리고 두번째 방법도 만들자니 언제 만들고 있냐 싶어서

플러그인을 찾아봤다. 커스터마이징이 쉽고 일단 돌려봐서 기존 마크업 변경없이 최대한 빨리 예를 볼 수 있는걸로 찾아봤는데

jqTransform이라는걸 처음 찾았다.

 

위와 같이 예제에서는 꽤 괜찮아 보였는데 막상 적용해 보니 고치려면 손댈부분이 꽤 여러군데 있어서 다른 플러그인을 다시

찾아봤다. 대신 다른 유형의 콤보박스들도 한번에 디자인 적용이 되는걸 보니 괜찮아 보였다. 여튼.. 셀렉트 박스가 주목적이니

다시 찾아봤는데 그다지 맘에 드는 플러그인이 없었다. 그러던 중 이름도 거창한 Select Or Die라는 플러그인을 찾게됐다.

 

사용법은 간단하다 데모 페이지를 실행해보면 뭔지 알수 있다. 예를 들어 셀렉트 태그 전체를 스타일 적용한다면

$("select").selectOrDie();

라고 해주면 기본으로 아래와 같이 적용된다. 

스타일의 경우 selectordie.css를 고쳐서 사용하면 된다. 이 플러그인의 장점은 군더더기가 없어 보인다는 것이다. 보통

다른 플러그인의 경우 디자인을 덕지덕지 입혀놔서 처음 적용하고 나면 수정할 부분이 상당한데 SOD의 경우 CSS를 간단히

몇군데 수정하는 것으로 많은 부분이 해소 된다. 데모 페이지를 보면 다양한 옵션이 있어서 하나씩 적용해 보면 된다.

한가지 더 좋은점은 이벤트 발생후의 callback처리 등이 가능하다는 것이다. 다른 플러그인은 자세히 사용안해봐서 어떨지

모르겠지만 우선 대강 봤을때 이렇게 여러가지 옵션이 있는 플러그인은 없었다. 셀렉트 박스를 쓰다보면 Option태그를 동적

으로 셋팅해줄 경우가 생기는데 이 경우에는 option 태그를 append 한뒤 $("select").selectOrDie("update")와 같이

써주면 적용된다. 한가지 단점은 select 박스에 option태그가 있고 텍스트가 뭐라도 있어야 저 옵션이 적용됐었다. 글을

쓰다 보니 placeHolder옵션이 있어 어떻게 해볼수 있을것 같기도 하다. 이 플러그인은 위에서 썼듯 기존 마크업과 로직을

건드리지 않고 동적으로 select 박스의 겉을 감싸는 스타일링을 적용해주는 플러그인이다. 개인적으로 jQuery 플러그인

또한 많이 사용하는것을 좋아하진 않는 편인데 이유는 한번 피봐서 ;; 지금은 어느정도 버전이 변경되도 잘 돌아가는편인데

예전 jQuery 1.x 하위 버전때는 버전업된 jQuery에 맞춰지지 못해 오류가 나거나 오작동하는 경우가 많았다. 그래서

가능하면 플러그인에 의존하지 않으려고 했는데 이 플러그인의 경우 간만에 괜찮은걸 건진 것 같다. 아직 계속해서

개선이 이뤄지고 있는부분중에 Multiple셀렉트가 있어 보인다.

이 플러그인은 jQuery 1.8, 2.1에서 테스트 완료됐다고 한다. IE8, jQuery 2.1에서 지원하지 않는다고 하는데 어짜피

jQuery 2.x 대부터 IE8지원이 중단됐으니 상관없어 보인다. GitHub에서 받을수도 있지만 귀찮은 분들은 아래 첨부파일을

받아서 사용해 보시길..

-  다운로드

Select-or-Die-master.zip

 

 

 

보통 우리가 인터넷을 사용하면서 주소창에 흔히 볼수있는 주소 표현으로 다음과 같이..

 

http://xens.tistory.com/content/list.jsp?user=park&page=1 과 같은형태를 많이 보게 됩니다. 이를 RESTful 하게 표현하면

 

http://xens.tistory.com/content/list/user/park/page/1 과 같이 표현할 수 있게됩니다. 개념상으로는 단순히 이렇게 주소

 

표기를 위해서 뜬금없이 나타난 것은 아니고 'URI로 자원대상을 명시하고 Method로 자원에대한 행위를 정의한다'

 

를 베이스로 가지고 있는 아키텍쳐 이며 기본적으로 CRUD(Create, Read, Update, Delete)와 매치될수 있는 형태의 서비스

 

에서 쓰이고 있습니다. 저도 여기저기서 글만 봤지 최근에서야 공부겸 예제를 작성해 봤는데 글 제목에서 썼듯 URL Mapping

 

문제로 굉장한 삽질을 했습니다. 분명 시간이 지나면 잊어버릴게 뻔하니 간단히 정리를 해봅니다.

 

예제를 만들때는 Spring Framework 3.0.5와 Tomcat 7, jQuery를 사용했습니다. 이클립스에서 프로젝트 구조는 다음과

 

같다고 보시면 됩니다.

 

 

 

 

※JSP 호출 오류 해결방법

  REST형식으로 호출하면서 처음부터 진입을 가로막는것이 JSP 입니다. 처음 시작페이지가 content.jsp라고 하겠습니다.

 

 요즘에는 보통 서비스(URL)호출시 AJAX를 사용하여 콜백으로 온 데이터를 통해 결과를 출력하거나 하는 개발 방식을 많이

 

 사용하고 있는데 예를 들어서 content.jsp 에서 아래와 같이 호출한다고 가정합니다(처음 실행페이지가 content.jsp).

 

 $.ajax({

   ...

   url : "/person/parkdi"

   ...

 });

 

 그리고 스프링 컨트롤러는 다음과 같이 작성 했다고 가정합니다.

 

 @RequestMapping(value="/person/{id}", method=RequestMethod.GET)
 public ModelAndView getDataRestfulUrlPattern(@PathVariable("id") String id){...}

 

 이렇게 작성하고 바로 호출을 해보면 호출하는 content.jsp 자체가 에러가 납니다. 일단 이상현상을 보게된 후

 

 제일 먼저 봐야할것은 WAS의 web.xml 파일입니다. 우리는 Spring Framework를 사용했기 때문에 DispatcherServlet를

 

 다음과 비슷하게 매핑시켜줬을 겁니다.

 

  <servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>ContextConfigLocation</param-name>
      <param-value>/WEB-INF/webmvc_config.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>

 

실행할때의 톰캣의 Console로그를 보시면 content.jsp파일도 DispatcherServlet에서 처리하려고 하는것을 볼수 있습니다.

 

그러나 위의 web.xml 설정과 같이 *.do에 대한 패턴을 매핑하도록 했기 때문에 content.jsp에 대한 매핑 URL을 찾을수가

 

없어서 에러가 발생하게 됩니다. 우선 문제에 대한 해결책은.. web.xml을 수정해야 합니다.

 

  <servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>ContextConfigLocation</param-name>
      <param-value>/WEB-INF/webmvc_config.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
  <servlet-mapping> 
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
    <url-pattern>*.css</url-pattern>
    <url-pattern>*.jpg</url-pattern>
    <url-pattern>*.gif</url-pattern>
    <url-pattern>*.png</url-pattern>
    <url-pattern>*.ico</url-pattern>
    <url-pattern>*.swf</url-pattern>
 </servlet-mapping>       

 

우선 문제에 대한 해결책은 위의 붉은 글씨처럼 Dispatcher서블릿의 url-pattern을 '/' 로 변경하고 deault servlet의 url-pattern

 

을 추가해줬습니다. 호출하는 페이지인 content.jsp에서는..

 

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

 $.ajax({

   ...

   url : "<c:url value='/person/parkdi' />"    //컨텍스트Path(spring_webmvc_restful_ex1/person/parkdi)

   ...

 });

 

컨트롤러에서는 위에 작성된 예와 같이 그대로 두고 호출하면 됩니다. 일단 문제는 해결됐지만 이유는 알아야 되겠죠.

 

※오류 원인

 

JSP는 WAS(톰캣 등)의 서블릿 컨테이너에서 처리를 하게 됩니다. 톰캣을 예로 보면 이클립스 프로젝트에서의 web.xml이 아닌

 

%CATALINA_HOME%(톰캣 설치 디렉토리)의 conf/web.xml을 열어보면

 

 <sevlet-mapping>

  <servlet-name>jsp</servlet-name>

  <url-pattern>*.jsp</url-pattern>

 </sevlet-mapping>

 <servlet>
    <servlet-name>jsp</servlet-name>
    <servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class>
    <init-param>
       <param-name>fork</param-name>
        <param-value>false</param-value>
    </init-param>
    <init-param>
        <param-name>xpoweredBy</param-name>
        <param-value>false</param-value>
     </init-param>
    <load-on-startup>3</load-on-startup>
  </servlet>

 

위와같이 org.apache.jasper.servlet.JspServlet 에서 jsp를 처리한다는 것을 볼 수 있습니다. JSP 인식오류 해결을 위해

 

위에서 추가했던 <servlet-name>default</servlet> 의 경우 서블릿 컨테이너의 DefaultServlet을 의미하는데 

 

url-pattern을 '/'로 정의한 경우에 디폴트 서블릿을 의미하며 이 디폴트 서블릿은 서블릿 매핑 URL에 걸리지 않는 요청을

 

처리한다고(톰캣 설정파일의 주석) 되어있습니다. 그래서 이제 DispatcherServlet의 url-pattern을 '/'로 설정함으로서

 

JSPServlet의 JSP처리와 DispatcherServlet의 처리를 분리 시켰습니다. 이렇게 분리 할경우 JSP와 스프링 컨트롤러 매핑은

 

잘 처리되지만 css, js등의 정적 컨텐츠들이 나오지 않는것을 볼수 있습니다. 이는 DispatcherServlet의 url-pattern을 '/'로

 

설정하면서 톰캣의 server.xml에 정의되있는 DefaultServlet의 url-pattern을 무시하게 되기 때문에 DefaultServlet이 작동하지

 

않게 되기 때문입니다. 따라서 호출시 정적 컨텐츠들도 DispatcherServlet이 처리하게 되니 표현되지 않게 됩니다.

 

<servlet-mapping> 
  <servlet-name>default</servlet-name>
  <url-pattern>*.js</url-pattern>
  <url-pattern>*.css</url-pattern>
  <url-pattern>*.jpg</url-pattern>
  <url-pattern>*.gif</url-pattern>
  <url-pattern>*.png</url-pattern>
  <url-pattern>*.ico</url-pattern>
  <url-pattern>*.swf</url-pattern>

</servlet-mapping> 

그래서 DefaultServlet이 처리할 url-pattern을 재정의 해준것이 윗 부분입니다. 사실 위와 같이 정의해줄경우 정적 컨텐츠에

 

대한 url-pattern을 전부다 정의해줘야 줘야하므로 지저분하기도 합니다. 그래서 스프링 3.0에서는 이 부분을

 

<mvc:default-servlet-handler /> 를 선언해줘서 해결을 한다고 합니다. 여기에는 주요 WAS의 DefaultServlet 명에

 

대한 내용을 처리하도록 되있다고 하네요. 저도 위의 DefaultServlet의 매핑을 재정의 해주기 전에 발견해서 적용해봤는데

 

xmlns:mvc="http://www.springframework.org/schema/mvc ,

xsi:schemaLocation=http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd

 

<bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" p:alwaysUseFullPath="true" />

 

위 내용이 분명히 선언되있는데도 아래와 같이

 

org.xml.sax.SAXParseException: cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element 'mvc:default-servlet-handler'.

 

찾을수 없다고 계속 떠서 포기했습니다. 찾아봐도 위 내용의 XML확인이나 <mvc:annotation-driven /> 추가 여부만

 

확인하라는 답변밖에 없더군요.. 혹시 비슷한 경험 있으신 분은 답변 주시면 감사하겠습니다. 어쨋든 그냥 REST의 개념만

 

정리하고 CRUD에 해당하는 스프링의 RequestMethod(POST,GET,PUT,DELETE)를 좀 더 알아보려고 했던 것인데

 

하루종일 삽질만 한 것 같습니다;;

파일 업로드 라이브러리 선택(COS,Apache Commons Upload)에 대해 포스팅 했던 글에 이어 이번에는 파일 업로드

구현 예제에 대해 올려보겠습니다. 파일 업로드시에 보통 작은 데이터의 경우 손쉽게 jQuery의 ajaxStart, ajaxStop function을

통해 AJAX 요청 시작시, 완료시에 대한 이벤트를 처리 할 수 있으므로 ajaxStart()시에 GIF이미지 등을 화면에 띄워줘서

처리 상태를 사용자에게 알릴 수 있습니다. 보통 큰 용량의 파일이 업로드 될때는 JSP등의 페이지로 처리 하기 보다는 별도의

업로드 모듈을 사용하는것이 낫겠지만 5MB~10MB내의 파일이 오갈때에는 굳이 그럴 필요없이 웹으로만 구현하는것도

충분하다고 생각합니다. PC의 경우 굳이 프로그레스바를 보여주는것 보다는 간단하게 위와 같은 방법으로 처리하는것이

나을지 모르겠으나 스마트폰의 전송속도는 3G망이나 4G나 일반 유선통신 속도와 비교할것이 못되기도 하고 잘 안터지는

지역에서는 스피너 이미지로 프로그레스바를 보이는것 만으로는 사용자가 작업 완료 여부를 알 수 없기 때문에 만들어

보게 됐습니다.


progressbarex.zip

※압축첨부한 예제 파일들의 경우 거의 그대로 적용하시면 실행 되실겁니다. JAVA파일의 경우 package를 환경에 맞게

추가 하시면 됩니다. 구현이 목적으로 성능등은 고민한 흔적같은 것 없습니다. 그냥 예제로 봐주세요.ㅋ

그리고 Spring MVC컨트롤러에 대한 이해가 없으신 분들은 *.do로 호출되는 기능들만 따로 떼서 구현해보셔도 되겠습니다.

예전에 JAVA의 Swing을 사용해서 Thread 구현하여 만들어본 프로그레스바 외에는 이제까지 웹으로 프로그레스바를

구현해본적이 없어서 바로 감이 오지는 않았고 사실 구현 전에는 적당한 예제 소스를 많이 검색해 봤습니다. 근데 괜찮다 싶은

모듈이어도 적용하기가 어려운 경우가 많고 모바일 웹 화면에서 사용하려면 UI도 수정해야 되는 경우가 많았고 대부분의

예제는 JSP → <form> action으로 서블릿 호출 → 서블릿에서 Apache Commons Upload를 통해

전송상태를 PrintWriter로 출력 하는 것이 대부분이었습니다. 또한 파일 업로드 자체는 XMLHttpRequest에서 지원하지

않아 jQuery.form 라이브러리를 사용한 ajaxForm()등을 사용하여 업로드 하는 방식을 많이 보게 됐는데 잘 적용되지

않았습니다. 저의 경우 Spring Web MVC를 사용하여 구현하고 있었는데 이 구조 특성상 request가 완료된후 페이지로

포워딩 하므로 중간에 프로그레스 상태를 listen하여 화면에 출력될때 어떻게 하면 좋을까 고민이 됐습니다. 한참 고민중에

세션이 생각이 나더군요. 제가 만든 예제의 대략적인 프로그레스바 출력 흐름은 다음과 같습니다.

progressbardemo.jsp 에서 파일 선택후 전송버튼 클릭시 AJAX로 fileupload.do

(스프링 컨트롤러(Controller.java)에 매핑된 주소) 호출 ,

호출시에 jQuery.ajaxStart()에서 uploadstatus.do를 호출하여 fileupload.do가 실행중의 프로그레스 상태를

얻어오기 위해 주기적으로 UploadProgressListener를 호출함

fileupload.do에서 Apache Commons Upload를 사용하여 업로드 처리 중

UploadProgressListener에 세션을 셋팅 →

UploadProgressListener의 update()메소드에서 업로드 진행상태를

세션에 셋팅해서 upstatus.jsp로 포워딩함 →

초기에 progressbardemo.jsp에서 ajaxStart()에서 uploadstatus.do가 호출될때 세션에 셋팅된 파일의 전송정보

(읽은 바이트수, 전체크기, 전송속도) 등을 JSON으로 출력함 →

전송완료후 clearInterval로 setInterval로 확인하던 업로드 상태를 중지시킴

jQuery가 AJAX요청시에 지원하는 표현 간단하면서 강력한 기능들이 많은 도움이 됐네요. 이걸 이전 방식으로 XMLHttpRequest

를 일일히 얻어와서 구현하는 형태로 만들었다면 소스량도 많아지고 많이 복잡했겠지요. 예제 내용은 사실 효율적으로 보면

매우 좋지 않습니다. 결과만 보기위해서 만들긴 했습니다만 일단 실 서비스에 적용해서 사용한다면 파일 업로드가 진행중일때

upstatus.jsp가 JSON String을 얻어오기 위해 계속해서 호출이 되므로 여러 사용자가 사용시 서버에 많은 부하가 걸릴 수

있습니다. 이 방법보다는 MVC컨트롤러가 호출될때 세션에 셋팅된 파일 전송 정보 JSON Object를 얻을수 있는 방법을

전에 어느분의 블로그에서 본것 같은데 기억이 가물하네요. 찾아서 한번 적용해 봐야겠습니다.

또한 Spring Framework 자체에서 Apache Commons Upload를 Injection해서 사용할 수 있는 방법도 봤습니다만

일단은 익숙해진 방법으로 구현했습니다. 좀 더 효율적인 방법으로 수정해서 사용하실 분은 공유 해주셨으면 좋겠네요.

보통 파일 업로드 모듈이 Flash나 Flex를 사용한 환경이 많아 모바일 환경에서 사용자체는 가능하나 잘 맞지 않고 현재 제가

만든 게시판의 경우 하이브리드 앱 형태로 웹뷰를 사용한 앱위에서 웹페이지를 호출하는 형태인데 자료를 찾다보니 이 또한

안드로이드 앱 자체에서 업로드 진행상태 구현 방법에 대해서만 많이 나와 있어서 구현해 보게 됐습니다. 다운로드의 경우

에도 구현할수는 있겠지만 보통 다운로드의 경우 브라우저에서 진행상태를 보여주는 경우가 많으므로 생략했습니다.

좀 더 효율적인 방법 제시해주시는 분들은 언제나 환영입니다^^


얼마전 공부겸 해서 Spring Framework 2.5, jQuery, iBatis를 사용한 모바일 전용 게시판을 제작 했습니다.

처음에는 그냥 기본적인 기능만 만들고 다른것 좀 공부 하려고 했는데 만들다 보니 재미가 붙어서 파일 업로드 기능도

추가 하게 됐습니다. 다중 업로드도 구현하려고 했지만 귀찮아서 단일 업로드만 구현하게 됐네요.

여튼.. 파일 업로드를 워낙 오랜만에 구현하려다 보니 기억나는 것도 없고 뭘 사용할까 고민이 됐습니다. 그래서 검색하다보니

가장 많이 사용하는듯 한 라이브러리로 cos.jar가 눈에 띄었습니다.

(com.oreilly.servlet의 약자이죠. 오라일리 책 시리즈로 으로 유명한..)

하나는 Apache Commons Upload 였는데 둘다 구현하기가 까다로운 편은 아니나 cos.jar가 구현방식 자체는 상당히

간편해 보였습니다. 그래서 cos.jar를 사용해서 파일 업로드를 구현하기로 맘 먹게 됐습니다. 하지만 cos.jar를

사용해서 구현 후에 다시 Apache Commons Upload를 사용하게 되었는데 구현시의 다른 부가적인 조작 편의성에 대해

의견을 써볼까 합니다.

※구현 방법등에 대해선 다루지 않겠습니다. 다른 훌륭한 분들이 올리신 구현 소스들은 조금만 검색해보셔도 많으니까요.

   또한 사용예로 제가 중간에 넣은 소스들은 단지 비교를 위한 예제 이므로 동작하지 않습니다. 참고만 하세요.


기능구현은 위와 같이 간단히 하기로 했습니다. 파일 선택 부분은 기능 구현 완료시 게시판의 UI에 추가 하기 위해서 스타일링

했네요. cos.jar 를 사용하던 Apache Commons Upload를 사용하던 업로드 시에는 BInary 코드로 보내게 되므로

<form>을 통해 전송시 enctype="multipart/form-data", method="post" 를 추가해서 보내게 되어 있습니다.

이렇게 전송된 데이터는 cos.jar를 사용할 경우 HttpServletRequest자체를 넘겨받아 내부에서 업로드를 몽땅 처리 하도록 되어

있습니다.

사용예)

MultipartRequest multi = null; 
  try{
    multi = new MultipartRequest(request, uploadFilePath, uploadFileSizeLimit, "utf-8",

new DefaultFileRenamePolicy());

   }catch(Exception e){}

위와 같이 MultipartRequest 의 객체가 생성되면서 넘겨받은 HttpServletRequest, 업로드할 경로, 업로드할 사이즈 제한

값등을 넘겨주면 바로 파일이 업로드 됩니다. 간단히 기능 구현시 이와 같이 사용법이 너무 심플하고 편하기 때문에 많이

이용되고 있는것 같습니다. 그럼 이번에는 Apache Commons Upload의 구현 방식을 보겠습니다.

사용예)

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

if( isMultipart ) {
    File temporaryDir = new File(uploadFilePath);
    DiskFileItemFactory factory = new DiskFileItemFactory();
    factory.setSizeThreshold(factoryThresholdLimit);
    factory.setRepository(temporaryDir);
    ServletFileUpload upload = new ServletFileUpload(factory);

    List items = null;
    try {
        items = upload.parseRequest(request);
    } catch (FileUploadException fe){
        System.out.println(fe);
    }
    if(items!=null){
        Iterator iter = items.iterator();
        while (iter.hasNext()) {
            FileItem fileItem = (FileItem) iter.next();
            if (fileItem.isFormField()){
                //파일을 제외한 나머지 파라미터 처리
            }else{
                //파일 업로드 처리
                try{
                    File uploadedFile = new File(uploadFilePath, serverFileName);
                    fileItem.write(uploadedFile);
                } catch(Exception e){                      
                    System.out.println(e);
                }
            }
        }
    }
}

분석을 떠나서 cos.jar의 구현 방식에 비해 뭔가 좀더 복잡해졌다는 느낌부터 오실 것 같습니다. 물론 더 간단하게 구현은

가능합니다만 그냥 라인 수로만 봤을때 cos.jar가 더 심플합니다. 이제 구현 방식에 대해 비교를 좀 더 해보죠.

cos.jar를 HttpServletRequest를 통채로 넘겨받아 라이브러리 내부에서 전체적인 처리를 합니다. 보통 파일 업로드를

구현할때 단일 모듈로 파일 업로드 자체만을 구현할때도 있겠지만 보통은 파일정보 외의 다른 정보도 처리 해야 할때가

많이 있습니다. cos.jar사용시 기존의 HttpServletRequest로는 파일 정보외의 정보를 받을수가 없습니다. 위의 구현

예로 보시면 MultipartRequest multi 를 통해 다른 파라미터를 처리 할 수 있습니다.

ex) String name = multi.getParameter("name");

cos.jar의 경우 소스를 함께 제공하기 때문에 소스를 수정하여 여러가지 컨트롤을 개발자가 수정할수도 있겠지만

남이 만들어놓은 소스를 일일히 분석해서 구현하기에는 저같이 귀차니즘에 빠진 개발자분들에게는 무리라고 봅니다.

cos.jar가 업데이트가 자주 이뤄지진 않지만 혹시라도 업데이트가 이뤄지면 해당 내용에 맞춰서 다시 수정해야 하는

불편함도 감수해야 할수도 있겠죠. 제 경우에는 외부 라이브러리는 피치못할 사정이 없는한 수정하는 경우를 피하는

편입니다. 어쨋든 저렇게 MultipartRequest의 getParameter()를 사용해서 나머지 파라미터들을 처리 할수는 있으나

파일의 경우 보통 서버에 실 파일명으로 보존하는 경우는 그렇게 많지 않을것 같습니다. 저의 경우 직접 원본파일의

접근을 막기위해 중복되지 않는 난수 키값을 생성해서 원본파일명으로 저장 시키고 사용자가 웹에서 요청시에는

이 파일을 웹에서 접근가능한 context의 Temporary 디렉토리에서 읽어오도록 구현하는 것이 목적이었습니다.

하지만 cos.jar에서는 이와 같은 처리는 소스를 수정하지 않는한 불가능 하며 파일 업로드가 완료된후에 파일명을

바꿔주는 방식으로 밖에는 처리 할수가 없습니다. 혹시나 해서 찾아봤지만 제가 아는한은 수정밖에는 방법이

없었습니다. 그래서 Apache Commons Upload로 업로드 모듈을 교체 하게 됐습니다.

위의 예와 같이

            FileItem fileItem = (FileItem) iter.next();
            if (fileItem.isFormField()){ //
파일을 제외한 나머지 파라미터 처리 }

파일 정보외의 파라미터들을 처리 할수 있으며 이 정보를 HashMap에 담아 처리 할수도 있겠습니다. 물론 cos.jar 사용

시에도 파일정보외의 파라미터들을 처리하는데에는 불편한 점은 없었습니다.

            }else{
                //파일 업로드 처리
                try{
                    File uploadedFile = new File(uploadFilePath, serverFileName);
                    fileItem.write(uploadedFile);
                } catch(Exception e){                      
                    System.out.println(e);
                }
            }


하지만 위와같이 파일 정보에대한 가공처리 후 실제 디스크에 쓰기 작업을 하는 동작이 이뤄져야 할때

Apache Commons Upload를 사용하는 것이 상당히 맘에 들었습니다. 또한 구현하다보니 파일 다운로드 시에는 굳이

진행상태를 표시해줄수 있는 프로그레스바를 구현하지 않아도 진행상태를 알수있어서(모바일의 경우) 구현할 필요가 없었지만

업로드의 경우 프로그레스바가 필요했습니다. 그냥 스피너 프로그레스바로 진행중이라는 상태만 보여줄수도 있겠지만

누구나 내가 기능을 실행했을때 얼마나 진행됐는지를 알고싶어 하는것이 당연하겠지요. 그래서 결국 구현을 하다보니

cos.jar 사용(기본 라이브러리 상태)으로는 이 역시 불가능 하다는 결론을 내렸습니다.

(혹시 방법이 있으신분 있다면 피드백 주시면 대단히 감사하겠습니다!)

Apache Commons Upload의 경우 ProgressListener를 구현하여 프로그레스 상태를 Listen할수 있으므로 진행상태를

웹상에서 보여주는것이 가능합니다.

사용예)

           ProgressListener progressListener = new ProgressListener(){

                private long megaBytes = -1;
                public void update(long pBytesRead, long pContentLength, int pItems) {
                    long mBytes = pBytesRead / 1000000;
                    if (megaBytes == mBytes) {
                        return;
                    }
                    megaBytes = mBytes;
                    System.out.println("We are currently reading item " + pItems);
                    if (pContentLength == -1) {
                        System.out.println("So far, " + pBytesRead + " bytes have been read.");
                    } else {
                        System.out.println("So far, " + pBytesRead + " of " + pContentLength
                                           + " bytes have been read.");
                    }
                }
            };

            //프로그레스 리스너를 파일업로드시 추가한다.
            upload.setProgressListener(progressListener);

실제 디스크에 파일이 저장되기전 Apache Commons Upload의 경우 임시 파일 업로드를 진행합니다. 구현 하기에 따라

임시 업로드 디렉토리를 따뤄둬서 업로드 진행중 실패시 원본 저장소의 데이터를 해치지 않도록 할수도 있겠습니다.

또한 WEB-INF/web.xml 에 org.apache.commons.fileupload.servlet.FileCleanerCleanup 리스너를 추가하여

이와같은 쓰레기 파일들을 알아서 삭제하도록 할수도 있습니다.

성능상의 차이는 체감상 크게 느껴지지 않아서 잘 모르겠습니다. 두 가지 라이브러리가 사용용도에 따라서 훌륭한 모듈이라

모듈의 문제로 속도가 저하 된다거나 하기 보다는 I/O가 발생하는 Task이므로 하드웨어, 전송환경등이 더 중요하다고

생각됩니다. 글을 작성하다보니 cos.jar를 너무 무시 한듯 하네요. ㅎㅎ 정리하자면


cos.jar : 웹 to 웹으로 전송해야되는 간단한 데이터, 진행상태 표시 구현이 필요없는 파일 업로드 기능 구현시

매우 간단하게 구현 가능한 장점을 가짐, 소스가 제공되므로 개발자 편의에 따라 소스를 수정하여 사용할수도 있음.

(다만 얼핏 보기로는 cos.jar가 오픈소스는 아니라고 봤습니다. 이 부분에 대해서는 잘 판단해보시길..)

Apache commons upload : 일반적인 파일 업로드 기능 외에 파일명이나 저장되야할 위치에 대한 조작등 개발

의도에 따른 소스 구현이 좀 더 유연함. 업로드 진행상태를 알 수 있는 프로그레스바 구현을 ProgressListner를

통해 쉽게 구현 할 수 있음.

심플한 구현에 있어서는 cos.jar를 사용하는것이 감히 최고라고 말씀드릴수 있겠네요. 두개의 라이브러리 모두 장점이 있으니

적당한 라이브러리를 선택하셔서 개발시 도움이 됐으면 합니다. 자료를 찾다보니 구현방법은 많이 있는데 딱히 어떤 모듈을 구

현할때 사용햇으면 좋겠다 하는 내용이 없네요.