<목차>
데이터 Flow & Axios
CORS 이슈, Proxy 설정
Proxy Server란?
Concurrently
Antd CSS Framework
이전의 오류 해결
이전의 포스팅에서 홈페이지에서 카테고리 메뉴가 제대로 출력되지 않고 백지로만 뜨는 상황이 있었습니다. App.js의 코드를 약간 바꾸어주니 제대로 출력되는 것을 확인했습니다.
아래의 코드는 웹페이지에서 예시로 있었던 코드인데, 이 코드대로 하면 백지만 나오게 됩니다. 또한 정상적으로 실행되기 위해서는 Switch도 Routes로 바꾸어야 합니다.
function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
);
}위의 코드를 아래처럼 바꾸어주었더니 정상적으로 실행되는 것을 확인했습니다.
function App() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
<hr />
<Routes>
<Route exact path="/" element ={<Home/>}/>
<Route exact path="/about" element ={<About/>}/>
<Route exact path="/dashboard" element ={<Dashboard/>}/>
</Routes>
</div>
</Router>
);
}정상적으로 출력된 내용입니다.
데이터 Flow & Axios
여기서 Server는 Node.js로 구현한 부분, Client가 React로 구현한 부분, DATA BASE는 Mongo DB를 의미합니다.
지금까지는 request를 할 client가 없었기 때문에 Postman을 이용했습니다.
이제부터는 ReactJS에서 이를 담당하면 되는데, 이를 위해 필요한 것이 AXIOS 라이브러리입니다. Axios는 jQuery를 사용할 때의 AJAX와 같은 것이라 보면 됩니다.(백엔드와 브라우저 간 통신 담당)
이제 request를 보내기 위해 각각의 페이지.js에서 requset를 보내는 코드들을 넣어보겠습니다. 그리고 request를 받는 코드도 존재해야하는데요. 이는 node.js 실습에서 만들었던 server 폴더의 index.js에 코드를 넣어주면 됩니다.
//LandinPage.js
import React, { useEffect} from 'react'
import axios from 'axios';
function LandingPage() {
useEffect(() => { //이 페이지에 들어오자마자 아래의 코드들을 실행함
axios.get('/api/hello') // get request를 서버에 보내는 코드(엔드포인트가 /api/hello) -> 서버의 index.js에서 이를 받는 코드가 존재 해야함.
.then(response => console.log(response.data)) //서버에서 돌아오는 response를 콘솔창에 보여줄수 있게 한 것.
})
return (
<div>
LandingPage
</div>
)
}
export default LandingPage//server의 index.js
app.get('/api/hello', (req, res) => { //페이지.js에서 보내는 request를 보내는 코드
res.send('안녕하세요')
})-> 하지만 이렇게 Axios를 사용해서 Request를 보내면 에러가 생깁니다.
왜? 서버와 클라이언트는 포트 번호가 다릅니다. 그래서 request가 정상적으로 주고받는 것이 되지 않는 것입니다. (Cors 정책 때문)
그래서 우리는 이를 해결해야 합니다.
CORS 이슈, Proxy 설정
아무 서버나 클라이언트 끼리 통신하는 것을 막기 위해서 보안 상의 이유로 Cors 정책이라는 것이 있습니다. 이때문에 위에서 서버와 클라이언트, 즉 다른 포트 번호(다른 origin) 끼리 제대로된 통신이 불가능했던 것입니다. 그러므로 통신할 수 있게 별도로 설정을 해주어야 합니다. 그리고 이에 쓰이는 것이 바로 Proxy입니다.
proxy 설정을 위해 설명이 있는 웹사이트에서 내용을 참고하였습니다.
Configuring the Proxy Manually 부분을 보면 우리가 설치해야할 디펜던시와 추가해야할 코드들이 적혀있습니다.
일단 src 폴더 안에 setupProxy.js라는 파일을 만듭니다.
npm install http-proxy-middleware --save //디펜던시 설치setupProxy.js 파일 안에는 아래의 코드를 넣습니다.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000', //3000번에서 보내는 것을 5000번으로 전달하겠다는 의미
changeOrigin: true,
})
);
};아까 server의 index.js에서 res.send('안녕하세요')로 정상적으로 페이지에 req가 전달되었는지 확인하기로 하였는데요.
실제로 react의 페이지에서 콘솔창을 확인하면 아래와 같이 안녕하세요가 뜨는 것을 확인할 수 있습니다.
Proxy Server란?
Proxy Server는 접근하는 사람의 IP주소를 모르게 함으로써 보안적인 장점도 있고, 보내는 데이터 또한 임의로 바꿀 수도 있습니다.
이를 통해 방화벽, 웹 필터 기능을 하거나 캐쉬 데이터, 공유 데이터를 제공할 수도 있습니다.
proxy server를 사용하는 이유
1. 회사에서 직원들이나 집안에서 아이들 인터넷 사용 제어
2. 캐쉬를 이용해 더 빠른 인터넷 이용 제공
3. 더 나은 보안 제공
4. 이용 제한된 사이트 접근 가능
Concurrently
Concurrently(라이브러리)를 이용해서 프론트, 백 서버를 한 번에 킬 수 있습니다.
npm install concurrently --save // 루트 디렉토리 안에 설치할 것!
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" // 루트 디렉토리 안 package.js의 "scripts":에 추가할 코드
Antd CSS Framework
CSS Framework를 쓰는 이유 : 기능을 만드는데 더욱 집중하기 위해서
antd 설명
CSS FRAMEWORK 종류 for React JS
1. Material UI
2.React Bootstrap
3.Semantic UI
4.Ant Design
5. Materialize
npm install antd --save // client 폴더 안에 설치할 것!
import 'antd/dist/antd.css'; // client 폴더 안 index.js에 추가할 코드