origoni's Blog from Millky

origoni의 스프링 블로그 입니다.

[블로그개발_06] webjars를 이용한 bootstrap, jquery 적용해보기 (Spring Boot)

블로그개발 시리즈 - 다른글 : http://millky.com/@origoni/folder/30/post/list

라이브 데모 : http://blog.millky.com/post/list

자바 웹 개발 시작하기 : http://www.slideshare.net/origoni/presentations






webjars를 이용해 UI용 라이브러리, 자바스크립트 라이브러리를 쉽게 적용해 보자.


      



웹 개발에 있어서 UI(HTML, CSS, JavaScript)개발 부분은 빼놓을 수 없는 부분이다.

자바 (사람과 상호작용 하는)웹서비스 개발에서도 마찬가지 이다.


만약 bootstrap, jquery를 사용하고 싶으면 지금까지 어떻게 했을까?

  1. 다운로드 받아서 프로젝트에 넣어서 사용
  2. CDN 사용 (예 : <link href="//cdn.site.com/~/bootstrap.css" rel="stylesheet">)
  3. bower, grunt, yeoman 등 사용


1번의 경우 매우 번거럽다는 단점이 있다. 라이브러리 버전업 될때마다. 다시 받아서 다시 압축풀어 다시 복사해서 사용해야 한다...

spring_seminar_20141130_01

▲과거 반복과정이 많았던 의존성 관리(출처: 변정훈 개발자 슬라이드쉐어)


2번의 경우. 간단하긴 하지만. 느릴수도(?) 있고.. 가끔 문제가 생길 수 있다.
무슨 문제냐고? 서비스는 정상인다.. UI가 깨질 수 있다.???
밀키도 예전에는 2번 방식을 사용하고 있었다. 하루는 CSS가 로드가 안되서 보니.. 내가사용하는 인터넷 망 사업자 문제로 해당 CDN을 접속을 못하는것이었다. 사실 더 오래전 내가 일하던 회사에서도 한번 경험 하였었다;;
그리고.. 느리다고 말하는것은. 우리나라에 있는 CDN은 더 빠를수도 있겠지만 가끔 외국에 있는 CDN의 경우 위의 망 사업자 문제로 가끔은 더 느릴수도.. 있다.
아무튼 2번은 불안하다. (몇번 당해봐서 ㅠㅠ)


3번의 경우... 이미 3번 방식으로 사용중이시라면? 축하한다. 아래 글을 읽지 않으셔도 될 것 같다 ^^ 사실 나도 공부는 해보려 하고 있는데 ㅠㅠ 아직 서비스에 적용해본적이 없다.
관심 있으신 분들은 http://www.bloter.net/archives/214274 이 글을 참고 부탁드린다.


혹시 위의 두 방식 말고. 다른 방식을 사용하시는 분이 있으신가?

나의 경우 webjars를 사용한다. 위의 1번과 3번의 중간단계(일리가 없지)라고 생각하면.. ^^;


우리는 메이븐을 사용해 자바 라이브러리(jar)를 관리중이다.

서블릿(servlet) 3부터 라이브러리(WEB-INF/lib)에 있는 파일을 리소스 주소(META-INF/resources)를 통해 접근할 수 있게 되었다. 

webjars는 프론트 부분 라이브러리를 jar로 패키징 하여 메이븐(pom.xml)을 통해 관리할 수 있도록 도와준다.


앞으로 만드는 스프링 블로그 프로젝트에서는 webjar를 사용하여 UI라이브러리를 관리하겠다.

참고로.. webjars에 없는 라이브러리는 어떻게 해야 할까하고 걱정하시는 분이 있을까봐 미리 말씀드린다. 얼마전부터 Bower에 배포되어 있는 모든 라이브러리는 자동으로 webjars로 패키징 할 수 있는 부분이 생겼다.(불과 몇일전에는 NPM도 생겼다!) 


이렇게 진행하면 된다 ^^;;


우와 잡설이 너무 길어졌다;;


이제 원하는 라이브러리를 webjars/bower에서 검색해보자.

우선 부트스트랩을 사용하기 위해.. bootsrtap을 검색해보자.


우리는 빌드툴을 메이븐을 사용할 것이니 메이븐을 눌러보자.


dependency를 pom.xml에 추가 해보자.

<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.4</version>
</dependency>


같은 방식으로 jQuery도 찾을 수 있다.


역시 추가해보자.

<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>jquery</artifactId>
<version>2.1.3</version>
</dependency>


잠깐

메이븐 라이브러리 인데 그럼 메이븐 센트럴 레파지도리에서도 나오나?

그렇다. 나온다



아래와 같이 추가되면 되겠다..




이제 기존 hello 페이지를 수정해보자.

라이브러리 추가는

<link rel="stylesheet" href="/webjars/bootstrap/3.3.4/dist/css/bootstrap.min.css">

...

<script src="/webjars/jquery/2.1.3/dist/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.4/dist/js/bootstrap.min.js"></script>

이렇게 진항하면 된다.


코드는 여기 있다.


보면 /webjars/~~라는 곳에서 접근 할 수 있는데. 어디 있는걸까?

아래의 그림을 보면 이해가 갈 것이다.


Maven Dependencies를 찾으면 된다.




큰 그림으로 보면 아래와 같다.




프로젝트를 수행해보면~ 아래와 같은 화면을 볼 수 있다!




이렇게 해서 역시 간단하게!!

UI용 라이브러리들을 추가하고 관리할 수 있게 되었다.

부트스트랩 및 제이쿼리는 해당 사이트를 참고 부탁드린다.


블로그만들기 시리즈는.. 핵심? 만을 공유한다 ㅋ


이번 글의 코드는 ? https://github.com/origoni/Spring-Blog/releases/tag/v0.0.5

프로젝트 시작하는 방법은(for Windows User)? http://millky.com/@origoni/post/1145


다른글 : http://millky.com/@origoni/folder/30/post/list

깃헙 : https://github.com/origoni/Spring-Blog




웹 서비스 라고?

참고웹 서비스라고 말함에 있어서 용어적 혼동이 있을 수 있어서 여기에 적는다.

여기서 말하는 웹 서비스는..



이러하다.



back to top