React와 Express 개발 설정하기(concurrently)

웹 개발은 프론트엔드와 백엔드로 나뉘어진다. 아직 학생이지만 웹 개발에 있어서 이제 백엔드는 API만 보내주고 나머지 작업은 프론트 단에서 하는게 작업이 깔끔하게 이루어 진다고 생각한다.
프론트 엔드는 리액트로 백 엔드는 nodejs의 라이브러리인 express를 이용하여 풀스택 개발 기초 설정에 대해 알아보자.
요구사항 : React 기초, NodeJS 기초
작업 폴더를 생성해보자. 이 글에선 ReactExpress라고 하겠다.
폴더에 접근해서 npm init로 package.json 파일을 생성해주자.

$npm i nodemon --save -dev
$npm i -g create-react-app
$npm i concurrently express --save

기초적인 세팅을 위해 필요한 라이브러리는 3개이다.
nodemon, concurrently , creat-react-app이다 세 가지를 전부 다운받아준다.
nodemon은 코드 변화에 따라 실시간으로 로컬 서버를 업데이트 해주는 역할을 하기 때문에 NodeJS를 이용한 개발을 할 때 필수적이다.
create-react-app은 리액트 라이브러리이다.
concurrently는 리액트 서버와 express 서버를 동시 실행해주는 역할을 하는데 이는 잠시 후에 concurrently의 사용을 직접 보면서 이해하면 편하다.
package.json에 server 커맨드를 추가해준다

{
  "name": "reactexpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server" : "nodemon server.js"
  },
  "author": "",
  "license": "ISC"
}

커맨드 추가 후 package.json
그 후 작업폴더 안에 server.js라는 파일을 만들어서 다음과 같이 작성하여 express의 기본적인 서버 세팅을 한다.

const express = require('express');
const app = express();
const PORT = 5000;
 
app.get('/data',(req,res)=>{
    const data = {
        lastname : "dl",
        firstname : "wlrma"
    };
    res.json(data);
})
 
app.listen(PORT,()=>{
    console.log(`server running on PORT ${PORT}`);
})

터미널에서 server 커맨드를 실행후 http://localhost:5000/data에 접속하면 json 형식으로 데이터가 전달 되는 것을 볼 수 있다.
이렇게 우리는 간단하게 백 엔드에서 데이터를 보내는 역할을 한 것이다.
이제 백엔드에서 들어온 데이터인 dlwlrma을 프론트 단인 리액트에서 받아서 출력해보자.
리액트를 실행할 터미널을 하나 더 열자. vscode 에디터는 익스텐션으로 터미널을 지원하기 때문에 터미널 추가가 편하다. vscode 사용시 ctrl + ` 키로 터미널을 열수 있고 열린 터미널 우측 상단 + 표시를 누르면 또다른 bash쉘을 열수 있다.

$create-react-app front

또 다른 쉘에서 위와 같은 명령어를 실행해 front라는 이름으로 기본적인 리액트 어플리케이션을 생성한다. 여기서 create-react-app을 찾을 수 없다는 에러가 뜰 수 있는데, 그 경우 creact-react-app 라이브러리를

$npx create-react-app front

이렇게 실행하면 된다. 설치하는데 시간이 조금 걸릴 것이다.
이제 front 폴더 안의 package.json에 proxy를 추가해준다.

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy":"http://localhost:5000"
}

백 엔드 서버가 5000번 포트에서 작동 중이므로 5000으로 적어준다. 이는 이후 리액트에서 백 엔드 데이터를 fetch해 올때 유용하다.
이제 리액트 서버도 실행해보자.
$cd front && $npm start
front 폴더에 있는 터미널에서 npm start로 리액트 서버를 열면 3000번 포트에서 리액트 서버가 실행된다.
이렇게하면 현재 5000번 포트에서 백 엔드, 3000번 포트에서 프론트 엔드가실행 되었다. 이제 5000번 포트의 백 엔드 데이터를 3000번 포트로 불러와보자.
작업을 하며 글을 적고 있었는데 리액트를 오랜만에 들어왔는데 조금 바뀌어있다. create-react-app 라이브러리 실행 안될 때 부터 불안했다. 알고는 있었지만 create-react-app으로 설정되는 기본 리액트 세팅이 함수형 프로그래밍으로 바뀌었다.(class 기반의 리액트을 사용하지 않나 보다.)따라서 아아아아주 간단한 React Hooks를 이용하여 작업을 진행할 것이다.
/front/src 폴더안에 App.js부터 수정하자

import React from 'react';
import Data from './Data';
 
function App() {
  return (
    <div>
      <Data />
    </div>
  );
}
 
export default App;

필요 없는 걸 전부 버린다. src 폴더 내 App.css,logo.svg도 삭제해도 좋다.
이제 src폴더 안에 Data.js라는 파일을 새로 만들어주고 다음과 같이 작성한다.

import React,{ useState } from 'react';
 
function Data() {
  const [data,setData] = useState({});
  fetch('/data')
  .then(res => res.json())
  .then(data => setData(data),()=>{
  console.log('data read : ' , data);
  })
 
  return (
    <div>
      {data.lastname} {data.firstname}
    </div>
  );
}
 
export default Data;

Hooks의 함수형 프로그래밍을 이용하니 class 기반으로 작성할 때 보다 훨씬 코드가 짧아졌다. state를 this.setState({data}) 이런식으로 갈때 보다 훨씬 간편해졌다. 여기서 Hooks를 설명할 순 없으니
Hook의 개요 - React
Hook 가 React 버전 16.8에 새로 추가되었습니다. Hook를 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. useState 라는 새로운 함수는 우리가…
ko.reactjs.org
이제 localhost:3000에 보면 5000번에서 읽어온 데이터가 잘 출력되어 있을 것이다. 이제 concurrently를 이용하여 두 서버를 한 커맨드로 실행시켜보자.
백 엔드 서버의 package.json으로 이동하여 다음과 같이 concurrently를 추가한다.

{
  "name": "reactexpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "nodemon server.js",
    "front" : "cd front && npm start",
    "dev" : "concurrently \"npm run server\" \"npm run front\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^4.1.2",
    "express": "^4.17.1",
    "mysql": "^2.17.1",
    "nodemon": "^1.19.1"
  }
}

이제 두 터미널 보두 ctrl + c 로 서버를 닫고 ReactExpress 폴더에서

$npm run dev

명령어로 한번에 두 개의 서버를 실행할 수 있게 되었다.