⭐프로젝트 1 - 폴더세팅, Router Dom, Axios(CORS, Proxy)

📕폴더세팅

링크를 클릭하여 영상에서 나온것과 같은 폴더 세팅으로 하길바란다

유튜브를 보면서 공부하고 있기 때문에 이번은 내가 글로 쓰는것 보다

영상을 보는게 더 나을것이라고 생각한다

📘React Router Dom

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

npm install react-router-dom --save

클라이언트 폴더로 넘어와서 리액트 라우터 돔을 설치하자

원래는 사이트에 작성하는 메뉴얼같은게 있는데 그대로 해보니 오류가 떠서

검색한 결과 버전이 달라서 아래 코드처럼 작성하면 된다

App.js

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Routes>

          <Route path="/about" element={<About />} />
          <Route path="/users" element={<Users />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

위 코드를 붙여넣고 npm run start를 실행하면 간단한 페이지 이동이 될 것이다

잘 되는 것을 확인했고 이런 방식으로 진행이 된다

우리는 맨 마지막 Home, About, Users는 사실 테스트를 위한 코드였으니 삭제하고,

우리가 사용할 Components 안에있는 파일들을 import 시키자

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Footer from './components/views/Footer/Footer'
import LandingPage from './components/views/LandingPage/LandingPage'
import LoginPage from './components/views/LoginPage/LoginPage'
import NavBar from './components/views/NavBar/NavBar'
import RegisterPage from './components/views/RegisterPage/RegisterPage'

function App() {
  return (
    <Router>
      <div>
        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Routes>
          <Route path="/Footer" element={<Footer />} />
          <Route path="/LoginPage" element={<LoginPage />} />
          <Route path="/NavBar" element={<NavBar />} />
          <Route path="/RegisterPage" element={<RegisterPage />} />
          <Route path="/" element={<LandingPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

이렇게 하고 직접 주소를 바꿔보면 라우트가 제대로 된 것을 확인할 수 있다

📗Axios

지금까지는 로그인이나 로그아웃을 할 때 클라이언트를 구현해놓지 않았기 때문에

포스트맨을 이용하여서 데이터의 흐름을 확인하였다

이제 클라이언트를 만들었으니 이용할건데 클라이언트에서 데이터를 보낼 때

Axios라는 라이브러리를 이용해서 보내도록 할 것이다

jQeury를 사용할 때 AJAX라고 생각하면 된다

npm install axios --save

내가 처음에 실수로 서버를 만들때 포트를 3000으로 했는데 보통 서버 포트를

5000으로 사용한다

클라이언트 포트를 3000으로 대부분 사용한다

그래서 서버 포트를 5000으로 다시 수정하고 간단하게 axios를 사용해서 서버에

요청을 보내고 응답을 받으면 어떤 결과가 나올까?

에러가 발생할 것이다

방금 말했듯이 포트번호가 서로 다르기 때문이다

이것이 CORS이고 이것을 Proxy설정을 통하여 해결하도록하겠다

CORS

CORS는 정책이다

Cross-Origin Resource Sharing 라는 보안 정책이다

서로다른 포트에서 리소스를 공유할때 적용되는 정책이라고 보면된다

Proxy

위 문제를 해결하기 위해 Proxy라는 것을 설정해 줄 것이다

create React App 사이트에 가면 나와있다

일단 설정을 하기 위해 프록시를 다운받아야 한다

npm install http-proxy-middleware --save

다운이 완료되면 src 폴더에 setupProxy.js 파일을 만들어서 아래 코드를 작성한다

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


module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

Axios를 이용해서 설정이 제대로 되었나 확인해보도록 하자

확인

LandingPage.js 파일을 아래와 같이 수정하자

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

function LandingPage() {

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

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

export default LandingPage

설명하자면 랜딩페이지에 들어오자마자 useEffect 를 실행한다는 것이다

get request를 서버에 보내는 것이다

server 의 index.js에 아래의 코드를 추가하자

app.get('/api/hello', (req, res) => {
  res.send("proxy 확인중")
})

위에서 보낸 request를 받아서 response로 "proxy 확인중"을 돌려준다

이제 리액트랑 서버를 둘다 켜보고 콘솔창을 열어보자

이렇게 제대로 응답이 온 것을 볼 수 있다