[Windows] React 설치 및 Spring과 연동

 

백엔드와 프론트엔드를 엮어주는 일을 하겠습니다.

작성자의 경우 백엔드와 프론트엔드 환경을 구분하기 위해서 IDE를 서로 다르게 사용합니다.

 

---

1.React 설치

 

https://nodejs.org/ko/download/

다운로드 | Node.js

먼저 node js와

 

https://classic.yarnpkg.com/en/docs/install#windows-stable

Yarn

Yarn 을 설치합니다.

 

위의 홈페이지는 Click to append 를 클릭하면 설치 항목이 나옵니다.

 

 

cmd에 입력합니다.

 

yarn global add create-react-app

 

---

2.React 프로젝트 생성 및 실행

 

cd c:\

create-react-app 프로젝트명

 

위의 명령어는 c: 드라이브 안에 react 프로젝트를 생성합니다.

 

cd c:\프로젝트명

의 경로로 들어가서

yarn start

를 입력하면 react 서버가 실행되지만 , 

그전에 아래의 선택 사항을 확인해주세요

 

backend 와의 연동에 관련 API를 설치한 뒤에 응용하는 방법이 있고

아니면 관련 API없이 진행하는 방법도 존재합니다.

 

여기에서 말하는 관련 API는 함수를 실행해서 바로 연동이 되는 기능을 의미하진 않으며

백엔드와의 통신과 관련되어 사람들이 많이 사용하는 기능을 지니고 있습니다.

API 추가는 해당 프로젝트 폴더 경로안에 cd로 들어간 상태에서 다음을 입력합니다. 

 

①yarn add http-proxy-middleware

통신요청 get post 를 요청할때 기본 경로와 포트를 맞추기 위해서 사용합니다.

기본적으로 react  에서 제공되는 방법을 사용해도 되지만

일부 설정의 한계가 있을 때 이 API를 통해서 적용해야 합니다.

 

②yarn add axios

이 api를 사용할 경우

get은 기본적으로 json으로 들어오며

post에서 {data : anydata} 인자를 줌으로써 json으로 변환 등록해 줍니다.

 

다만, 실행 속도면에서는 기본 제공 메소드를 사용하는 쪽이 더 빠른점을 유의해야 합니다.

 

---

참고할만한  라이브러리

 

①yarn add styled-components

프론트 엔드에서 css 를 <tag>로 만들어서 <tag></tag> 내의 모든 컴포넌트들에 일괄 적용하는 라이브러리입니다.

연동과는 관계가없으나 필요시 설치합니다.

 

②yarn add react-router-dom

경로이동에 필요한 라이브러리입니다. 

연동과는 관계가없으나 다중 경로를 사용할 경우 반드시 설치합니다.

 

③yarn global add typescript

타입 스크립트에 대한 정보는 링크를 눌러서 확인해주세요. 내용이 짧습니다.

연동과는 관계가없으나 웬만하면 설치합니다.

+global로 설치시 모듈을 찾지 못하는 현상이 발견 되었습니다.

 

 

 

선택사항까지 확인하고 설치를 완료하셧다면 실행하셔서 위의 화면이 출력되는지 확인합니다.

 

 

 

생성된 c:/프로젝트명 파일은 원하는 통합개발환경 툴로 프로젝트 폴더를 import 해줍니다.

작자는 frontend 에서 Visual Studio Code를 사용합니다.

 

---

3.Spring 과 연동

 

React 서버와 Spring 서버간에 통신을 하는 작업입니다.

 

---

1.Spring 측 준비사항

 

 

일단 json을 주고 받을 컨트롤러먼저 만들어야 되므로

jackson 이 없다면 pom.xml 에 의존 추가해 줍니다.

혹은 이를 사용하지않고

@ResponseBody 를 get 메소드에 붙여쓰는 방법도 있습니다.

 

메이븐 의존

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.4</version>
</dependency>

 

컨트롤러 작성 예제

작자의 경우엔 bridge 패키지를 추가하고 BridgeController를 다음과 같이 정의했습니다.

※일부 import 가 먹히지 않아서 예제에서 import 구문 까지 제공했습니다.

 

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.RequestMethod;
@RestController
public class BridgeController {
@GetMapping("/bridge")
public List<String> ping() {return Arrays.asList("hello React", "i am Spring");}
}

 

작성한 컨트롤러를 configuration 에 Bean 으로 등록해줍니다.

 

 

이제 확인을 위해서 이클립스 내에서 localhost:8080/프로젝트명/bridge(get에 작성한 경로) 에 접속해봅니다.

 

 

백엔드 설정이 무사히 끝났으므로 프론트엔드로 넘어갑니다.

