누구나 쉽게 따라하는 React, Spring 연동하기 3

수정
React Spring 연동

이 글은 누구나 쉽게 따라하는 React, Spring 연동하기 2에서 이어지는 내용입니다.

Step 7. 리액트 라우터 적용하기

어떤 기능을 적용하고자 하는 것인지 간단히 설명하자면 웹페이지 내에서 링크를 통해 다른 페이지로 새로고침 없이 이동하는 기능을 적용할 것입니다. 즉, 싱글 페이지 애플리케이션(single-page application, SPA)를 구현하는 것입니다. 자 그럼, 프론트엔드(Create React App)와 백엔드(Spring Boot)에 코드를 추가해 봅시다!

Step 7.1. 프론트엔드(Create React App)

React Router(리액트 라우터)를 설치하기 위해 아래의 명령을 실행합니다.

npm i react-router-dom
💡리액트 라우터 공부📚는 React Router Quick Start에서 시작해 보세요.

그리고 프론트엔드(Create React App)의 src\App.js 파일을 아래와 같이 수정합니다.

src\App.js 파일을 수정하면 개발환경(http://localhost:3000/)에서는 잘 동작합니다. 하지만, 운영환경에 배포하게 될 최종 결과물(my-app-backend-1.0.0.jar)로 로컬에서 '웹 브라우저 주소창에 직접 URL을 입력해서 접속하는 경우'의 테스트를 해보면 아래와 같은 페이지가 나와 버리고 맙니다.
React Spring 연동하면서 Whitelabel Error Page

Step 7.2. 백엔드(Spring Boot)

위 문제점은 백엔드(Spring Boot)에 아래의 src\main\java\com\myapp\CustomErrorController.java 파일을 추가하면 해결됩니다.


(국내 서버가 아니라 응답 속도가 다소 느립니다😅)

이상입니다.

글 제목처럼 누구나 쉽게 따라할 수 있도록 글을 작성하려고 했습니다만 아무래도 결국은 제 기준이다 보니, 아무튼 잘 마무리되길 바랍니다. 그리고 Spring 쪽에 업데이트로 인한 문제는 수정하였습니다.
#소프트웨어 개발
다른 글

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

댓글

  1. 익명2020년 3월 22일 오후 10:43

    감사합니다!!

    답글삭제
  2. Unknown2020년 3월 25일 오후 2:47

    /about은 정상적으로 index.html 로 되는데
    /admin/about 같은 주소로 mapping을 하면 /admin/index.html로 가버리더라구요... 이부분은 어떻게 처리하나요?

    답글삭제
    답글
    1. 수아2020년 3월 25일 오후 3:06

      백엔드(Spring Boot)의 컨트롤러에 별도의 맵핑 정보가 없다면 무조건 /index.html로 가게 됩니다.
      우선 위의 CustomErrorController.java 파일의 12행, 17행에 브레이크 포인트를 설정해서 디버깅을 해보세요😐

      삭제
    2. 수아2020년 3월 25일 오후 3:41

      CustomErrorController.java 에서 기대하는 동작을 한다면 그다음은 프론트엔드(Create React App)의 라우터 부분을 점검해 보세요.

      💡추가적으로 말씀드리면, 혹시 싱글 페이지가 아니라 사용자용 페이지와 관리자용 페이지로 나눈 거라면 백엔드에 추가적인 코드가 들어가야 하는데 그 부분은 직접 구현해 본적이 없습니다. 다만 로그인(Spring Security)을 통해서 특정 권한을 얻은 사용자만이 특정 컴포넌트(React)에 접근할 수 있는 방식으로 구현하면 싱글 페이지로도 사용자용과 관리자용으로 나눌 수 있습니다.

      삭제
  3. Unknown2020년 4월 2일 오후 4:36

    제가 따로 백엔드와 프론트엔드 프로젝트를 나누지 않고 백엔드 프로젝트의 src 폴더안에 frontend 폴더를 만들어서 그 안에 리액트를 설치한 후 따라해보았는데요.
    그렇게 실행해서 3000포트에서는 이 기기의 IP주소는 0:0:0:0:0:0:0:1입니다. 라는 메세지가 출력되고 8080/ 에서는 HTTP Status 404 – Not Found 가 8080/about 에서는 HTTP Status 500 – Internal Server Error 가 발생하였습니다. 프로젝트를 나누지 않고 한 곳에서 작업해서 발생하는 문제인지요..? ㅠㅠ

    답글삭제
    답글
    1. 수아2020년 4월 2일 오후 4:52

      안 나누고 작업하고 싶은 마음은 이해가 됩니다만, 일단 소개되어 있는 대로 나누고 해보길 권합니다. 그리고 나서 어느정도 원리를 이해했다면 더 효율적인 방법을 찾을 수도 있겠네요. 저녁 식사 때문에 자리를 떠야겠네요. 나중에 더 볼 시간 있으면 댓글 남길게요. 파이팅입니다!

      삭제
    2. Unknown2020년 4월 2일 오후 4:58

      네 답변주셔서 감사합니다. 식사 맛있게 하세요~!

      삭제
    3. 수아2020년 4월 2일 오후 9:33

      ①백엔드 src 안에서 Create React App 프로젝트를 진행하고 있다고 이해했습니다. 시도는 안해 보았지만... 그렇게 안하는게 좋을 것 같습니다. Spring Boot를 빌드하면 결과물에 불필요한 파일들이 들어가게 될거 같네요. 백엔드와 프론트엔드를 분리하는 것이 트렌드이고 장단점이 있지만 저는 장점이 많다고 생각합니다. 분리할 때는 확실히 분리하는 게 맞습니다!

      ②「0:0:0:0:0:0:0:1」는 로컬이라서 그런 겁니다. 운영환경에 올려보세요.

      ③8080 포트 문제는 우선 404 문제를 해야될듯 한데 「Step 6. 운영 환경에 배포하기」의 「Step 6.4.」의 작업을 완료해보세요. (...)resources\static에 index.html 파일이 없으면 404 나오는 것이 정상입니다.

      삭제
  4. Unknown2020년 12월 24일 오후 6:04

    개발할 때, front부분을 수정하고나면 계속 build안에 파일들 모두 backend부분 static에 붙여넣어줘야 하는건가요?

    답글삭제
    답글
    1. 수아2020년 12월 24일 오후 6:20

      네. 윈도우에서 개발하시면 배치 파일을 만들어 자동화할 수 있습니다.

      삭제
  5. 익명2021년 1월 19일 오후 1:32

    좋은 자료 정말 감사합니다.

    약간의 후기를 말씀드리자면, 저는 Spring Boot가 아닌 eclipse와 maven를 연동해서 Spring 프로젝트를 구축 후, 해당 작업을 수행했는데요.
    이 경우 블로그의 내용을 여러 번 시도를 해도 CORS 문제가 계속 발생했습니다. ㅠ

    만약, 저처럼 Spring Boot를 사용하지 않으시고 작업을 수행하실 때, CORS 문제가 발생한다면 WebMvcConfigurer 말고, Filter를 사용해서 CORS 문제를 해결해보시길 바랍니다(Spring에서 CORS 문제를 해결하기 위해 Filter를 사용하는 방법은 구글링하면 잘 나와있습니다).

    이후, React에서 작성한 customAxios.js 내용에 withCredentials를 false로 설정하였고, 개발환경 구축을 완료할 수 있었습니다.

    Spring & React 개발 환경 구축에 정말 시간이 오래 걸렸는데요. 수아님께서 작성해주신 내용 덕분에 잘 수행할 수 있었습니다. 다른 분들이 조금이나마 참고하면 좋을 것 같아 글을 남깁니다.
    감사합니다.

    답글삭제
    답글
    1. 수아2021년 1월 19일 오후 1:58

      안녕하세요.

      개발 환경을 명확하게 기록하지 않아서 인지,
      조금씩 개발 환경이 달라서 인지,
      프레임워크나 라이브러리의 업데이트 때문인지
      잘 모르겠지만

      좋은 정보 감사합니다👍

      삭제
  6. Unknown2021년 3월 28일 오후 4:15

    안녕하세요

    스프링만 사용시에는 Controller를 두고 @GetMapping 등을 통해서 해당 경로에 맞는 html을 띄워주는데 스프링을 리액트와 함께 사용할 시에는 SPA라 Controller가 딱히 필요하지 않은 건가요?

    답글삭제
  7. 익명2022년 5월 12일 오후 9:09

    당신은 나의 구원자.
    나의 빛.
    나의 스승.
    나의 모토.
    나의 신.
    나의 전부.

    답글삭제
  8. 익명2023년 9월 25일 오후 3:58

    @Override
    public String getErrorPath() {
    return "/error";
    }

    이 부분에서 override가 에러가 나네요..

    답글삭제

댓글 쓰기