캡스톤 디자인 PART.스프링 & 리액트 프로젝트 연동

서론

프로젝트를 프론트와 백엔드로 분리하면서 연동하는 과정을 기록합니다.

 

본론

저는 최초로 리액트 프로젝트를 만드는 것이 아닌 생성되어 있는 리액트 프로젝트를 pull하여 스프링 프로젝트와 연결시켰어야 했습니다. 따라서 처음부터 리액트를 설치하는 과정에서 몇 개의 과정이 생략이 필요했고 밑에서 자세하게 알아보겠습니다.

 

1. nodejs 설치

리액트를 설치하기 위해서는 npm 명령어를 할 수 있어야 합니다. npm 명령어를 수행하기 위해 node js를 설치했습니다.(참고 1)

 

2. npm install

설치된 리액트 프로젝트에서 npm install을 통해 npm을 설치해줍니다. 

 

npx create-react-app

최초에 리액트부터 만드는 것이라면, 위 명령어로 리액트 프로젝트를 만드는 것이 필요하지만 위에서 말했듯이 저는 이미 리액트 프로젝트가 생성된 상태라서 이 명령어는 생략했습니다.

 

3. npm start

이제 리액트를 사용할 준비가 끝났습니다. 최초에 리액트를 설치하고 프로젝트를 생성했다면 npm start를 하면 localhost:3000으로 리액트 화면이 떠야합니다.

 

하지만 저의 경우 리액트 리액트 코드가 이미 작성된 상황이라서 일반 시작을 했을 경우 무언가 라이브러리 연결이 안 됐음을 알 수 있었습니다.

 

4. App.js 수정

function App() {
    const [hello, setHello] = useState('')

    useEffect(() => {
        axios.get('/api/hello')
            .then(response => setHello(response.data))
            .catch(error => console.log(error))
    }, []);

    return (
        <div>
            백엔드에서 가져온 데이터입니다 : {hello}
        </div>
    );
}

위의 오류는 App.js에 Home 라이브러리를 찾지 못해서 발생했습니다. 따라서 이미 작성되어있던 app.js 대신 연동 테스트를 위한 코드로 수정하였습니다.

 

5. 프론트와 백엔드 연동을 위한 proxy 셋팅

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080', // 서버 URL 또는 localhost:설정한포트번호
      changeOrigin: true,
    })
  );
};

 

이제 마지막 작업으로 리액트의 3000번 포트와 스프링의 8080번 포트를 포워딩해줘야 합니다.

 

@RestController
public class HomeController {
    @GetMapping("/api/hello")
    public String test() {
        return "Hello, world!";
    }
}

스프링 컨트롤러를 리액트 api 요청에 맞게 작성하고

 

이후 npm start를 하면 App.js의 api 호출로 스프링에게 요청이 전달된 후 응답된 것이 리액트 3000번 포트 화면으로 잘 출력이 됩니다. 이제 리액트와 스프링을 통해 구현한 전 과정을 기록해보겠습니다.

 

 

참고

nodejs 설치