리액트 스프링부트 연동[1](라우터 설정 및 서버정보 리턴 받기)

안녕하세요. 

 

오늘은 리액트(웹서버)와 스프링부트(was)를 연동해보겠습니다.

 

제가 그동안 관리해오던 어플리케이션은 was와 web서버를 구분하지 않고

 

was가 동적컨텐츠와 정적컨텐츠(html,css,script)를 모두 제공해주는 어플리케이션이었습니다. 

 

이러한 형태는 was에서 모든 자원을 관리하여 was의 부하가 많은 구조입니다.

 

web서버와 was를 분리하여 web서버에서 정적 컨텐츠를 처리하게 하고

 

was에서는 동적컨텐츠만 처리하게 한다면 상대적으로 많은 처리와 DB접근까지 해야하는 was의 부하를 어느정도

 

줄여줄 수 있습니다.

 

저 또한 이러한 부분 때문에 웹서버와 was를 별도로 분리하여 구성될 수 있는 프로젝트를 만들어 볼까 합니다. 

 

 

프론트엔드 라이브러리로 가장 많이 사용되는 리액트와 스프링 부트를 통해 프론트엔드와 백엔드를 구분하여

 

프로젝트를 진행해보겠습니다. 

 

 

 

리액트 프로젝트

 

노드 설치

 

https://nodejs.org/ko/

Node.js

 

위에서 node.js 다운 받아주세요.  

 

lts(long time supported)버전 다운 받으시면 안정적일 것입니다. 

 

제 노드버전과 npm 버전은 아래와 같습니다.

 

node -v
v16.13.1
npm -v
8.3.0

 

이후 리액트 및 리액트 라우터 라이브러리  아래 명령어로 다운 받아주세요.

 

npm install -g create-react-app
npm install react-router-dom

 

리액트 라우터 버전은

"react-router-dom": "^6.2.1" 

 

이와 같습니다.

 

리액트 라우터 버전별로 명령어가 조금씩 달라 예제를 따라 하실거라면 위 버전으로 설치하시는게 편하실 것입니다.

 

 

index.js는 별도로 수정할 필요 없으며

 

 App.js 를 아래와 같이 설정했습니다.

 

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';


const App = ()=>{
  return (
    <div>
      <BrowserRouter>
          <Routes>
            <Route path="" element={<Home />} />
            <Route path="/about" element={<About/>}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

 

경로가 루트 경로이면 Home.js 를 불러들이고

 

경로가 /about이면 About.js를 불러들이도록 설정을 했습니다. 

 

Home.js

import React, {useState, useEffect} from 'react';

const Home = ()=>{
  const [message, setMessage] = useState("");
useEffect(() => {
fetch('/home')
.then(response => response.text())
.then(message => {
setMessage(message);
});
},[])

  return (
    <div>
      홈 입니다.
      <div>{message}</div>
    </div>
  );
}

export default Home;

 

About.js

import React, {useState, useEffect} from 'react';

const About = ()=>{
  const [message, setMessage] = useState("");
  useEffect(() => {
  fetch('/about')
  .then(response => response.text())
  .then(message => {
  setMessage(message);
  });
  },[])
  return (
    <div>
      어바웃
      <div>{message}</div>
    </div>
  );
}

export default About;

 

위와 같이 useEffect 명령어를 통해 서버로부터 응답 받은 리턴값을 message에 설정하여

 

결과로 보여주도록 설정했습니다.

 

그리고 가장 중요한 부분인데요.

 

was와 연결을 하기 위해 프록시 설정을 해야합니다. 

 

package.json에 가서

 

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

 

을 추가해주세요.

 

was서버의 포트가 8080 포트이기 때문에 위와같이 설정했습니다. 

 

 

제 package.json 설정은 아래와 같습니다.

 

{
  "name": "react-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "proxy": "http://localhost:8080",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

 

스프링부트 프로젝트

 

스프링부트 자바는 8 입니다. 

 

별도의 gradle 설정없이 spring web만 설정하여 구성하였습니다. 

 

컨트롤러 설정은 아래와 같습니다. 

 

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
	
	@RequestMapping("")
	public String home() {
		return "스프링부트 서버로부터 리턴, 홈";
	}
	
	@RequestMapping("about")
	public String about() {
		return "스프링부트 서버로부터 리턴, 어바웃";
	}
	
}

 

 

url 별로 위와 같은 리턴값을 주도록 설정했습니다. 

 

 

테스트 결과

 

npm start 명령어를 통해 리액트 프로젝트를 실행하고

 

was를 실행하여 접속하면

 

url 별로 아래와 같은 결과를 얻습니다. 

 

 

 

라우터 설정도 잘 되었고 서버로부터 리턴값도 화면단에서 잘 받았음을 알 수 있습니다.

 

 

 

이렇게 해서 웹서버와 was를 별도 구성하여 연동까지 해보았습니다. 

 

 

깃허브에 예제소스가 있습니다. 

 

아래는 서버 소스 리포지토리 입니다.

 

https://github.com/yojic-jung/spring-reat-project

GitHub - yojic-jung/spring-reat-project: 스프링 서버(리액트 스프링 연동)

 

"스프링 리액트 첫번째 연동" 이라는 커밋내역이 예제 소스입니다.

 

 

아래는 리액트 예제 소스입니다.

 

https://github.com/yojic-jung/react-spring-project

GitHub - yojic-jung/react-spring-project: 리액트 웹서버(리액트 스프링 연동)

 

"리액트-스프링부트 첫번째 연동" 이라는 커밋내역이 이번예제의 소스 입니다.

 

 

 

다음편에서는 로그인 권한 관리가 되는 was와 웹서버를 연동하여

 

로그인 된 유저와 로그인 되지 않은 유저를 구분하여 페이지를 접근 할 수 있도록 구현을 해보겠습니다. 

 

 

[이후 포스팅]

https://developer111.tistory.com/89

리액트 스프링부트 연동[2] (ec2 실서버에서 nginx로 리액트 배포 및 스프링 부트 연동)