Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Resource Handling in Spring MVC

12,557 views

Published on

Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.

데모 코드 : https://github.com/arawn/resource-handling-in-springmvc

Published in: Software
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ..................................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ..................................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Resource Handling in Spring MVC

  1. 1. Resource Handling in Spring MVC
  2. 2. 박용권 SK planet : 봄싹(SpringSprout) : 한국 스프링 사용자 모임(KSUG) : 라 스칼라 코딩단 http://about.me/arawn : twitter / @arawnkr
  3. 3. Spring MVC에서 정적 자원(css, js, etc)을 처리해본 경험을 공유합니다.
  4. 4. Spring MVC : 리소스 제공(Serving) ✔ ResourceHttpRequestHandler : URL 패턴에 따라 정적 자원 요청을 처리 : org.springframework.core.io.Resource 인터페이스를 사용 servletcontext, classpath, filesystem, etc : HTTP 캐시 설정 기능 제공 expires 또는 cache-control를 사용한 캐시 설정 last-modified 헤더 평가를 통해 304 상태코드 응답 ! ✔ 설정 간소화 기능 제공 : Java 기반 설정시 WebMvcConfigurer.addResourceHandlers(…) 사용 : XML 기반 설정시 mvc:resources 태그 사용
  5. 5. 리소스 제공 설정 Java Config public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("리소스에 접근할 URL 패턴") .addResourceLocations("리소스가 있는 위치"); } XML Config <mvc:resources mapping="리소스에 접근할 URL 패턴" location="리소스가 있는 위치"/>
  6. 6. 리소스 제공 설정 리소스에 접근할 URL 패턴 정의 public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**") .addResourceLocations("/resources/"); } http://spring.io/resources/css/default.css http://spring.io/resources/js/spring-by-pivotal.png http://spring.io/resources/img/spring-by-pivotal.png
  7. 7. 리소스 제공 설정 리소스가 있는 위치 설정 public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**") .addResourceLocations("/resources/"); } http://spring.io/resources/css/default.css . "## WEB-INF $ "## classes $ &## lib &## resources &## css &## default.css
  8. 8. DEMO (리소스 제공 설정)
  9. 9. Resource 인터페이스에 대한 다양한 구현체 ✔ ServletContextResource ! ! ✔ ClassPathResource ! ! ✔ FileSystemResource ! ! ✔ UrlResource ! ! ✔ etc registry.addResourceHandler("/resources/**") .addResourceLocations("/resources/"); registry.addResourceHandler("/resources/**") .addResourceLocations("classpath:/resources/"); registry.addResourceHandler("/resources/**") .addResourceLocations("file:/resources/“); registry.addResourceHandler("/resources/**") .addResourceLocations("http://spring.io");
  10. 10. 리소스를 효율적으로 다루는 캐시 설정 Java Config public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**") .addResourceLocations("/resources/") .setCachePeriod(31556926); } XML Config <mvc:resources mapping="/resources/**" location="/resources/" cache-period="31556926"/>
  11. 11. 리소스를 효율적으로 다루는 캐시 설정 Java Config public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**") .addResourceLocations("/resources/") .setCachePeriod(31556926); } Response headers : Cache-Control: "max-age=31556926, must-revalidate" Expires: "Sun, 16 Nov 2014 07:39:20 GMT" Last-Modified: "Thu, 20 Nov 2014 10:49:18 GMT"
  12. 12. 리소스를 효율적으로 다루는 캐시 설정 Java Config public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/resources/**") .addResourceLocations("/resources/") .setCachePeriod(0); } Response headers : Pragma: "no-cache" Cache-Control: "no-cache, no-store" Expires: "Thu, 01 Jan 1970 00:00:00 GMT”
  13. 13. DEMO (캐시 설정에 따른 동작)
  14. 14. Multi Module Web Application / Backend) / Server-side) (Frontend (Client-side
  15. 15. 프로젝트 구조 "## build.gradle - Gradle : 빌드 자동화 "## gradle.properties "## settings.gradle "## backend - Spring IO Platform 사용해 개발된 Server-side 모듈 $ &## src $ "## main $ $ "## java $ $ &## resources $ &## test &## frontend - 정적 자원(html, css, javascript)을 제공하는 Client-side 모듈 "## package.json "## bower.json "## Gruntfile.js &## src "## assets "## helpers "## includes "## layouts "## libs &## pages
  16. 16. backend에 적용된 기술 훑어보기 "## build.gradle - Gradle : 빌드 자동화 "## gradle.properties "## settings.gradle "## backend - Spring IO Platform 사용해 개발된 Server-side 모듈 $ &## src $ "## main $ $ "## java $ $ &## resources $ &## test &## frontend - 정적 자원(html, css, javascript)을 제공하는 Client-side 모듈 "## package.json "## bower.json "## Gruntfile.js &## src "## assets "## helpers "## includes "## layouts "## libs &## pages ✔ Spring Boot : Spring IO Platform 기반 개발을 빠르고 다양한 방법으로 시작 : 애플리케이션 기능외 필요한 공통 컴포넌트를 제공 ✔ Thymeleaf : HTML 태그/속성 기반의 템플릿 엔진 : Spring MVC & Security 와 통합을 위한 라이브러리 제공
  17. 17. frontend에 적용된 도구 훑어보기 "## build.gradle - Gradle : 빌드 자동화 "## gradle.properties "## settings.gradle "## backend - Spring IO Platform 사용해 개발된 Server-side 모듈 $ &## src $ "## main $ $ "## java $ $ &## resources $ &## test &## frontend - 정적 자원(html, css, javascript)을 제공하는 Client-side 모듈 "## package.json "## bower.json "## Gruntfile.js &## src "## assets "## helpers "## includes "## layouts "## libs &## pages ✔ NPM(Node Package Manager) : 개발환경 및 의존성 관리 ✔ Bower : JavaScript Lib 의존성 관리(jquery, bootstrap, etc) ✔ Grunt : Client-side 빌드 자동화 : 다양한 Plugin 지원( jshint, usemin, filerev, assemble, etc )
  18. 18. frontend에 적용된 기술 훑어보기 (1/3) "## backend &## frontend "## package.json "## Gruntfile.js "## bower.json "## src $ "## assets $ $ "## css $ $ $ "## cover.css $ $ $ &## default.css $ $ &## js $ $ &## default.js $ "## libs $ $ "## bootstrap $ $ &## jquery $ "## includes $ $ "## common-css.hbs $ $ &## common-scripts.hbs $ "## layouts $ $ &## default.hbs $ &## pages $ &## about.hbs &## dist "## assets $ "## css $ $ &## style.min.99501602.css $ &## js $ &## app.min.264ed108.js &## pages &## about.html ✔ CSS/JS 최적화(병합 및 압축) : grunt-usemin : grunt-contrib-concat : grunt-contrib-cssmin : grunt-contrib-uglify ✔ Fingerprinting : grunt-filerev 더 알아보려면 여기로! http://goo.gl/oGVCYT
  19. 19. frontend에 적용된 기술 훑어보기 (2/3) "## backend &## frontend "## package.json "## Gruntfile.js "## bower.json "## src $ "## assets $ $ "## css $ $ $ "## cover.css $ $ $ &## default.css $ $ &## js $ $ &## default.js $ "## libs $ $ "## bootstrap $ $ &## jquery $ "## includes $ $ "## common-css.hbs $ $ &## common-scripts.hbs $ "## layouts $ $ &## default.hbs $ &## pages $ &## about.hbs &## dist "## assets $ "## css $ $ &## style.min.99501602.css $ &## js $ &## app.min.264ed108.js &## pages &## about.html ✔ 템플릿(HTML) 생성 : assemble
  20. 20. frontend에 적용된 기술 훑어보기 (3/3) 이제 코드로 만나보시죠! "## backend &## frontend "## package.json "## Gruntfile.js "## bower.json "## src $ "## assets $ $ "## css $ $ $ "## cover.css $ $ $ &## default.css $ $ &## js $ $ &## default.js $ "## libs $ $ "## bootstrap $ $ &## jquery $ "## includes $ $ "## common-css.hbs $ $ &## common-scripts.hbs $ "## layouts $ $ &## default.hbs $ &## pages $ &## about.hbs &## dist "## assets $ "## css $ $ &## style.min.99501602.css $ &## js $ &## app.min.264ed108.js &## pages &## about.html
  21. 21. frontend가 가출한 이유 "## backend &## frontend "## package.json "## Gruntfile.js "## bower.json "## src $ "## assets $ $ "## css $ $ $ "## cover.css $ $ $ &## default.css $ $ &## js $ $ &## default.js $ "## libs $ $ "## bootstrap $ $ &## jquery $ "## includes $ $ "## common-css.hbs $ $ &## common-scripts.hbs $ "## layouts $ $ &## default.hbs $ &## pages $ &## about.hbs &## dist "## assets $ "## css $ $ &## style.min.99501602.css $ &## js $ &## app.min.264ed108.js &## pages &## about.html ✔ dependency management ✔ modularity ✔ tests ✔ build automation ( vs artifacts)
  22. 22. 지금부터 Frontend의 자원(html, css, javascript, image)을 사용하는 방법을 살펴봅니다.
  23. 23. Frontend 의존성 다루기 frontend backend
  24. 24. 개발자의 친구 복붙- "## backend $ &## src $ "## main $ $ "## java $ $ "## resources $ $ &## webapp $ &## test $ "## java $ &## resources &## frontend &## src $ "## assets $ "## helpers $ "## includes $ "## layouts $ "## libs $ &## pages &## dist "## assets &## pages crtl + v crtl + c
  25. 25. Web Libraries in Jars WebJars ✔ Client-side 웹 라이브러리를 JAR로 묶어서 제공하는 서비스 ✔ JVM 기반 빌드 도구(gradle, maven, sbt, etc)를 지원 (maven 저장소) bootstrap-3.3.1.jar &## META-INF &## resources &## webjars &## bootstrap &## 3.3.1 "## css $ "## bootstrap.css $ &## bootstrap.min.css "## js $ "## bootstrap.js $ &## bootstrap.min.js "## fonts "## less &## webjars-requirejs.js <dependencies> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.1</version> </dependency> </dependencies>
  26. 26. DEMO (Servlet 3에서 webjars 사용)
  27. 27. Gradle로 통합하기 "## build.gradle "## backend $ &## src $ "## main $ $ "## java $ $ "## resources $ $ &## webapp $ &## test &## frontend &## src $ "## assets $ "## helpers $ "## includes $ "## layouts $ "## libs $ &## pages &## dist "## assets &## pages frontend.jar 로 만든 후 backend 모듈에 의존성을 추가!
  28. 28. frontend를 빌드 후 jar로 만들기 "## build.gradle "## backend $ &## src $ "## main $ $ "## java $ $ "## resources $ $ &## webapp $ &## test &## frontend &## src $ "## assets $ "## helpers $ "## includes $ "## layouts $ "## libs $ &## pages &## dist "## assets &## pages project(':frontend') { apply plugin: 'java' ! task npmInstall(type:Exec) { // do something } ! task gruntBuild(type:Exec, dependsOn: [npmInstall]) { // do something } ! jar { from 'dist' includeEmptyDirs = false } jar.dependsOn gruntBuild }
  29. 29. backend에 frontend 의존성 추가 "## build.gradle "## backend $ &## src $ "## main $ $ "## java $ $ "## resources $ $ &## webapp $ &## test &## frontend &## src $ "## assets $ "## helpers $ "## includes $ "## layouts $ "## libs $ &## pages &## dist "## assets &## pages project(':frontend') { apply plugin: 'java' ! task npmInstall(type:Exec) { // do something } ! task gruntBuild(type:Exec, dependsOn: [npmInstall]) { // do something } ! jar { from 'dist' includeEmptyDirs = false } jar.dependsOn gruntBuild } ! project(':backend') { apply plugin: 'war' ! dependencies { runtime project(':frontend') } }
  30. 30. DEMO (Gradle 통합과 자원 사용)
  31. 31. 개발과 배포는 다르다
  32. 32. frontend: 배포시에는 최적화된 자원을 사용 > grunt build:release "## backend &## frontend "## src $ "## assets $ $ "## css $ $ "## img $ $ &## js $ "## libs $ $ "## jquery $ $ &## bootstrap $ &## pages &## dist "## assets $ "## css $ $ &## style.min.6bde543a.css $ &## js $ &## app.min.142ca07c.js &## pages &## about.html <!DOCTYPE html> <html lang="ko"> <head> <link href='/assets/css/style.min.6bde543a.css' rel='stylesheet' type='text/css'/> </head> <body> <div class="site-wrapper"> // 생략 </div> <script src='/assets/js/app.min.264ed108.js'></script> </body> </html>
  33. 33. frontend: 배포시에는 최적화된 자원을 사용 > grunt build:release "## backend &## frontend "## src $ "## assets $ $ "## css $ $ "## img $ $ &## js $ "## libs $ $ "## jquery $ $ &## bootstrap $ &## pages &## dist "## assets $ "## css $ $ &## style.min.6bde543a.css $ &## js $ &## app.min.142ca07c.js &## pages &## about.html Classpath 위치한 자원을 사용 ! // build.gradle project(':frontend') { sourceSets.main.resources { srcDir 'dist' } } ! // Java Config registry.addResourceHandler("/assets/**") .addResourceLocations("classpath:assets/");
  34. 34. frontend: 개발시에는 작성중인 css, js 사용 > grunt build:develop <!DOCTYPE html> <html lang="ko"> <head> <link href="/libs/bootstrap/dist/css/bootstrap.css"/> <link href="/assets/css/default.css"/> </head> <body> <div class="site-wrapper"> // 생략 </div> <script src="/libs/jquery/dist/jquery.js"/> <script src="/libs/bootstrap/dist/js/bootstrap.js"/> <script src="/assets/js/default.js"/> </body> </html> "## backend &## frontend "## src $ "## assets $ $ "## css $ $ $ &## default.css $ $ "## img $ $ &## js $ $ &## default.js $ "## libs $ $ "## jquery $ $ &## bootstrap $ &## pages &## dist &## pages &## about.html
  35. 35. backend: 개발시에는 어떻게 자원에 접근하지? > grunt build:develop “어라!? dist/assets이 없네!?” "## backend &## frontend "## src $ "## assets $ $ "## css $ $ $ &## default.css $ $ "## img $ $ &## js $ $ &## default.js $ "## libs $ $ "## jquery $ $ &## bootstrap $ &## pages &## dist &## pages &## about.html
  36. 36. backend: 개발시에는 어떻게 자원에 접근하지? > grunt build:develop src를 Classpath에 추가해볼까? ! // build.gradle project(':frontend') { sourceSets.main.resources { srcDirs 'dist', 'src' } } ! // console > gradle build "## backend &## frontend "## src $ "## assets $ $ "## css $ $ $ &## default.css $ $ "## img $ $ &## js $ $ &## default.js $ "## libs $ $ "## jquery $ $ &## bootstrap $ &## pages &## dist &## pages &## about.html
  37. 37. backend: 개발시에는 어떻게 자원에 접근하지? 없는게 없는 frontend.jar ! frontend.jar "## assets $ "## css $ $ &## default.css $ "## img $ &## js $ &## default.js "## libs $ "## jquery $ &## bootstrap &## pages > grunt build:develop "## backend &## frontend "## src $ "## assets $ $ "## css $ $ $ &## default.css $ $ "## img $ $ &## js $ $ &## default.js $ "## libs $ $ "## jquery $ $ &## bootstrap $ &## pages &## dist &## pages &## about.html 이건 아니야… ;;;
  38. 38. backend: 환경에 따른 자원 접근 전략 변경 "## backend &## frontend "## src $ "## assets $ $ "## css $ $ "## img $ $ &## js $ "## libs $ $ "## jquery $ $ &## bootstrap $ &## pages &## dist "## assets $ "## css $ "## img $ &## js &## templates &## about.html String locations; ! if(개발) { locations = src/assets 사용 } else { locations = dist/assets 사용 } ! registry.addResourceHandler("/assets/**") .addResourceLocations(locations);
  39. 39. DEMO (환경에 따른 자원 접근 전략 변경)
  40. 40. 회고
  41. 41. 더 하고 싶었던 이야기가 있었지만…
  42. 42. 묻고 답하는 시간 https://github.com/arawn/resource-handling-in-springmvc
  43. 43. 끝.

×