React Router Dom & 데이터 flow, Axios & CORS 이슈, Proxy설정

리액트에서 페이지간에 이동을 할 때 React Router Dom이라는 것을 사용한다. 

일단 react-router-dom이 없으므로 다운로드 받아주자.

 

밑에 사이트 예시를 보면 demo 버전이 잘 되어있다. 

App.js에 밑의 사이트 코드를 복붙해주자.

https://v5.reactrouter.com/web/example/basic

Home v6.6.1

 

 

 

밑에 파일의 18페이지의 밑에 부분에 나와있는 폴더 구조대로 hoc와 utils는 폴더만, 그리고 다른 것 들은 폴더와 파일을 각각 만들어주자.

ex) LandingPage 폴더의 경우 LandingPage.js 파일을 만들어준다.

BoilerPlate Korean.html

1.66MB

 

그리고 App.js에서 각 사이트마다 임포트 해서 라우트를 만들어주자.

 

App.js

import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import RegisterPage from "./components/views/RegisterPage/RegisterPage";


function App() {
return (
<Router>
    <div> 

    <hr/>

        <Switch>
            <Route exact path="/" component={LandingPage}>
                {/* <LandingPage /> */}
            </Route>


            <Route exact path="/Login">
                <LoginPage />
            </Route>

            <Route exact path="/Reigster">
                <RegisterPage />
            </Route>
        </Switch>
    </div>
</Router>
);
}

export default App;

 

 

 

*Axios*

지금까지 client가 없어서 postman을 이용해왔는데 이젠 client가 있으니까 client를 이용해서 서버에 요청을 보낼 수 있다.

서버에 요청을 보낼 때 Axios를 이용한다.

axios가 없기 때문에 client 디렉터리에서 axios를 다운로드 받아주자.

client에서 임시적으로 server에다가 간단한 요청을 보내보자.

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

function LandingPage() {

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

return (
<div>LandingPage</div>
)
}

export default LandingPage

LandingPage.js

 

 

 

app.get('/api/hello', (req, res) => {
res.send('hi')
})

server/index.js

 

이렇게 코드를 넣어주고 npm run start를 하면 에러가 난다. 

그 이유는 server는 5000번 포트이고, client는 3000번 포트라서 LandingPage.js 에서 저런식으로 요청을 보내면 3000번 포트로 가게된다. 그래서 server가 요청을 받지 못한다.

 

 

*CORS  정책*

CORS은 Cross-Origin Resource Sharing 의 약자로 W3C에서 내놓은 정책이다. 의미를 해석을 해보면 Cross-Origin의 Resrouce를 공유하는 정책이라고 볼 수 있을 것 같다. 모질라에 있는 CORS의 정의를 빌려오자면 CORS는 특정 헤더를 통해서 브라우저에게 한 출처(origin) 에서 실행되고 있는 웹 애플리케이션이 다른 출처(cross-origin)에 원하는 리소스에 접근할 수 있는 권한이 있는지 없는지를 알려주는 매커니즘이다. 여기서 origin이란 특정 페이지에 접근할 때 사용되는 URL의 Scheme(프로토콜), host(도메인), 포트를 말한다. 그래서 same-origin이란 scheme(프로토콜), host(도메인), 포트가 같다는 말이며, 이 3가지 중 하나라도 다르면 cross-origin이다.

 

참고 사이트

https://vvshinevv.tistory.com/60

CORS 정책

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

[WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

front만 컨트롤 할 수 있는 상황에선 jsonP를 이용하는 방법,

front랑 back 둘 다 컨트롤 할 수 있는 상황에선 client에서 server에 request를 보낼 때 cors정책으로 막힌 어떤 부분들을 허용할 수 있도록 설정하는 방법,

개발자 도구를 이용해서 해결하는 방법들이 있지만 모두 제한적이다.

 

강의에서 해결한 방법은 Proxy를 설정하는 것이다.

https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Proxying API Requests in Development | Create React App

 

현재 http-Proxy-middle가 없으므로 다운 받아주자.

메뉴얼에 따라 다음으로 해줄 것은 src/setupProxy.js 파일을 만들어서 메뉴얼에 나와있는 코드를 넣어주자.

client/src/setupProxy.js

server에서 port를 5000번으로 설정해주었기 때문에 target또한 5000번 포트로 해줘야한다.

그리고 나는 gitpod(goorm ide를 쓸 때도 있지만 현재는 gitpod을 쓰고있다.)을 쓰고 있기 때문에 target 경로를 

gitpod에서 따로 설정되는 백엔드 서버로 바꿔줬다. 

gitpod을 사용하는 사람은 front랑 back을 실행시켰을 때 밑에 터미널 창 메뉴바를 보면 PORTS창이 있을건데 여기를 보면 서버 주소가 나와있다. 

 

 

그리고 front랑 backend 둘 다 실행시켜주면 

콘솔창에 client가 server로 부터 요청했을때 데이터를 얻은 값이 잘 출력된다.