풀 스택 React 및 Node.js - 서버 생성

먼저 react-client 폴더와 같은 수준에 node-server 폴더를 생성합니다.

node-server 폴더 내에서 shell/CLI를 사용하여 다음 명령을 입력하여 package.json 파일을 생성합니다.

npm init -y

The -y flag means that package.json will be filled with defaults. You can edit the file later to add your name and repository details, etc.

다음으로 이것을 실행하여 일부 종속성을 설치하십시오.

npm i -S express body-parser cors morgan

i is shorthand for install
-S is shorthand for -save

index.js를 만들고 다음 코드를 붙여넣습니다.

const express = require('express');
const cors = require('cors');
const morganLogger = require('morgan');
const bodyParser = require('body-parser');

const env = process.env.NODE_ENV || 'development';
const app = express();

if (env === 'development') {
  app.use(cors());
}

app.use(morganLogger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

// 404 route not found!
app.use(function (req, res, next) {
  const error = 'Here be dragons. Route not found';
  console.info(`404 error! ${error}`)
  res.status(404).send(error);
});

const port = 4011;

app.listen({port}, async () => {
  const baseUrl = `http://localhost:${port}`;

  console.log(`Server running at: \t @ ${baseUrl}/`);
});

우리가 가져오는 패키지에 대해 간단히 설명하겠습니다.

express는 웹 프레임워크입니다.

cors 패키지는 "원본 간 리소스 공유"를 비활성화합니다. 여기서 origin은 URL이고 리소스는 이미지와 같은 자산입니다. cors 정책의 목적은 웹사이트가 이미지 링크를 다른 사이트로 지정하여 호스팅 비용을 훔치는 것을 방지하는 것입니다. 개발 단계에서 우리는 React 클라이언트와 노드 서버를 모두 하나의 시스템에서 각각 자체 프로세스로 실행하기 때문에 cors를 허용합니다(동일한 폴더에 둘 다 배포하고 cors 문제를 피할 수 있음). 트래픽(HTTP 요청 및 응답)을 올바른 프로세스로 보낼 수 있도록 서버 및 클라이언트 URL의 포트 번호가 필요합니다. 포트 번호는 서버 응답의 출처에 대한 브라우저 결정에 포함됩니다.

Your browser sees the website is on port 3000 but it attempts to fetch data from port 4011. Even though they both run on localhost, because the port numbers are different, to a browser they are different websites entirely! If we didn't disable cors, this request would violate the same-origin policy and be denied!

body-parser는 데이터를 추출하기 위해 들어오는 요청을 구문 분석하는 미들웨어입니다. 이 경우에는 json입니다(유용할 수 있는 몇 가지 다른 구문 분석기도 포함됨).

Morgan은 미들웨어 요청 로거입니다. 이 경우 모든 메시지를 콘솔로 파이프합니다(대신 파일에 쓸 수 있음). 이것은 모든 노드 서버에 포함해야 할 가장 필수적인 것 중 하나입니다. 문제 해결 및 디버깅을 위해 콘솔에 기록된 모든 요청을 보는 것은 순금입니다!

You might notice our server returns no data, has no routes defined, but has a 404 handler. I always add a 404 handler first! When your app grows and has complex routing, getting a clear message, a "final destination" for unmatched routes is essential for development and debugging.

다음으로 package.json을 편집하고 "scripts"섹션을 변경하여 추가 줄을 추가합니다.

  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

마지막으로 다음 명령으로 Node.js 서버를 실행할 수 있어야 합니다.

npm run start

Run this in the same folder as the package.json file

콘솔에서 서버가 실행 중이라는 메시지를 출력하면 이 URL을 브라우저에 붙여넣습니다. "http://localhost:4011/ "

"Here be dragons. Route not found"라는 문자 메시지가 표시됩니다.

좋습니다. HTTP 404 오류를 수신했습니다. 이는 현재 서버가 데이터를 반환하지 않고 라우팅 경로가 정의되어 있지 않기 때문에 예상한 것입니다.

이제 작동하는 클라이언트와 서버가 있습니다. 일부 데이터를 반환합니다.

코드 저장소: Github Repository