[Spring Boot와 React 연동하기-1] 소개

이번에 새로운 포스팅을 하게되었습니다.

Spring의 사용방법을 익히고 표준적인 프로젝트를 완성하고 나서 모던한 웹애플리케이션을 구현하고 싶다는 생각이 들었습니다.

모던한 웹애플리케이션이라면 SPA(Single Page Application)이 딱 떠올라서 우선 JQuery와 Spring으로 SPA 블로그를 구현했었어요.

구현하는 것은 간단했지만 뒤로가기, 새로고침과 같은 기능을 구현하기 까다롭더군요.

그리고 코드가 너무 너저분해지는 문제가 있었고요.

그래서 React나 Angular를 사용해야겠다는 생각이 들어서 공식 튜토리얼을 따라서 해보았죠.

여태 Java 개발자 치고는 javascript에 자신이 있었는데..잘못생각했었다는 것을 꺠달았습니다.

그래서 javascript부터 다시 공부하고 그나마 쉬웠던 React를 이용해서 프로젝트를 구성하기로 결정했어요.

React의 사용법을 익히고 Spring과 React를 같이 사용해서 프로젝트를 구성하려니 막막하더군요.

한글로 된 자료는 전무하고...영어로된 자료를 보면서 프로젝트를 정말 대충 구성하고 Spring 공식사이트의 튜토리얼을 공부했었죠.

튜토리얼을 모두 따라하고 본 프로젝트를 시작하고자 프로젝트를 제대로 구성하려는데 쉽지 않더군요.

더군다나 대부분의 글들은 webpack 1으로 설정을 해서 적절하지 않다고 생각했어요.

그래서 webpack3을 적용해야겠다고 생각했죠.

처음부터 다시 Webpack의 사용방법을 익히는게 만만치 않았습니다.

안되는 영어로 여러 사이트를 참고해서 이제 제가 만족하는 수준의 개발환경을 구축했습니다.

그런데 오지랖이 넓어서 그런지 한글로 된 자료가 워낙없다보니 직접 개발환경 구성 과정을 포스팅하고

github에 boilerplate를 배포하고 싶다는 욕심이 들었습니다. 그래서 이번 포스팅을 하게 되었습니다.

빠르게 프로젝트를 시작하고 싶다면 제 github로 가서 git clone하시면 됩니다.

※프로젝트 구성의 많은 부분을 이 포스팅을 참고했습니다.

기본적으로 프로젝트를 parent와 fe, be로 나누는 부분은 큰도움이 되었습니다.

그러나 위 포스팅의 프로젝트를 현재 사용하기에는 적절하지 않아 보입니다.

프로젝트의 구조
be
-src
-pom.xml
fe
-app
-tmp
-package.json
-pom.xml
-webpack.config.js
parent
-pom.xml

프로젝트의 구조는 세가지 영역으로 나뉩니다.

be(backend 영역입니다. Spring Boot를 이용해서 구성했습니다.)

fe(frontend 영역입니다. 프로젝트 구성은 다소 복잡하게 느껴질 수 있습니다.

maven의 frontend-maven-plugin을 이용해서 프로젝트 폴더 내에 node.js와 npm을 설치해줍니다.

module bundler인 Webpack을 이용해서 frontend영역에서 사용되는 모든 파일(.js, .css, html, .jpg 등)을 하나의 js파일로 합쳐서 빌드합니다.

parent 폴더는 pom.xml 파일 하나만 있네요. 이 것은 fe폴더와 be 폴더를 하나의 maven 프로젝트로 묶어주는 역할을 합니다.

각자 빌드하고 서로의 jar파일을 의존성 라이브러리에 추가해서 사용하는 것도 가능합니다.

실제로 webpack으로 빌드한 js 파일을 maven이 jar파일로 다시 빌드하고 be에서 다시 이 jar파일을 가지고 와서 프로젝트에 구현하는 방식입니다.

자세한 사항은 이후의 포스트에 연재하겠습니다.

프로젝트의 실행
이제 프로젝트 실행해보겠습니다.(maven이 설치되었다고 가정할게요. 만약 설치되어있지 않다면 설치하시기 바랍니다.)
이 프로젝트의 경우 backend와 frontend 영역이 분리되어있습니다.
빌드나 실행을 eclipse와 같은 IDE에 의존적인 방식이 아니라 command line으로 하겠습니다.
우선 git clone으로 프로젝트를 local repository로 받아주세요.
그럼 아래 그림과 같은 폴더구성을 볼 수 있을겁니다.