｡項目1-フォルダ設定、Router Dom、Axios（CORS、Proxy）

📕フォルダの設定

リンクをクリックして、ビデオに表示されているフォルダと同じフォルダを設定します
YouTubeを見て勉強しているので、今回は書くより、
ビデオを見たほうがいいと思います.

📘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 runstartを実行すると簡単なページ移動になります
順調に進んでいることを確認し、このように行います.
実際にテスト用のコードであるため、最後のホーム、About、およびUsersを削除します.
使用するコンポーネントのファイルをインポートします.

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に設定し、通常はサーバーポートを3000に設定します.
5000使用
クライアントポートの多くは3000
したがって、サーバポートを5000に変更し、axiosを簡単に使用します.
リクエストを送信して応答を受信した場合、どのような結果が得られますか?
エラーが発生します
私がさっき言ったように、ポート番号が違うからです.
これはCORSです.Proxy設定でこの問題を解決しましょう.

CORS

CORSは政策
Cross-Origin Resource Sharingはセキュリティポリシーです
これは、異なるポートでリソースを共有する場合に適用されるポリシーと考えられます.

Proxy

上記の問題を解決するためにProxyを設定します.
Create Realt Appサイトには
まずプロキシをダウンロードして設定します

npm install http-proxy-middleware --save

ダウンロードが完了したら、srcフォルダでupProxyを設定します.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をサーバに送信
サーバのインデックス.jsに次のコードを追加

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

上記のリクエストを受信し、応答として「エージェントの確認中」に戻ります.
リアクターとサーバを開き、コンソールウィンドウを開きます.

このような良い反応が見られます