React를 SpringBoot에서 서버사이드 랜더링하기 #1

최근 React Korea 커뮤니티에서 Spring과 React를 접목하려는 분들이 많아서 개인적으로 왜 저런 조합을 가져갈까 의아해 했는데 그 이유를 이제야 알았다. 첫번째 이유는 우리나라에 Java 개발자가 많다는 것이고, 두번째는 그 개발자들이 주로 서버 프로젝트로 Spring을 쓰기 때문이고, 그래서 많은 회사들은 Spring을 레거시로 들고 있을테고, 개발자는 여전히 힘들고, React는 뭔가 쉬울것 같고, 그러다보니 기존 레거시에 한번 적용해보고 싶은 욕망은 당여한거고, 막상해보니 어렵고,… 뭐 이런 흐름과 생각이 존재한다는 것을 최근에 복직하고서 알게 됐다. 아무튼 그래서 이번 포스트는 그런 개발자들을 수고를 좀 줄여보고자 정리해봤다.

참고로 나는 Java를 jdk 1.6이 막 나오던 시절에 쓴게 마지막이고 Spring 2.0이 막 나오던 시절에 설정에 치여서 접었던 경험이 있다. 한마디로 Java와 Spring은 내 전문 분야가 아니다. 따라서 뭔가 친절하고 디테일한 설명이 없음을 미리 말해둔다.

0. 삽질을 막기 위한 안내

최신 트렌드에 맞게 일단 모든걸 최신버전으로 해봤다. 따라서 아래 조건이 아니면 안될수도 있음을 미리 말해둔다. React가 IE8 이하 버전은 사실상 버렸기 때문에 웹프로젝트로 React를 쓰려는 사람은 일단 말리고 싶다. 굳이 또 그 어려운 길을 걷겠다면 말리진않겠다. 참고로 IE8을 쓰려면 React 1.4 버전을 써야하고 ES3를 위해 몇가지 pollyfil을 해야하니 알아서들 잘 찾아보시라. IE8도 지원안한다면서 이게 쓸만한건가? 라는 생각이 들수도 있을텐데 다행히 모바일웹에는 IE가 없기 때문에 모바일웹만 서비스한다면 괜찮은 조합이 아니라 아주 훌륭한 조합니다.

  • SpringBoot + JSP + Gradle
  • JDK 1.8 (Java8 nashorn Javascript Engine)
  • React 1.5
  • Webpack

1. SpringBoot 시작하기

SpringBoot는 스프링 이니셜라이져라는 사이트에서 설정을 스켓폴딩했다. 이 사이트에서 디펜던시로 ‘Web’을 추가하고 다운로드받자. 그리고 압축을 풀어서 인텔리J로 연다. 그럼 인텔리J가 빌드를 뭘로 할꺼냐고 묻는다. 나는 Gradle로 선택했다.

2. SpringBoot 서버 설정하기

다음으로 인텔리J에서 서버를 추가하자.

서버는 SpringBoot를 선택한다.

Name과 Main class 그리고 Use classpath of modthod를 지정한다. 마지막으로 JDK는 1.8로 지정한다. Java8에는 크롬V8 자바스크립트 엔진과 호환되는 nashorn(나스호른, 코뿔소)이라는 자바스크립트 엔진이 들어가 있다. 서버사이드 랜더링을 위해 Java8에 기본 탑재된 자바스크립트 엔진을 이용할 예정이기 때문에 1.8이 필요하다. 물론 JDK 1.7 이하 버전에서는 rhino(라이노, 예도 코뿔소)라는 자바스크립트 엔진이 들어가 있는데 라이노 최신버전도 ES5까지는 지원한다고하니까 될수도 있지 싶은데 테스트는 안해봤다.

서버를 설정한 뒤에 실행해서 http://localhost:8080 에서 확인해보자. 여기까지 안되면 다음을 진행을 못한다.

3. JSP 로드하기

2번까지 됐다는 전제하에 이제는 JSP 로드를 위해 추가 설정을 해야한다. src/main/resources/application.properties 파일을 열어서 JSP 설정을 추가한다.

spring.mvc.view.prefix: /WEB-INF/jsp/  
spring.mvc.view.suffix: .jsp

다음으로 build.gradle 파일을 열어서 JSP를 불러올수있는 서블릿 모듈과 jasper 모듈을 추가한다.

dependencies {
    compile('org.springframework.boot:spring-boot-starter-web')
    testCompile('org.springframework.boot:spring-boot-starter-test')
    compile("javax.servlet:jstl")
    compile("org.apache.tomcat.embed:tomcat-embed-jasper")
}

그리고 잊지말고 꼭 그래들 빌드를 실행하자! 기본 SpringBoot 라이브러리에는 jasper가 기본으로 탑재되어 있지 않기 때문에 빌드를 실행해서 라이브러리를 땡겨오지 않으면 jsp 인식이 안된다. 요것때메 몇시간 삽질한 아픔이….OTL….

오늘은 여기까지
2편에서는 별도의 프로젝트로 리액트 샘플을 만들어본다.

불꽃남자

UI 개발자

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax