스프링부트 와 React 연동

만일 노드js 프로그램이 없는 상태에서 npm 진행 하려고 하면, CommandNotFoundException 이 발생한다.

 

https://nodejs.org/en

Node.js

에서 최신 버전 혹은 lts버전을 받아준다. lts 추천

exe 파일 설치 후, 진행 (server에서는 yum으로 설치 예정)

 

만일 노드js 프로그램이 없는 상태에서 npm 진행 하려고 하면, CommandNotFoundException 이 발생한다.

설치 이후 재부팅을 추천한다!

 

설치가 완료 되었으면 명령프롬프트 창에서 확인 가능 ( npm -v )

단순히 명령 프롬프트에서 확인 가능하거나 인텔리제이 터미널에서도 확인 가능하다.

필자는 프로젝트 바로 1순위 아래에 frontend 프로젝트를 생성할것이다.

 

npx create-react-app {원하는프로젝트명} => npx create-react-app frontend 

최대 1~3분 사이에 터미널상의 디렉토리에 react에 필요한 기본 디렉토리가 설치된다.

 

프론트 서버와 백엔드 서버는 사실 알고보면 각각의 포트를 사용중이다.

하나로 엮어 주려면 proxy를 섞어준다.

 

package.json에 가서 proxy를 설정해준다.

package.json 위치가 frontend 시작 위치이다.

cd 로 frontend 디렉토리로 들어가서 package.json 동일 선상에서 npm start를 쳐주면 프론트 엔드는 떴다.

 

이런식으로 프론트 서버는 on이 됫다.

화면에서 보이는것처럼 app.js를 통해 백엔드로 통신 설정한다.

import logo from './logo.svg';
import './App.css';
import React, {useState, useEffect} from "react";

function App() {
  const [msg, setMsg] = useState([]);
  useEffect(() => {
    fetch("/api/hello")
        .then((res) => {return res.json();})
        .then((data) => {setMsg(data);})
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

 

백엔드 쪽은 

 

 

단순 API로 연결한다