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

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

반응형

안녕하세요.

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

제가 그동안 관리해오던 어플리케이션은 was가 웹서버 역할까지 하여 서버소스와 화면소스(html,css,script)를

모두 제공해주는 어플리케이션이었습니다.

허나, 이러한 형태의 어플리케이션은 소규모 어플에서 유지보수의 측면에서 장점이 있으나,

최근 사용자의 환경이 pc에서 모바일로 많이 전향되어 속도의 측면에서는 단점이 많은 구조입니다.

웹서버와 was를 분기하여 관리하는데에는 여러가지 이유가 있겠으나,

제가 고려하게된 이유 중 가장 큰 이유는 속도절감을 위하여 필요한 부분만 가져오도록 하기 위함입니다.

was가 서버소스부터 화면소스까지 모두 제공하게 되면 페이지를 이동할 때마다 모든 정보를 불러드립니다.

페이스북이나 인스타그램을 예를 들자면 페이지를 이동하더라고 하단 메뉴바나 상단 메뉴바 등은 항상 똑같은 구조를

가지고 있습니다. 메뉴바를 제외한 안의 내용들만 바뀝니다.

웹서버와 was를 분기처리하게 되면 변화된 내용물만 불러올 수 있습니다.

반면 was 하나로 모든 처리를 하게 되면 변화되지 않은 내용도 was가 모두 제공을 합니다.

노트북이나 데스크탑 환경에서는 큰 차이를 못 느낄 수 있으나 상대적으로 성능이 낮은 모바일 환경에서는

사용자가 큰 속도차이를 느낄 수 있습니다.

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

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

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

리액트 프로젝트

노드 설치

https://nodejs.org/ko/

위에서 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 ( } /> }/> ); } 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 ( 홈 입니다. {message} ); } 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 ( 어바웃 {message} ); } 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

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

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

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

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

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

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

반응형

from http://developer111.tistory.com/77 by ccl(A) rewrite - 2021-12-23 10:26:19