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

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

Step 4, 5, 6을 진행하기에 앞서 프론트엔드(Create React App)와 백엔드(Spring Boot)가 연동하는 간단한 코드를 작성해 봅시다❗ 접속한 기기💻의 IP주소를 확인할 수 있는 웹 페이지를 만든다고 가정하면 프론트엔드는 클라이언트의 IP주소를 알아내는 백엔드의 함수를 호출하고 그 함수에서 반환한 IP주소 값을 받아 화면에 표시하는 역할을 해야합니다.

먼저 백엔드와의 통신을 위해서 Axios(액시오스)를 설치하기 위해 Visual Studio Code(VS Code)를 실행하고 VS Code에 내장된 터미널에서 아래의 명령을 실행합니다.

npm i axios

설치가 완료된 후 package.json 파일을 확인해 보면 axios가 추가된 것을 알 수 있습니다.

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


프론트엔드(Create React App)에 아래의 src\customAxios.js 파일을 추가합니다.
💡운영 환경에 배포할 경우에는 15~16행을 주석 처리합니다.



백엔드는 클라이언트가 IP주소를 알아내는 함수를 호출하면 그 함수를 실행하고 IP주소 값을 반환하는 역할을 해야합니다.

백엔드(Spring Boot)에 아래의 src\main\java\com\myapp\TestController.java 파일을 추가합니다.


백엔드(Spring Boot)에 아래의 src\main\java\com\myapp\WebConfig.java 파일을 추가합니다.
💡운영 환경에 배포할 경우에는 15~18행을 주석 처리합니다.


Step 4. 개발단계에서 프론트엔드(Create React App) 코딩하며 백엔드와 연동하기

1. Eclipse에서 my-app-backend 프로젝트를 마우스 우클릭한 뒤 Run As -> Maven clean 클릭후 실행이 종료되면 Run As -> Maven install 클릭해서 '(my-app-backend 폴더 경로)\target\my-app-backend-1.0.0.jar' 파일을 만듭니다.

2. 명령 프롬프트에서 아래의 명령을 실행하여 백엔드를 실행해 둡니다.
(my-app-backend 폴더 경로)>java -jar ./target/my-app-backend-1.0.0.jar

3. VS Code를 열어 놓고 프론트엔드를 코딩하고 실행합니다.


Step 5. 개발단계에서 백엔드(Spring Boot) 코딩하며 프론트엔드와 연동하기

1. 명령 프롬프트에서 아래의 명령을 실행하여 프론트엔드를 실행해 둡니다.
(my-app 폴더 경로)>npm start

2. Eclipse를 열어 놓고 백엔드를 코딩하고 실행합니다.


Step 6. 운영 환경에 배포하기

Step 6.1

[VS Code] 프론트엔드에서 개발 환경용 코드는 주석 처리합니다.

Step 6.2

[VS Code] 내장된 터미널에서 'npm run build' 명령을 실행합니다.

Step 6.3

'(my-app-backend 폴더 경로)\src\main\resources\static'의 하위 파일, 폴더를 모두 삭제합니다.

Step 6.4

'(my-app 폴더 경로)\build'의 하위 파일, 폴더를 모두 복사한 후 '(my-app-backend 폴더 경로)\src\main\resources\static'에 붙여넣기합니다.

Step 6.5

[Eclipse] my-app-backend 프로젝트를 마우스 우클릭한 뒤 Refresh 클릭합니다.

Step 6.6

[Eclipse] 백엔드에서 개발 환경용 코드는 주석 처리합니다.

Step 6.7

[Eclipse] 'Maven clean'과 'Maven install'을 실행합니다.

Step 6.8

'(my-app-backend 폴더 경로)\target\my-app-backend-1.0.0.jar' 파일이 만들어진 것을 확인합니다.

Step 6.9

우분투(운영) 환경에 배포한다고 가정하면 my-app-backend-1.0.0.jar 파일을 업로드한 후 'sudo nohup java -jar my-app-backend-1.0.0.jar &' 명령을 실행합니다.
  • sudo : 슈퍼유저로서 실행합니다.
  • nohup 명령 & : 터미널 세션이 끊겨도(로그아웃) 실행을 멈추지 않으며 백그라운드에서 실행합니다.
  • nohup.out이라는 로그 파일이 만들어집니다.

Step 6.10

배포작업이 끝나면 프론트엔드, 백엔드에서 개발 환경용 코드는 주석 취소하고 my-app-backend-1.0.0.jar 파일을 개발 환경용으로 새로 만들어 둡니다.


💡위 수작업을 전부는 아니더라도 부분적으로 자동화하면 아~주 편리하겠죠😀 이 자동화 부분은 개개인의 선택에 맡기겠습니다.

예상보다 글이 길어졌습니다. 여기서 진행을 멈추고 리액트 라우터 적용과 대응 관련 내용을 누구나 쉽게 따라하는 React, Spring 연동하기 3에서 계속 이어가겠습니다.
#소프트웨어 개발
다른 글

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

