리액트에서 페이지간에 이동을 할 때 React Router Dom이라는 것을 사용한다.
일단 react-router-dom이 없으므로 다운로드 받아주자.
밑에 사이트 예시를 보면 demo 버전이 잘 되어있다.
App.js에 밑의 사이트 코드를 복붙해주자.
https://v5.reactrouter.com/web/example/basic
밑에 파일의 18페이지의 밑에 부분에 나와있는 폴더 구조대로 hoc와 utils는 폴더만, 그리고 다른 것 들은 폴더와 파일을 각각 만들어주자.
ex) LandingPage 폴더의 경우 LandingPage.js 파일을 만들어준다.
그리고 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
front만 컨트롤 할 수 있는 상황에선 jsonP를 이용하는 방법,
front랑 back 둘 다 컨트롤 할 수 있는 상황에선 client에서 server에 request를 보낼 때 cors정책으로 막힌 어떤 부분들을 허용할 수 있도록 설정하는 방법,
개발자 도구를 이용해서 해결하는 방법들이 있지만 모두 제한적이다.
강의에서 해결한 방법은 Proxy를 설정하는 것이다.
현재 http-Proxy-middle가 없으므로 다운 받아주자.
메뉴얼에 따라 다음으로 해줄 것은 src/setupProxy.js 파일을 만들어서 메뉴얼에 나와있는 코드를 넣어주자.
server에서 port를 5000번으로 설정해주었기 때문에 target또한 5000번 포트로 해줘야한다.
그리고 나는 gitpod(goorm ide를 쓸 때도 있지만 현재는 gitpod을 쓰고있다.)을 쓰고 있기 때문에 target 경로를
gitpod에서 따로 설정되는 백엔드 서버로 바꿔줬다.
gitpod을 사용하는 사람은 front랑 back을 실행시켰을 때 밑에 터미널 창 메뉴바를 보면 PORTS창이 있을건데 여기를 보면 서버 주소가 나와있다.
그리고 front랑 backend 둘 다 실행시켜주면
콘솔창에 client가 server로 부터 요청했을때 데이터를 얻은 값이 잘 출력된다.
'boilerplate > Jhon-Ahn boilerplate frontend' 카테고리의 다른 글
React Hooks (0) | 2023.01.06 |
---|---|
Redux (0) | 2023.01.06 |
Proxy Server & Concurrently & Antd CSS FrameWork (0) | 2023.01.04 |
create-react-app 구조 & CRA to our Boilerplate (0) | 2022.12.31 |
create-react-app (1) | 2022.12.31 |