관리 메뉴

개발 블로그

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

Spring Framework 개발 일지/Spring Boot와 Rect.js로 프로젝트 구성

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

anomie7 2017.10.16 12:04

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

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로 받아주세요.

그럼 아래 그림과 같은 폴더구성을 볼 수 있을겁니다.

이제 parent 폴더로 들어가세요.

그리고 terminal을 열고 mvn install을 입력해보세요. (system explore의 주소창에 cmd를 치면 바로 terminal이 실행됩니다. 또는 왼쪽 위 파일 메뉴를 누르면 power shell을 실행가능합니다.)

그러면 be와 fe도 같이 mvn install 됩니다. (의존성 라이브러리가 설치되고 jar파일로 빌드됩니다.)

다소 시간이 오래 걸릴거에요. node.js와 npm을 프로젝트 폴더에 설치하기 때문에 그렇습니다.



이제 fe폴더로 이동해서 npm start를 입력해주세요.

그러면 webpack-dev-server가 실행되면서 브라우저에 자동으로 localhost로 접속될거에요. 그런데 아무것도 안뜨네요..

걱정하지마세요. 다음 단계로 넘어가면 정상적인 화면을 확인할 수 있을거에요.



새로운 터미널을 띄워서 be폴더로 이동하고 ./mvnw spring-boot:run을 입력해주세요.

be프로젝트가 실행됩니다.

그리고 아까 브라우저 화면을 갱신해보면 정상적으로 애플리케이션이 실행되었다는 것을 확인할 수 있어요.



본 개발환경에는 Webpack-dev-server라는 모듈이 설치되어있는데. 이 webpack-dev-server를 이용하면 HMR(Hot Module Replacement)기능을 사용할 수 있습니다.

이 기능은 모듈의 변경사항이 생기면 화면을 새로고침하지 않고 변경되는 모듈에 대해서만 상태를 변화시켜주는 기능입니다.

제대로 적용되었는지 한번 확인해보겠습니다.

우선 fe 폴더의 하위 폴더 중 app폴더의 components 폴더 아래의 Hello.js 파일을 열어보세요.

본인이 사용하는 에디터로 실행하면 됩니다.(필자는 VSCode를 이용하고있습니다.)

화면과 에디터창을 동시에 띄우고 Hello! 뒤에 아무 글자나 넣어서 저장해보세요.

화면이 어떻게 갱신되는지 확인할 수 있을거에요. 새로고침없이 변경됩니다.


위는 webpack-dev-server를 실행한 터미널창인데요.(아까 npm start 명령어를 입력했던 터미널)

로그가 새로 떴네요. 바뀐 모듈(Hello.js)에 대해서만 빌드를 한거같네요. 로그가 위에 것보다 확실히 줄어있습니다.



이로써 프로젝트의 구성과 실행방법을 알아보았습니다.

다음 포스팅부터는 프로젝트 구성과정과 원리들을 알아보도록 하겠습니다.


9 Comments
댓글쓰기 폼