댓글

  1. Unknown2020년 8월 9일 오후 9:19

    spring mvc로 하는데 상관없나요?

    답글삭제
    답글
    1. 수아2020년 12월 13일 오후 9:54

      Model과 Controller는 상관이 없고, View가 기본적으로 하나라는 것 때문에 경우에 따라서 고민해 봐야 할 문제가 생길 수도 있습니다.

      삭제
  2. 익명2020년 8월 23일 오후 6:13

    Thankk youuu Love you

    답글삭제
  3. 익명2020년 12월 13일 오후 9:16

    React - Spring Boot로 이미 운영되고 있는 걸 개발에 따로 띄워보려고 하는데,
    개발서버로 띄우면 Front는 개발내용이 뜨는데 Back은 운영쪽에 붙네요;;
    운영URL로 되어있는 부분을 모두 개발URL로 수정했는데 어느 부분을 추가로 확인해야할까요??

    답글삭제
    답글
    1. 수아2020년 12월 13일 오후 9:27

      무슨 말씀이신지 확실히 모르겠지만, 여기에서 소개하고 있는 내용으로 따지면 customAxios.js 파일의 6행에서 url을 수정해야 될 듯합니다. 일단, 전체 url로 설정하고 테스트해 보세요.

      삭제
    2. 수아2020년 12월 13일 오후 10:11

      15행에 baseURL도 수정해 보세요.

      삭제
  4. 익명2021년 1월 8일 오후 4:25

    intellij에서 RN_SpringBoot/back/src/main/java/com/example/back/WebConfig.java 경로로
    WebConfig 파일을 추가했지만

    WebConfig 파일이 제 역할을 못해서 CORS 에러가 계속 나는데 어떻게 해결하면 될까요?

    @CrossOrigin(origin = "http://localhost:3000")으로 해결할 수는 있었지만 전역적인 방법으로 해결하고 싶습니다... 아무리 검색해도 해결책이 안 나오네요 ㅠㅠ

    답글삭제
    답글
    1. 수아2021년 1월 8일 오후 6:38

      전역적으로 대응하려면, 우선 Spring Boot 설정 파일로 제어할 수 있는 지를 조사해 보는 게 좋을 것 같습니다.

      삭제
    2. won1022021년 2월 14일 오후 9:26

      본문 설정내용에 originPattern을 따로 설정해주지 않으면 "*"(wild card)로 기본지정됩니다. allowCredentials 만 true로 설정하게되면 " credential 이 true인 경우엔 origin을 wild card로 지정하지 못한다 " 라는 에러가 뜹니다.

      예제 내용과 동일한 환경이면 originPattern을 "http://localhost:3000"으로 설정해주세요.

      스프링부트 web mvc 에서 cross origin을 설정하는 방법이 본문에 나와잇는 전역지정과, Controller나 UrlMapping에 @CrossOrigin을 추가하는 방식이 있는데 전 후자로 해결했습니다.

      삭제
    3. 수아2021년 2월 14일 오후 9:41

      좋은 정보 감사합니다👍
      요즘 들어 글 내용의 업그레이드 필요성이 확 느껴지네요...

      삭제
    4. won1022021년 2월 19일 오전 10:58

      전자도 아래와 같이 해결할 수 있습니다.

      registry.addMapping("/api/**").allowCredentials(true)
      .allowedOrigins("http://localhost:3000");

      어노테이션으로 설정하던, Configuration으로 설정하던 같은 에러가 발생하는데 요청이 들어 왔을때 발생하냐, 스프링어플리케이션이 실행할때 발생하냐의 차이일 뿐입니다.

      결국엔 credential이 true면 특정 도메인을 지정해야한다는게 골자니까요.

      삭제
    5. won1022021년 2월 19일 오전 10:59

      전자도 아래와 같이 해결할 수 있습니다.

      registry.addMapping("/api/**").allowCredentials(true)
      .allowedOrigins("http://localhost:3000");

      어노테이션으로 설정하던, Configuration으로 설정하던 같은 에러가 발생하는데 요청이 들어 왔을때 발생하냐, 스프링어플리케이션이 실행할때 발생하냐의 차이일 뿐입니다.

      결국엔 credential이 true면 특정 도메인을 지정해야한다는게 골자니까요.

      삭제
    6. 수아2021년 2월 19일 오전 11:05

      참고할게요. 감사합니다^.^

      삭제
  5. 나니노노노네노2021년 2월 5일 오전 7:22

    감사합니다!

    답글삭제
  6. 블로그 같은 블로그2021년 4월 4일 오후 8:30

    따라했는데 안됩니다ㅠㅠaws에 war파일을 배포 했는데도, 유동ip:3000으로 하면 안뜹니다ㅠㅠ

    답글삭제
    답글
    1. 수아2021년 4월 4일 오후 8:41

      최종 결과물은 '8080'으로 확인해 보세요.

      삭제
  7. banana2021년 6월 8일 오전 12:22

    좋은내용 감사합니다. 혹 properties(혹은 yml 파일)도 함께 지워야 할까요?

    답글삭제
    답글
    1. 수아2021년 6월 8일 오전 9:48

      안녕하세요. 방문 감사합니다. 한동안 다른 프로젝트하고 있어서 감각이 무뎌지긴 했는데요^^;

      말씀하시는 Spring 파일에 설정해야 하는 내용이 생길 지는 몰라도 파일 자체를 지워야할 상황은 없을 것 같은데요.

      삭제
  8. Unknown2022년 1월 4일 오후 8:21

    이 기기의 IP주소는 0:0:0:0:0:0:0:1입니다.

    이렇게 나오는게 맞나요?

    답글삭제
    답글
    1. Unknown2022년 1월 4일 오후 9:23

      아 좀 찾아보니까 저렇게 나오는게 IPv6 버전으로 나오는거라고하더라구요
      구글링 해보니 변환할수있는 방법 중 하나 선택해서 적용했습니다.

      자바 컨트롤러의 소스 살짝 수정했습니다.

      public ResponseEntity ip (HttpServletRequest request) {
      // 요청을 보낸 클라이언트의 IP주소를 반환합니다.
      String ip = Optional.ofNullable(request.getHeader("X-FORWARDED-FOR")).orElse(request.getRemoteAddr());
      if (ip.equals("0:0:0:0:0:0:0:1")) ip = "127.0.0.1";
      return ResponseEntity.ok(ip);
      }

      삭제

댓글 쓰기