NodeJS & ReactJS RestAPI 연동하기

이번에 NodeJS와 React를 이용하여 토이 프로젝트를 진행하기 위해 기본적인 서버 및 프론트 세팅을 진행하려고 한다.

디렉토리 구조

위와 같은 형식으로 구조를 만들어 보려고 한다.

---

Server

우선 Node 프로젝트를 하나 생성한다.

mkdir "projectName"
cd "projectName"
mkdir backend
cd backend
npm init -y

backend 디렉토리 내부에 package.json 파일이 생성되었을 텐데 해당 내부로 들어가 license를 "MIT"로 변경하고,

main, keywords 등 필요 없는 내용은 삭제한다.

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "nodemon"
  },
  "license": "MIT"
}

이후 서버 구성에 필요한 패키지를 설치한다.

npm i express				// 서버 구동
npm i body-parser			// 데이터 json 변환
npm i cors					// Cross-Origin Resource Sharing
npm i @babel/core @babel/node @babel/cli @babel/preset-env -D	// js 버전 변환
npm i nodemon -D			// 서버 자동 재실행

backend 디렉토리 내부에 server.js 파일을 생성해준다.

import express from "express";
import bodyParser from "body-parser";
import cors from "cors";

// variable
const PORT = 5000;
const app = express();

// middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

// routing
app.get("/api", (req, res) => {
  res.json({ title: "Hello" });
});

// server start
app.listen(PORT, () => {
  console.log(`✅ Listening on http://localhost:5000/`);
});

그리고 서버의 자동 재실행과 JS 문법 변환을 위해 nodemon.json, babel.config.json을 생성한다.

nodemon.json

babel.config.json

그리고 서버 실행

서버 구동

서버 테스트

위와 같이 출력되면 성공

서버의 최종적인 디렉토리 구조는 아래와 같다.

backend 디렉토리 구조

---

Client

React 프로젝트를 생성하기 위해서 backend 디렉토리 내부가 아닌 최상위 디렉토리에서 해당 명령어를 진행하여야 한다.

npx create-react-app frontend

자동으로 프로젝트가 생성되었다면 제일 먼저 프로젝트 내부에 있는 .git 파일을 제거한다.

rm -rf .git

Github repo에 올리지 않는다면 하지 않아도 상관없다.

frontend 디렉토리 구조

그리고 backend와 통신을 위해 axios를 설치한다.

npm i axios

이후 App.js 파일을 수정한다.

import { useEffect } from "react";
import "./App.css";
import Axios from "axios";

function App() {
  useEffect(() => {
    Axios.get("http://localhost:5000/api").then((res) =>
      console.log(res.data.title)
    );
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello</h1>
      </header>
    </div>
  );
}

export default App;

코드를 수정한 뒤 아래의 명령어를 입력하고 console을 확인한다.

npm start

뷰 페이지

React에서 NodeJS의 데이터를 받아오는 것을 확인할 수 있다.

---

NodeJS와 React를 연동하는 과정에서 문제가 되는 부분은 별로 없지만 위와 같은 디렉토리 구조로 진행할 때는 package.json이 두 개이기 때문에 npm 설치하는 과정에서 디렉토리를 착각하고 다른 곳에 설치하는 일이 발생하지 않도록 주의하는 것이 좋다.