React와 Springboot 연동하기

 

React와 Springboot 연동하기

React와 Springboot 깃랩 레포지토리를 나눠놔서 각각 독립적으로 서버를 작동시켜서 연동해줘야 하는 상황이 됐다.

 

Node 설치

다운로드 | Node.js

위 공식 홈페이지로 들어가서 다운로드 한다. 현재버전 말고 LTS 버전으로 다운받으면 된다. 포스팅 기준으로 LTS 최신 버전은 16.17.0(includes npm 8.15.0)이다.

 

create-react-app 설치

MAC 터미널에서 아래 명령어를 입력해 create-react-app을 설치한다.

npm -v  // 버전확인. 만약 버전 확인이 되지 않는다면 npm을 설치해줘야한다.
npm install -g create-react-app
// 두 번째 명령어에서 에러가 난다면 아래 명령어를 입력
sudo npm install -g create-react-app // 명령어 입력 후 맥북 비밀번호를 입력해줘야 한다.

 

create-react-app 실행

터미널에서 프로젝트를 설치 할 경로(나같은 경우는 깃랩 로컬 레포지토리 경로)로 이동 후 아래 명령어를 입력한다.

npx create-react-app .
// .은 현재 폴더에 설치한다는 말이다. 만약 .이 아니라 my-app을 입력하면 my-app이라는 폴더 밑에 설치가 된다.

 

vscode 

vscode에서 위에서 설치한 폴더를 열어주고 vscode 내장 터미널을 연다. 그리고 실행 명령어를 입력하면 새로운 브라우저가 뜬다!

npm start

뿌-듯

 

proxy 설정

리액트 포트는 3000번 스프링부트 톰캣 포트는 8080이다. 프록시 설정을 굳이 해주는 이유는 CORS 이슈를 해결하기 위해서이다.

CORS 자체는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스 된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. 문제는 크롬(외 다른 브라우저도 포함)에서는 보안 때문에 CORS를 막아 이슈를 발생시킨다. 그러므로 프록시를 설정해 CORS 이슈를 해결해야한다. (CORS 정의 출처)

 

package.json 파일에 아래 코드를 추가한다.

"proxy" : "http://localhost:8080",

 

axios 설치

mac 터미널에서 아래 명령어를 입력해 axios를 설치한다.

npm i axios

 

App.js 내용을 수정한다.

import React, {useState, useEffect} from 'react';
import axios from 'axios'
import './App.css';

function App() {
  const [ testStr, setTestStr ] = useState('');

  function callback(str) {
    setTestStr(str);
  }
  
  useEffect(
    () => {
      axios({
        url : '/board/',
        method: 'GET'
      }).then((res) => {
        callback(res.data);
      })
    }, []
  );
  return (
    <div className='App'>
      <header className='App-header'>
        {testStr}
      </header>
    </div>
  )
};

export default App;

 

실행

Springboot와 react 모두 실행 후 App.js에서 설정한 url로 접속해본다.

참고로 서버쪽에서 Controller가 작성되어있어야 한다.