[현대이지웰 Java 풀스택 개발자 아카데미 6월] TIL 15차 - 스프링 부트 프로젝트에 React 뷰 적용 방법

📚 서론

스프링 부트로 프로젝트를 만들면 바로 실행할 수 있을만큼 대부분의 설정이 완료되어 있지만

뷰 파일 만큼은 특별히 강제하는 스타일이 없기 때문에 따로 설정해 주어야 합니다.

 

지금까지 강의를 배우면서 배운것이 JSP였기 때문에

이번 팀 프로젝트도 스프링 부트 프로젝트에 JSP의존성을 추가하였습니다.

 

근데 여기서 문제가 하나 생깁니다.

또... 무슨 문제가... 있나요...?

 

 

지난주 포스트였던 비동기 통신을 통해 데이터를 받아온 다음

직접 html태그를 작성하고 jQuery나 Javascript를 이용해 브라우저 화면에 삽입하도록 만들면

 

일단 만드는 작업이 너무 번거로운데다 내용이 조금만 더 길어지면 수정하는 일이 쉽지 않았습니다.

비동기 통신으로 가져온 검색결과를 7열짜리 테이블로 출력해주는 코드. 정리를 깔끔히 해도 알아보기 힘들다...

 

 

그래서 비동기 통신을 요청하면 데이터를 별도의 JSP 파일로 전달하고

거기서 html 태그를 구성한 다음 통째로 결과값으로 반환하는 방법을 써봤습니다.

 

확실히 코드를 유지보수하기 쉬워졌지만 결국 뷰를 서버가 만들기 때문에

요청한 데이터만 전달하여 주고 받는 패킷을 줄이고 속도를 높이자는 의도에선 벗어나게 되었습니다.

ajax로 반환할 별도의 뷰 파일. 그냥 여기로 클라이언트 데려와 그대로 출력하면 될 걸 서버 입장에선 왜 굳이 일을 두번으로 나눠서 시키나 싶을 듯...?

 

 

그리하여 서버는 데이터만 전달하고 뷰는 클라이언트에서 구성할 수 있도록

여러 태그를 통해 컴포넌트를 구성하고 이를 재사용해 화면을 구성해주는 리엑트를 프로젝트에 도입했습니다.

 

리엑트에 대해서는 수업 초창기에 배웠으니 이번 기회에 복습 해봐야 겠습니다.

 

수업 초기엔 리엑트를 왜 배우나 했지~😎

 

 

그래서 이번주 포스트엔 무얼 다룰 것인가!

 

바로 그렇게 만든 리엑트 코드를 어떻게 스프링 부트에 집어넣을 것인가! 입니다!

 

 

 

 

 

🎷 리엑트 빌드 파일 생성

리엑트 프로젝트를 스프링 부트에 연결하려면

빌드 파일을 생성한 다음 그것을 스프링 부트 폴더에 넣어주면 끝입니다.

 

매우 간단하죠?

아 물론 자세히 설명해드릴거에요. 여기서 끝이 아니라구요...! 😅

 

 

빌드 파일을 만들려면 우선 해당 리엑트 프로젝트가 있는 경로에 접근해야 합니다.

 

저는 테스트를 위해 작업폴더에 spring-react-app 이라는 리엑트 프로젝트를 작성했습니다.

작업폴더는 C폴더 안의 Workspace\reactWorkspace 폴더 안에 있습니다.

 

터미널에서  cd..  를 입력해 최상위 폴더로 이동한 다음  cd 이동할폴더명  을 입력해 리엑트 프로젝트로 이동합니다.

빌드할 리엑트 프로젝트로 이동

 

그 다음  npm run build  명령어를 입력해 빌드를 진행하시면 됩니다.

빌드가 완료되면 배포에 대한 자세한 내용은 아래 url에서 찾아보라는 말과 함께 커멘드 입력 커서가 돌아온다.

 

 

 

 

 

🎺 스프링 부트에 리엑트 빌드 파일 적용

npm run  build 명령어로 생성된 빌드 파일의 경로는

파일 탐색기 > 작업폴더 > 리엑트 프로젝트 폴더 > build 폴더 안입니다.

 

제 경우는 C:\Workspace\reactWorkspace\spring-react-app 가 됩니다.

 

만들어진 빌드 파일

 

이제 이 파일들을 스프링 부트 프로젝트에 옮기면 되는데

static 폴더만 제외하고 남은 파일을 전부 드래그 한 다음

src > main > webapp > WEB-INF > views 폴더에 옮겨줍니다.

 

그 후 스프링 부트에서 사용하기로 한 뷰 파일의 스타일이 JSP이므로

확장자가 html인 파일들을 전부 jsp로 바꿔줍니다.

최종적으로 이런 형태~ index2.jsp는 무시하세용~

 

그 후 남은 static 폴더는 src/main/resources > static 폴더 안에 폴더째로 옮겨줍니다.

static에 static...

 

이것은 리엑트에서 리소스 사용 경로가 ./static/파일명 이기 때문인데

스프링 부트에서 리소스의 contextPath는 src/main/resources/static/이기 때문에

 

리엑트에서 ./static/image.jsp 라는 경로를 사용했다면

스프링 부트에선 최종적으로 src/main/resources/static/static/image.jsp 이 되기 때문입니다.

 

 

 

 

 

🔥결론

이렇게 딱 2단계를 거치면 리엑트에서 만든 뷰 파일을

손쉽게 스프링 부트로 옮길 수 있습니다!

 

이제 프로젝트 구상도 거의 다 끝나서 내일부턴 본격적으로 구현에 들어가겠네요~🤭

 

그나저나 이력서 빨리 제출해야하는데 큰일났다...! 😫