React와 Node.js를 한 번에 동시에 실행하세요!

7522 단어 reactjavascriptwebdevnode
종종 전체 스택 프로젝트에서 작업하는 시간은 위협적일 수 있습니다. 개인 프로젝트든 직업 프로젝트든 같은 상황에 처하는 경우가 종종 있었습니다. 제가 React와 Node.js로 작업을 시작했을 때 가장 먼저 떠오른 질문은 이 두 가지를 어떻게 연결하고 실행할 수 있습니까?였습니다.

이것은 개발 환경에서 React와 Node.js를 실행하기 위한 다양한 접근 방식을 살펴보는 2부로 구성된 시리즈입니다.
  • Connecting & Running with Concurrently (이 게시물)
  • (두 번째 게시물)

    • Connecting React to Node.js (also works for any backend) is fairly easy and commonly known as React Proxy. You just need to add proxy field in your package.json of your React project and point it to your development backend server.

    {
    "proxy": "http://localhost:5000"
}
    If you want to learn to more just click here .

    React와 Node.js를 실행하는 것은 연결하는 것보다 더 복잡합니다. 이것은 두 가지를 동시에 실행하기 위한 다른 접근 방식을 살펴보는 두 부분으로 구성된 시리즈가 될 것입니다. 두 가지 접근 방식은 사용되는 도구, 폴더 구조 등 여러 면에서 다릅니다.

    동시 사용



    Concurrently은 여러 npm 스크립트를 동시에 실행할 수 있는 패키지입니다.

    ~ 초기 설정



    $ mkdir awesome_project && cd awesome_project && npm init -y

    이것은 몇 가지 기본 옵션을 사용하여 프로젝트에 package.json를 생성합니다.

    ~ 반응 앱 만들기



    $ npx create-react-app client

    그러면 반응 앱이 들어 있는 client라는 폴더가 생성됩니다.

    ~ 일부 Node.js 코드



    프로젝트의 루트에 index.js를 만들고 서버 설정이 없는 경우 다음 코드를 붙여넣습니다.

    #!/usr/bin/env node

const http = require("http");

// Port Environment variable
const PORT = process.env.PORT || 5000;

// Creating the node server
const SERVER = http.createServer();

// Firing up the server on selected port
SERVER.listen(PORT);

SERVER.on("listening", () => {
    console.log("[Server]::LISTEN:%s", PORT);
});

// Callback function for checking connecting or error
SERVER.on("error", error => {
    throw new Error(`[Server]::ERROR:${error.message}`);
});

    ~ 동시 설치



    npm i -D concurrently

    React와 Node를 동시에 사용하려면 package.json 에 스크립트를 추가해야 합니다.

    {
    "scripts": {
        "server": "node index.js",
        "client": "npm start --prefix client",
        "dev": "concurrently \"npm run server\" \"npm run client\""
    }
}

    마지막으로 다음과 같은 폴더 구조를 갖게 됩니다.

    > awesome_project
    > node_modules
    > client # This is our react front-end and else will be our node.js backend
        > node_modules
        > src
        - package.json
    - index.js
    - package.json

    이제 dev 스크립트는 프로젝트에서 React와 Node.js 앱을 모두 실행하고 proxy 스크립트는 둘 다 연결합니다.

    $ npm run dev

    동시에 사용하는 것은 대부분의 개발자에게 완벽하게 문제가 되지 않습니다(이 또한 내가 처음에 사용한 것과 동일한 접근 방식입니다). 그러나 폴더 구조가 성가신 한 가지 문제가 있습니다 (당신에게는 다를 수 있음).

    도커 방식을 살펴보겠습니다. 따라서 도커를 모른다면 여기 그대로 있으십시오.
    고대의 PHP 소환 HTTP 머리 분사
    Next.js의 클라이언트측 및 서버측 리디렉션

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage