분류 Reactjs

노드 백엔드로 React 앱을 만드는 방법 : 전체 가이드

컨텐츠 정보

  • 조회 286 (작성일 )

본문

Node 백엔드에 연결된 React 프런트 엔드는 빌드 하려는 모든 애플리케이션을위한 견고한 조합입니다.


이 가이드는 React로 가능한 한 쉽게 풀 스택 프로젝트를 만들 수 있도록 설계되었습니다.


React와 Node를 사용하여 전체 프로젝트를 처음부터 설정하고 웹에 배포하는 방법을 살펴 보겠습니다.


자신 만의 React 및 Node 앱을 빌드하고 배포하고 싶으십니까? 이와 같은 자신만의 풀 스택 React 프로젝트를 구축하는 방법을 보여주는 내 과정 시리즈를 확인하십시오.


필요한 도구 


  1. 컴퓨터에 Node 및 NPM이 설치되어 있는지 확인하십시오. nodejs.org에서 둘 다 다운로드 할 수 있습니다 (NPM은 Node 설치에 포함됨).
  2. 원하는 코드 편집기를 사용하십시오. 나는 사용하고 있으며 개인적으로 VSCode 사용을 권장합니다. code.visualstudio.com에서 VSCode를 다운로드 할 수 있습니다.
  3. 컴퓨터에 Git이 설치되어 있는지 확인하십시오. 이것은 Heroku로 애플리케이션을 배포하는 데 필요합니다. git-scm.com에서 얻을 수 있습니다.
  4. heroku.com의 계정. Heroku를 사용하여 앱을 웹에 완전히 무료로 게시 할 것입니다.

1 단계 : 노드 (Express) 백엔드 생성 


먼저 react-node-app (예 :)라는 프로젝트의 폴더를 만듭니다.


그런 다음 해당 폴더를 코드 편집기로 드래그하십시오.


Node 프로젝트를 생성하려면 터미널에서 다음 명령을 실행하십시오.


npm init -y


그러면 모든 앱 스크립트를 추적하고 Node 앱에 필요한 종속성을 관리 할 수 있는 package.json 파일이 생성됩니다.


우리의 서버 코드는 같은 이름의 폴더에 있을 것입니다 : server. 그 폴더를 만들어 보겠습니다.


그 안에 단일 파일을 배치하고, 그 중에서 서버를 실행할 것입니다 : index.js


Express를 사용하여 환경 변수로 포트가 제공되지 않은 경우 포트 3001에서 실행되는 간단한 웹 서버를 생성합니다 (Heroku는 앱을 배포 할 때 이 값을 설정합니다).

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});


그런 다음 터미널에서 Express를 사용하기 위한 종속성으로 설치합니다.


npm i express


그런 다음 npm start로 실행할 때 웹 서버를 시작하는 package.json에 스크립트를 만듭니다.


// server/package.json

  ...
  "scripts": {
    "start": "node server/index.js"
  },
  ...


마지막으로 터미널에서 npm start를 실행하여 이 스크립트를 사용하여 앱을 실행할 수 있으며 포트 3001에서 실행 중인지 확인해야 합니다.


npm start

> node server/index.js

Server listening on 3001


Clip 1 


2 단계 : API 엔드 포인트 생성 


Node 및 Express 서버를 API로 사용하여 React 앱 데이터를 제공하거나 해당 데이터를 변경하거나 서버 만이 할 수 있는 다른 작업을 수행 할 수 있습니다.


우리의 경우에는 React 앱에 "Hello from server!"라는 메시지를 간단하게 보낼 것입니다. JSON 개체에서.


아래 코드는 경로 / api에 대한 엔드 포인트를 생성합니다.


React 앱이 해당 경로에 GET 요청을 하면 JSON 데이터로 응답합니다 (응답을 의미하는 res 사용).

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});


참고 :이를 app.listen 함수 위에 배치해야 합니다.


노드 코드를 변경 했으므로 서버를 다시 시작해야 합니다.


그렇게 하려면 Command / Ctrl + C를 눌러 터미널에서 시작 스크립트를 종료합니다. 그런 다음 npm start를 다시 실행하여 다시 시작합니다.


이를 테스트 하려면 브라우저에서 http://localhost:3001/api를 방문하여 메시지를 확인하면 됩니다.


Clip 2 


3 단계 : React 프런트 엔드 만들기 


백엔드를 만든 후 프런트 엔드로 이동하겠습니다.


다른 터미널 탭을 열고 create-react-app을 사용하여 client라는 이름으로 새 React 프로젝트를 만듭니다.


npx create-react-app client


그 후 모든 종속성이 설치된 React 앱이 생깁니다.


우리가 해야 할 유일한 변화는 우리의 package.json 파일에 proxy라는 속성을 추가하는 것입니다.


