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편에서는 별도의 프로젝트로 리액트 샘플을 만들어본다.

D+286일, 프랑스 시골마을

오랜만에

페이스북이 아닌 블로그에 글을 남긴다. 파리 공항에서 차를 인도 받아 오랜만에 운전대를 잡았던 그날이 엊그제 같은데 벌써 9일째에 접어들었다. 이제 제법 도로 표지판이 눈에 들어오고 로터리에서 깜빡이도 켜주는 여유를 부리고 있다. 프랑스하면 파리와 보르도만 떠올랐는데 이제 나에게 프랑스는 드넓은 들판이 펼처진 농업국가 이미지가 제대로 박혔다. 설마 했는데 프랑스의 식량 자급율이 300%가 넘을줄이다. 그래서 그런것일까? 빵이 맛있다. 빵이 맛있으니 빵을 기본으로 하는 음식들이 모두 맛있다. 예를 들면 피자, 식빵, 햄버거… 물론 내가 한국에 있을때도 좋아했던 메뉴임을 부정하지는 않겠다. ㅋㅋ 아무튼 맛있다.

프랑스 시골마을

파리 시내에서 머물다 이제 이동을 할때가 되어 동쪽으로 방향을 잡았다. 한참을 가다보니 들판이 펼처진다. 눈이 호강한다. 아! 어디서 많이 본듯한 모습이었는데… 그렇구나! 고흐가 수없이 봐왔던 그 들판! 해질녁의 들판은 너무나 장관이다. 사실 들판 뿐 아니라 모든 풍경이 다 그림이다. 오늘 갔던 그 호수도 한국에선 찾아보기 어려운 모습이었다. 참고로 구글에선 오종 떵쁠로(Lac d’Auzon-Temple)라고 표기 되던 곳이다. 그리고 해질무렴 숙소에 왔더니 이곳도 장관이다. 잔디밭 나무 그늘아래 테이블을 셋팅하고 넘어가는 해를 바라보며 시원하게 칠링한 화이트 와인 한잔 두잔 하다보니 1박을 더 하기로 했다. 내일은 삽겹살을 좀 구워보자!!

낭만이 있는 삶

한국에선 저녁이 있는 삶을 꿈꿨지만 이제 여기에 낭만을 추가해야 할 것 같다. 날씨가 중요한 변수임을 부정하진 않겠지만 날씨가 아니라도 찾아보면 뭐 많지 않을까? 당장 먹고 살 궁리를 시작하면 다 잊어먹을수 있겠지만 애초에 없는 것과 잊어먹는 것은 다른 개념이다. 한국에 돌아가서 이전과 같은 삶으로 돌아가면 뭐 어떠냐? 내겐 낭만이 있었고 무엇이 낭만인지 알았다면 또 다시 꿈꿀수있다는 것이 중요한것 같다. 여행을 시작하지 않았다면 뭣이 낭만인지도 몰랐겠지. 그런면에선 분명 여행 전과 후는 다를수밖에 없다. 여행이 끝나가지만 나는 또다른 여행을 준비중이다.

여행 200일 단상

지난 5월 29일 여행 200일을 맞아 페이스북에 썼던 글을 옮김.


오늘 옆지기랑 보고타 시내를 걷다가 문득 세대별로 바라보는 여행이 좀 다른거 같다는 생각을 했다.

여행중에 만난 20대의 여행자들은 경험이 주를 이루는것 같다. 그것이 좋은 것이든 나쁜것이든 경험이 최대 자산이다. 나도 20대땐 그랬다. 경험이 최대 자산이라며 부단히도 돌아다녔다. 그땐 그랬다. 나는 얇고 넓게 아는게 좋았다.

30대 중반의 여행은 경험보다 사색이 많아진것 같다. 어떻게 살아갈것인가? 무엇을 보더라도 어떤 의미로 받아들이느냐가 중요해졌다. 다양한 경험보다는 선택과 집중을 한다. 여행중이지만 먹고 사는 문제와 정치에 눈을 떼지 못한다. 비록 체력은 20대가 아님을 인정하지만 열정 만큼은 동일하거나 더 크다고 자신할수있다.

40대 여행자를 많이 만나진 못했다. 아마도 그네들은 가족과 함께 하고 있을 것이다. 어디를 가든 가족과 함께하는 것이 중요한 순간일 것이다. 내가 꼬꼬마일때 우리 부모님도 그랬을 것이다. 가족이 중요하다.

50대의 여행은 가이드를 대동하는 것이 일반적이지만 그렇지 않는 분들도 만났다. 여행자는 모두가 같은 위치에 있다. 같은 주제로 이야기하고 비슷한 어려움을 겪는다. 그래서 사회에서 회사에서 그리고 가족안에서 마주하기 어렵던 젊은 친구들과 쉽게 어울리는 재미를 알아가고 있다고 했다.

60대 혹은 70대로 추정되는 여행자도 만났다. 나에게 와인 한잔을 건냈다. 너희는 젊다. 어디든 갈수있다 말했다. 많은 연세에 불구하고 버스타고 다닌다는 그 분의 호쾌함이 아직도 생생하다.

200일이 지나면서 점점 200일 이전의 나로 돌아가기 어렵겠다는 생각을 한다. 물론 돌아가서 적응하면 또 지금의 나를 잊고 잘 적응 할지도 모르겠다. 의식하고 살지 않으면 적응하기 마련이다.

300일엔 뭔 얘기를 끄적일지 100일뒤에 보자. ㅋ