---

2.React 측 준비사항

 

React와 Spring 간의 통신 경로의 포트를 리엑트의 3000에서

톰켓의 포트 8080(혹은 서버설정 포트)로 맞출 필요가 있습니다.

 

ⓐhttp-proxy-middleware API 를 사용한다면

src setupProxy.js 를 생성해줍니다.

 

 

src/setupProxy.js

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

module.exports = (app) => {
  app.use(
    '/project',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true
    })
  );
};

 

빨간 글씨는 본인의 프로젝트 명에 맞게 수정해 주세요.

이후에 fetch("/project/anypath") 를 통해서 요청하는 get이나 post 요청은

http://localhost:8080/project/anypath 의 경로를 거치게 됩니다.

 

이 api를 사용했을 때와 사용하지 않았을 때

/project 가 사용된 경로에서만 8080의 포트가 사용되지만

다른 경로는 지정되지 않아서 다른 주소와 포트를 할당할 수 있다는 차이가 존재합니다.

 

changeOrigin: true 는 서버로 데이터를 보냈을때

데이터 포멧 형식을 서버에 맞춰 변형해주는 옵션입니다. 

 

setupPorxy.js 는 반드시 src/setupPorxy.js 의 경로를 지녀야합니다.

내부의 다른 서브경로를 두고 src/path/setupPorxy.js로 작성할 경우 이를 인식하지 못합니다.

 

 

ⓑ기본 react 제공으로 설정한다면

package.json에 

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

를 추가해줍니다.

 

 

이후의 모든 get 과 post 의 요청은 http://localhost:8080을 통해 요청됩니다.

예를 들어 fetch("/project") 를 사용할 경우 http://localhost:8080/project 의 경로에 get 요청을 보냅니다.

 

---

이제 백엔드에 데이터를 요청해서 프론트엔드에서 출력해보겠습니다.

App.js 의 jsx 구문에 존재하는 <div> </div> 내부의 코드들을 지우고

새롭게 작성하겠습니다.

 

예시에서 사용하는 state 활용과 useEffect 는 React 활용에 따라서 제거하고 다른 방법을 취할 수 있습니다.

 

ⓐaxios API 를 사용할 경우의 예제

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

function App() {

  var [answer,setAnswer] = getStateRef([]);
  // 인자에 초기값(데이터형태) 작성, answer에 주소 내부 값, setAnswer에 setter가 리턴
 
  useEffect(()=>{//컴포턴트의 마운트, 언마운트, 변화 직전에 적용되는 리스너
    axios.get("/orderer/bridge").then
    (json => {
        setAnswer(json.data);
    }).catch //리턴된 json 값을 state 에 대입
    ((error) => {
      const { status, config } = error.response;
      if (status === 404) { //해당 서버 경로가 존재하지 않음
        console.log(`${config.url} is not found`);
      }
      else if(error.request) //서버의 응답이 없음
        console.log("error:", error.message);
    });
  },[setAnswer]);//[]외부의 요소를 useEffect내부에 사용시 반드시 작성

  return (
    <div className="App">
      <p>made by frontend / backend</p>
      <dl>
        {answer.map((value,index)=><dt key = {index}>{value}</dt>)}
      </dl>
    </div>
  );
}

export default App;
 

 

 

ⓑfetch를 사용하는 예제

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

function App() {

  var [answer,setAnswer] = getStateRef([]);
  // 인자에 초기값(데이터형태) 작성, answer에 주소 내부 값, setAnswer에 setter가 리턴
  useEffect(()=>{//컴포턴트의 마운트, 언마운트, 변화 직전에 적용되는 리스너
    fetch("/ProjectName/bridge").then
    ((res)=>{
      return res.json();//받은 자료가 json이 아닐 때도 json으로 리턴
    }).then
    ((data)=> {setAnswer(data);}).catch //리턴된 json 값을 state 에 대입
    ((error) => console.log("error:", error));
  },[setAnswer]);//[]외부의 요소를 useEffect내부에 사용시 반드시 작성

  return (
    <div className="App">
      <p>made by frontend / backend</p>
      <dl>
        {answer.map((v)=><dt>{v}</dt>)}
      </dl>
    </div>
  );
}

export default App;

 

 

/ProjectName 은 본인이 Spring MVC를 만들때 사용한 프로젝트 명을 의미합니다.

또한 작성시 /ProjectName/path 을 쓰면 상대경로 ,

ProjectName/path 를 쓰면 절대 경로임을 주의합시다.

 

---

3.실행 결과

 

 

해당 화면의 출력에 성공했다면 연동이 무사히 끝났습니다.