이렇게 하면 네트워크 요청을 할 때마다 실행 중인 출처 (http://localhost:3001)를 제공하지 않고도 노드 서버에 요청할 수 있습니다.


// client/package.json

...
"proxy": "http://localhost:3001",
...


그런 다음 Node 서버와 동일한 시작 스크립트를 실행하여 React 앱을 시작할 수 있습니다. 먼저 새로 생성 된 클라이언트 폴더로 이동하십시오.


그 후 localhost : 3000에서 시작됩니다.


cd client
npm start

Compiled successfully!

You can now view client in the browser.

Local:            http://localhost:3000


Clip 3 


4 단계 : React에서 Node로 HTTP 요청 만들기 


이제 작동하는 React 앱이 있으므로 API와 상호 작용하는 데 사용하려고 합니다.


앞서 생성 한 / api 엔드 포인트에서 데이터를 가져 오는 방법을 살펴 보겠습니다.


이를 위해 src 폴더의 App.js 구성 요소로 이동하여 useEffect를 사용하여 HTTP 요청을 할 수 있습니다.


Fetch API를 사용하여 간단한 GET 요청을 수행 한 다음 데이터를 JSON으로 반환합니다.


데이터가 반환되면 메시지 속성 (서버에서 보낸 인사말을 가져 오기 위해)을 얻은 다음 데이터라는 상태 변수에 넣습니다.


그러면 해당 메시지가 있는 경우 페이지에 해당 메시지를 표시 할 수 있습니다. JSX에서 조건문을 사용하여 데이터가 아직 없으면 "Loading ..."이라는 텍스트를 표시합니다.

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>{!data ? "Loading..." : data}</p>
    </header>
  </div>
  );
}

export default App;


Clip 4 

5 단계 : Heroku를 사용하여 웹에 앱 배포 


마지막으로 애플리케이션을 웹에 배포 해 보겠습니다.


먼저 클라이언트 폴더 내에서 create-react-app에 의해 자동으로 초기화되는 Git 리포지토리를 제거해야 합니다.


클라이언트가 아닌 프로젝트의 루트 폴더 (react-node-app)에 Git 리포지토리를 설정하기 때문에 앱 배포에 필수적입니다.


cd client
rm -rf .git


배포 할 때 Node 백엔드와 React 프런트 엔드는 모두 동일한 도메인 (예 : mycoolapp.herokuapp.com)에서 제공됩니다.


Node API가 요청을 처리하는 방법을 확인하므로 사용자가 요청할 때 (예 : 앱의 홈 페이지로 이동할 때) React 앱을 표시 할 코드를 작성해야 합니다.


다음 코드를 추가하여 server/index.js에서 다시 수행 할 수 있습니다.


const path = require('path');
const express = require('express');

...

// Have Node serve the files for our built React app
app.use(express.static(path.resolve(__dirname, '../client/build')));

// Handle GET requests to /api route
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// All other GET requests not handled before will return our React app
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});


이 코드는 먼저 Node가 정적 파일에 대해 express.static 함수를 사용하여 빌드 된 React 프로젝트에 액세스 할 수 있도록 합니다.


그리고 /api 경로에 의해 처리되지 않는 GET 요청이 들어 오면 서버가 React 앱으로 다시 보냅니다.


이 코드를 사용하면 React와 Node 앱을 동일한 도메인에 함께 배포 할 수 있습니다.


그런 다음 프로덕션 용 React 앱을 빌드하는 빌드 스크립트를 서버 package.json 파일에 추가하여 Node 앱에 이를 수행하는 방법을 알릴 수 있습니다.


// server/package.json

...
"scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
...


또한 프로젝트를 빌드 하는 데 사용하는 노드 버전을 지정하려는 "engines"필드를 제공하는 것이 좋습니다. 이것은 배포에 사용됩니다.


node -v를 실행하여 Node 버전을 가져올 수 있으며 결과를 "engines"(예 : 14.15.4)에 넣을 수 있습니다.


// server/package.json

"engines": {
  "node": "your-node-version"
}


그 후 Heroku를 사용하여 배포 할 준비가 되었으므로 Heroku.com에 계정이 있는지 확인하십시오.


로그인하고 대시 보드를 보고 있으면 새로 만들기

>새 앱 만들기를 선택하고 고유 한 앱 이름을 제공합니다.


그런 다음 Git을 사용하여 변경할 때마다 앱을 배포 할 수 있도록 컴퓨터에 Heroku CLI를 설치해야 합니다. 다음을 실행하여 CLI를 설치할 수 있습니다.


sudo npm i -g heroku


설치가 완료되면 heroku login 명령을 사용하여 CLI를 통해 Heroku에 로그인합니다.


heroku login

Press any key to login to Heroku


로그인 한 후 "배포"탭에서 생성 된 앱의 배포 지침을 따르기 만하면 됩니다.


다음 네 가지 명령은 프로젝트에 대한 새 Git 리포지토리를 초기화하고 파일을 추가하고 커밋하고 Heroku 용 Git 원격을 추가합니다.


git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"


마지막 단계는 방금 추가 한 Heroku Git 리모컨을 사용하여 앱을 게시하는 것입니다.


git push heroku master


축하합니다! 풀 스택 React 및 Node 앱이 출시되었습니다!


앞으로 앱을 변경하고 배포하려면 git을 사용하여 파일을 추가하고 커밋 한 다음 Heroku 원격으로 푸시하면 됩니다.


git add .
git commit -m "my commit message"
git push heroku master


React로 YouTube, Instagram, Twitter와 같은 실제 앱을 만들고 싶으신가요? 방법은 다음과 같습니다. 


매달 말에 저는 React를 사용하여 처음부터 끝까지 완전한 앱 클론을 구축하는 방법을 정확히 보여주는 독점 과정을 공개 할 것입니다.


https://dev.to/reedbarger/how-to-create-a-react-app-with-a-node-backend-the-complete-guide-1ple