node.jsでサーバの学習を開始すると、よく疑問を耳にします.
node.私はjsでこれらをすることができます.どうやってフロントに連絡しますか?
サーバーと反応器の間に何かが切れたような気がしましたが、今は少し理解したようなので、文章を書いて考えを整理しました.

node.jsを使用して作成されたサーバ

node.jsはjavascriptを呼び出すことができる環境です.これはJavaScriptアクチュエータです.サーバーも回転できます.node.jsといえば,サーバの出現もJavaScriptを用いて作成したサーバが実行する環境のためである.

const http = require('http');
const fs = require('fs').promises;

const users = {}; // 데이터 저장용

http.createServer(async (req, res) => {
  try {
    console.log(req.method, req.url);
    if (req.method === 'GET') {
      if (req.url === '/') {
        const data = await fs.readFile('./restFront.html');
        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        return res.end(data);
      } else if (req.url === '/about') {
        const data = await fs.readFile('./about.html');
        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
        return res.end(data);
      } else if (req.url === '/users') {
        res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
        return res.end(JSON.stringify(users));
      }
      // /도 /about도 /users도 아니면
      try {
        const data = await fs.readFile(`.${req.url}`);
        return res.end(data);
      } catch (err) {
        // 주소에 해당하는 라우트를 못 찾았다는 404 Not Found error 발생
      }
    } else if (req.method === 'POST') {
      if (req.url === '/user') {
        let body = '';
        // 요청의 body를 stream 형식으로 받음
        req.on('data', (data) => {
          body += data;
        });
        // 요청의 body를 다 받은 후 실행됨
        return req.on('end', () => {
          console.log('POST 본문(Body):', body);
          const { name } = JSON.parse(body);
          const id = Date.now();
          users[id] = name;
          res.writeHead(201);
          res.end('등록 성공');
        });
      }
    } else if (req.method === 'PUT') {
      if (req.url.startsWith('/user/')) {
        const key = req.url.split('/')[2];
        let body = '';
        req.on('data', (data) => {
          body += data;
        });
        return req.on('end', () => {
          console.log('PUT 본문(Body):', body);
          users[key] = JSON.parse(body).name;
          return res.end(JSON.stringify(users));
        });
      }
    } else if (req.method === 'DELETE') {
      if (req.url.startsWith('/user/')) {
        const key = req.url.split('/')[2];
        delete users[key];
        return res.end(JSON.stringify(users));
      }
    }
    res.writeHead(404);
    return res.end('NOT FOUND');
  } catch (err) {
    console.error(err);
    res.writeHead(500);
    res.end(err);
  }
 })
  .listen(8082, () => {
    console.log('8082번 포트에서 서버 대기 중입니다');
  });

今でもしばらく見てから、どういう意味か理解できる上のコードは純Nodeです.これはjsで作成されたサーバコードです.各行のコードの内容はまだ完全に理解できませんが、自信を持って言えます.
サーバは様々なリクエストに対する様々な応答の集合です!
サーバの役割は、入力されたURI、発行されたリクエスト、およびどのリクエストに含まれるクエリーに基づいて適切な応答を設定することです.応答送信としては任意のコンテンツであってもよいが、基本的にjson形式で送信するのは鉄則である.

はんのうき

リアクターはUIを作成するためのライブラリです.単一ページアプリケーション、仮想DOM、およびJSXを使用する動的ページの作成に特化しています.

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { Main, Login, MyPiscine, RegisterPiscine, MyPiscineView } from 'pages';

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/main" component={Main} />
        <Route exact path="/myPiscine/:index" component={MyPiscine} />
        <Route exact path="/myPiscine/view/:index" component={MyPiscineView} />

        <Route
          exact
          path="/registerPiscine/:index"
          component={RegisterPiscine}
        />
      </Switch>
    </Router>
  );
};

export default Routes;

ルータ機能を利用してreactにURLに合ったページを表示することが可能になります.つまり,サーバはURLに合ったhtmlページを要求する必要はない.

二人合わせて何になるの

応答におけるサーバの役割は、URLにページを送信することではありません.これは,反応器がURLに合ったページを表示するために自分でルーティングするためである.
反応器におけるサーバの役割は主にREST APIを確立し,クライアント要求時に適切なデータを送信することである.
expressで設定すると、自動的にjsonに変換されます.

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get("/", (req, res) => {
  res.send({ message: "main" });
});

app.get("/api/piscine", (req, res) => {
  try {
    res.send(["qwe", "zcxv", "asdg", "sa", "saf", "asffqw"]);
    console.log("success");
  } catch (e) {
    console.log(e);
  }
});
app.listen(port, () => {
  console.log(`${port} 포트에서 동작중!`);
});

サーバー側コード.localhost:5000/api/piscineに近づくと、以下のデータが応答として伝達される.

import { React, useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import Header from 'components/Header';
import './Main.scss';

const Main = () => {
  const [myPiscine, setMyPiscine] = useState([]);
  const [piscineList, setPiscineList] = useState([]);

  const axiosAPI = async () => {
    try {
      const myPiscineData = await axios('/api/piscine');
      const piscineListData = await axios('/api/piscine');
      console.log(myPiscineData, piscineListData);
      setMyPiscine(myPiscineData.data);
      setPiscineList(piscineListData.data);
    } catch (e) {
      console.log(e);
    }
  };
  useEffect(() => {
    axiosAPI();
  }, []);

  return (
    <div className="main-container">
      <Header />
      {myPiscine && piscineList ? (
        <div className="main-page">
          <h1>참여 중인 과정</h1>

          <div className="parti">
            {myPiscine.map((e, index) => {
              const url = `/myPiscine/${index}`;
              return (
                <Link to={url}>
                  <div>{e}</div>
                </Link>
              );
            })}
          </div>
          <h1>등록 가능한 과정</h1>

          <div className="not-parti">
            {piscineList.map((e, index) => {
              const url = `/registerPiscine/${index}`;
              return (
                <Link to={url}>
                  <div>{e}</div>
                </Link>
              );
            })}
          </div>
        </div>
      ) : (
        <div>로딩 중!</div>
      )}
    </div>
  );
};

export default Main;

これはフロントコードです.リクエストは、サーバが設定したURLと同じURLを使用して応答を受信します.
データを受信する前にレンダリングを試みるとエラーが発生するため、3つの演算子でデータがないときに一時ウィンドウを開きます.
axios応答が受信されると、応答ヘッダ、ステータスコードなど、オブジェクトの内部にオブジェクトとして表示されます.

  "proxy" : "http://localhost:5000/"

フロントのセット.jsonファイルに次の文を追加します."proxy" : "http://localhost:5000/"では、クライアントが作成したサーバに接続できます.
開発者ツール上のアドレスは既存のフロントエンドポート3000回であるが,実際にはproxyに設定されたURLでアクセスしている.