React Router 설정과 API Server Json 통신하는 방법(Router, Promise, Axios, Node.js, Ajax, React 페이지 이동, Spring, Spring Boot)

React Router 설정과 API Server Json 통신하는 방법(Router, Promise, Axios, Node.js, Ajax, React 페이지 이동, Spring, Spring Boot)

이번에는 React 웹사이트의 Router 설정과 axios를 활용하여 API server에 JSON data 통신하는 방법에 대해 포스팅 해보도록 하겠습니다. 

 

먼저 필자의 Router 버전은 6v 입니다.

※참고사항으로 v6 이하의 버전인 경우 해당 코드 및 커맨드의 쓰임이 다를 수 있다는 점 말씀드립니다.

 

Router 설치 방법

npm install react-router-dom

OR

npm install react-router-dom localforage match-sorter sort-by

localforage match-sorter sort-by 옵션의 경우 추가적인 유틸리티 입니다. 즉 의무 사항은 아니며 해당 프로젝트에 필요한 것에 따라 다른 라이브러리나 유틸리티를 사용할 수 있습니다.

 

라우터 install 후, package.json을 확인합니다.

"react-router-dom": "^6.23.1",

 

 

Router 적용하기

설치 및 다른 준비가 끝났다면, 라우터를 적용 해 보면 코드는 다음과 같습니다.

import * as React from 'react';
import {BrowserRouter, Route, Routes} from "react-router-dom";
import Encode from "./view/solutions/Encode";
import Main from "./view/Main";

function App() {

  return (
    <div className="App">
        <BrowserRouter>
            <Routes>
                <Route path={"/"} element={<Main />}></Route>
                <Route path={"/solutions/baseEncryptionGo"} element={<Encode />}></Route>
            </Routes>
        </BrowserRouter>
    </div>
  );
}

export default App;

웹사이트의 URL이 "/"(ROOT)인 경우 Main.js를 보여주게 되고, "/solutions/baseEncryptionGo"인 경우 Encode.js를 보여주게 됩니다. 필자의 경우 App.js에 구현을 하였는데 상황에 따라 index.js, Routing.js 등등 다른 js파일에 구현하여 프로젝트의 아키텍처를 구성할 수 있습니다.

 

결과는 다음과 같습니다.

 

http://localhost:3000/

Main.js

 

 

 

 

http://localhost:3000/solutions/baseEncryptionGo

Encode.js

 

 

 

 

API Server, Json 통신

axios 설치합니다.

npm install axios

 

axios 설치한 버전은 다음과 같습니다. package.json

"devDependencies": {
    "axios": "^1.6.8",
  }

 

준비한 API Server 프로젝트의 Spring Boot, webconfig 설정은 다음과 같습니다.

WebConfig.java

public class WebConfig implements WebMvcConfigurer {
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET","POST").allowedHeaders("*");
    }
}

만약 로컬 PC에서 테스트를 진행하면 proxy관련 axios error: network error 에러가 발생합니다.(CORS 교차 원본 리소스 공유) 해당 API 서버 프로젝트 중, 위 코드의 설정이 필요합니다. 그리고 임시적으로 SSL인증서를 만들거나, 로컬 PC에 https설정이 되어있다면 동일한 에러가 발생 할 수 있습니다.

 

※ CORS(교차 원본 리소스 공유)

해당 브라우저가 리소스 로드를 허용해야 하는 자체 원본이 아닌 도메인 또는 포트를 서버가 나타낼 수 있도록하는 HTTP헤더 기반의 실행되는 메커니즘 이라고 합니다. JavaScript는 이러한 요청을 만들 때 보안상 이유로 브라우저는 스크립트에서 시작된 교차 출처 HTTP 요청을 제한한다고 합니다.

 

위 API Server의 Java-Spring 코드는 CORS를 활성화하기 위해 구성된 코드입니다.

addMapping() 메소드는 교차 URL 경로 "/**"를 허용하고, allowedOrigins() 리소스에 액세스할 수 있는 원본을 지정합니다.("*")으로 모든 출처 허용하고, allowedMethods() GET, POST request를 허용합니다.

 

정리하자면 GET, POST 방식의 Request를 해당 리소스에 액세스 할 수 있게 설정하였습니다.

 

React 코드는 다음과 같습니다.

let location = useLocation();
const API_URL = "http://localhost:8080" + location.pathname;

// encoding
const [value, setValue] = React.useState("");
const [resValue, resSetValue] = React.useState("");


<TextField
    placeholder="인코딩"
    multiline
    style={{width:'100%', height:'100%'}}
    variant="outlined"
    maxRows={10}
    onChange={(e) =>{
        setValue(e.target.value);
    }}
/>

<Button variant="contained" size="large" onClick={() => {

    let data = {
        keyValue: "EN",
        str: {value}.value
    };

    axios.post(API_URL, JSON.stringify(data), {
        headers: {"Content-Type": "application/json"
        }
    })
    .then((res) => {
        resSetValue(res.data.encoding);

        }).catch((err) => {
            console.log("err: " + err);
        });

    }}>
        인코딩
</Button>

state hook과 axios를 이용하여 데이터를 request하고 response받은 데이터를 리렌더링 합니다. 간단하게 해당 문자열을 요청하면 인코딩된 문자열을 응답받는 프로세스를 테스트 하였습니다. 결과는 다음과 같습니다. 

 

 

 

테스트 결과:

테스트 결과

 

 

API Server의 Log는 다음과 같습니다.

API Server Log