Vue.js + Spring boot ( Thymeleaf 설정 ) feat.nuxt.js

Vue.js 를 이용하여 어느정도 화면들을 만들어 냈다면 이제 dev 서버에서가 아닌 어디서 구동을 시킬지의 대한 선택이 필요하다. 

 크게 두가지로 나눌수 있다. 프런트 웹서버를 사용하여 구동을 시키거나 백엔드 영역에서 서버사이드에서 구동시키느냐에 따라 구현하는 방식이 다르다. 

 프런트 서버를 따로 구축할경우 간단하게 Vue.js 에서 서포팅 해주는 nuxt.js 를 사용하면된다.  nuxt.js 는 vue2 , vue router, vuex , vue server render , vue-meta 등의 기능을 제공한다. 가장 중요한점은 용량이 53kb 정도 밖에 안되는 아주 가벼운 프레임워크이다. 

 프로젝트의 모든 UI 렌더링을 nuxt.js 를 통해 사용이 가능하며 간단한 옵션으로 SPA 모드 설정이 가능하다. 기본적으로 npm 을 통해 설치가 가능하고 nuxt.js 를 기능을 활용할 경우 서버 없는 정적 생성 웹 어플리케이션을 만들수 있다. 

 하지만 난 spring boot 와 vue.js 를 같이 연동해서 사용해보고 싶기 때문에 nuxt.js 는 패스 하려고 한다. 

그래서 일단 알아보는건 이정도로하고 자세한건 공식 가이드가 있으니 추후 참조하면 될거 같다. ( https://ko.nuxtjs.org/guide )

 

 Spring boot 와 vue.js 를 연동하기이전에 지원가능성 여부를 확인해보면  Spring boot 는 일단 JSP 에게 친절하지 않다. 언젠가부터 JSP 에 대한 지원이 점점 극악 무도하게 변하는거 같다. 여전히 지원을 하지만 jar 로 패키징해서 깔끔하게 사용할경우 JSP 는 정상 동작이 힘들다. 알아본 결과로는 여러가지 꼼수들로 ( webapp 안에 WEB-INF 를 임의로 만들다던가.. ) JSP 를 사용했던거같은데 그 일부 꼼수들이 정상 동작을 안하는 상황이다 ( spring boot 2.x 버전 기준 ) 그렇다면 war 로 묶어서 기존에 톰캣에 배포하듯이 쓸것인가 ? 

 개인적으로는 spring boot 는 jar 형태로 패키징해서 임베디드 된 was 를 사용하는 형태가 가장 좋다고 생각한다. war로 묶어서 배포했을때 JSP 파일 하나하나를 실제 서버에서만 주먹구구식으로 고치는바람에 배포를 다시할경우 문제가 생기는 경우를 너무 많이 봐서 개인적으로는 jar 파일 형태를 지향한다. 

 그럼 jsp 는 사용 불가 , html 은 ? 당연 사용 가능하다. 그리고 vue.js 로 화면을 구성할때 기본적인 베이스는 html 파일로 되어져 있다. 그렇기 때문에 html 파일만 불러낼수 있게 세팅을 한다면 vue.js 도 충분히 쉽게 로드가 될거 같았고 실제로 그랬다. 

html 파일을 불러내기 위해 여러 가지 기능을 spring 에서 지원한다. jsp , velocity, Thymeleaf , freemarker 등 지원되는걸로 알고 있다. 

 그중 꾸준히 업데이트가 되고 있는것은 Thymeleaf , Handlebars 두가지라고 알고 있다. 구글링을 해보면 Handlebars  를 추천하는 사람도 있지만  spring 진영에서는 Thymeleaf  를 밀고 있다. 문법이 간단하고 설정만 해두면 거의 손을 대지 않아도 될정도로 유지보수성도 좋다. 

/**
 * Thymeleaf 설정 config
 * html 경로, 인코딩 등을 설정 가능함.
 */
public class ThymeleafViewResolverConfig {

  @Bean
  public ViewResolver thymeleafViewResolver() {
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(thymeleafTemplateEngine());
    viewResolver.setCharacterEncoding("UTF-8");
    viewResolver.setOrder(0);
    // Important!!
    // th_page1.html, th_page2.html, ...
    viewResolver.setViewNames(new String[] { "th_*" });
    return viewResolver;
  }

  // Thymeleaf template engine with Spring integration
  @Bean
  public SpringTemplateEngine thymeleafTemplateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver(thymeleafTemplateResolver());
    templateEngine.setEnableSpringELCompiler(true);
    return templateEngine;
  }

  @Bean
  public SpringResourceTemplateResolver springResourceTemplateResolver() {
    return new SpringResourceTemplateResolver();
  }

  // Thymeleaf template resolver serving HTML 5
  @Bean
  public ITemplateResolver thymeleafTemplateResolver() {
    ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
    templateResolver.setPrefix("templates/view/");
    templateResolver.setCacheable(false);
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode(TemplateMode.HTML);
    templateResolver.setCharacterEncoding("UTF-8");
    return templateResolver;
  }

}

기본적인 설정은 java config 로 설정 했다. 요즘 대세는 java config 라고 하더라. xml 을 정말 싫어 하는 나로써는 참 좋다. 뭔가 개발자 스럽게 세팅이 가능한거 같아서 마음에 든다. 

View Resolver 세팅들에 관한것과 Engine 에 대한 설정이다.  이렇게만 설정을 해주면 Thymeleaf 가 알아서 구동이 된다. 아마 개발자가 설정중에 신경 써야하는 부분은 UTF-8 설정과  아래 설정 값들만 상황에 맞게 조절 해주면 될거같다. 

    templateResolver.setPrefix("templates/view/");
    templateResolver.setCacheable(false);
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode(TemplateMode.HTML);
    templateResolver.setCharacterEncoding("UTF-8");

 실제로 이 설정으로 구동에 성공했고 jar 로 html 까지 모조리 패키징해서 배포한뒤 실제 동작도 확인 했다. 구글링을 하다보면 사람마다 조금 씩 다르고 공식 가이드를 봐도 생각보다 내 상황에 잘 맞지 않는 경우가 종종 있었다. 가장 정확했던건 공식 가이드였고 어느정도 참고를 해서 나에게 맞게 사용중이다. 아마 앞으로도 이 설정값을 자주 사용하지 않을까 싶다. 슬슬 몇년동안 같이 동고동락했던 jsp 는 떠나 보내주려고한다.