[굿썸] React + Express

 

이 문서는 Express(Node.js) 로 backend 를 개발하고, React 로 frontend를 개발하는 방법에 대한 설명을 보여줍니다. 

 

 

작업환경 1

• Windows 10 OS가 설치 되어있는 Laptop
• Node.js v20.17.0 LTE 설치  - https://nodejs.org/

Node.js — Run JavaScript Everywhere

• 'node -v' : v20.17.0
• 'npm -v' : 10.8.3
• 'first_app' 이라는 directory 생성후 , command line 에서 그곳으로 위치 이동
• Backend 준비 
  • 'first_app' 아래 'server' 라는 directory 생성후, 그곳으로 위치 이동 
  • 'npm init -y' 로 package.json을 생성
  • 'npm install express cors' 로 필요한 모듈 설치 
  • 'server/index.js' 파일을 아래와 같이 생성 

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

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

// CORS 설정
app.use(cors());

// JSON 파싱 미들웨어
app.use(express.json());

// 간단한 API 엔드포인트
app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from Express!' });
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

 

• Frontend 준비 
  • 'first_app' directory 로 이동 
  • 'npx create-react-app client' 명령으로 react 설치 
    
    • 만일 "npx create-react-app client" 실행중 "error ENOENT" 와 같은 error 발생시 아래와 같이 조치함 
    • 'npm install -g npm'  으로 npm version up
    • 'npm install -g create-react-app' 으로 create-react-app 설치 
    • 'npm cache clean --force' 으로 캐시를 삭제함
  • first_app/client/package.json 으로 이동하여 
    • "proxy": "http://localhost:5000"  를 추가함.  이렇게 하면 React 앱에서 /api/...로 요청을 보낼 때 자동으로 http://localhost:5000으로 프록시됨 

    • 

      
      
      
    • client/src/App.js를 수정하여 다음과 같이 만듬

import React, { useEffect, useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Express 서버에서 메시지 가져오기
    fetch('/api/hello')
      .then((response) => response.json())
      .then((data) => setMessage(data.message));
  }, []);

  return (
    <div>
      <h1>React + Express</h1>
      <p>{message}</p>
    </div>
  );
}

export default App;

 

 

• 실행
  • Express
    • at first_app, 'node server/index.js' -> server 실행 
    • at first_app/client, 'npm start' -> react 실행 

 

 

 

 

작업환경 2

• Ubuntu Desktop 22.4 (Clean PC 상태)

 

node.js 설치 

sudo apt update
sudo apt install nodejs npm

 

 

node 와 npm 버전 체크 

 

node -v
npm -v

 

설치를 했지만 버젼이 Windows 에 비해 상당히 낮다는 것을 알 수 있습니다. 

 

설치된 node 를 제거함

sudo apt remove nodejs

 

최신버전 설치 

//curl 설치 
sudo apt install curl

//최신 LTS가 아닌 가장 최신 릴리즈 버전을 설치하도록 PPA를 설정
curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -


//node js 재설치 
sudo apt install -y nodejs

 

 

하지만 설치 도중 error 발생함 

 

dpkg: error processing archive /var/cache/apt/archives/nodejs_22.9.0-1nodesource
1_amd64.deb (--unpack):
 trying to overwrite '/usr/include/node/common.gypi', which is also in package l
ibnode-dev 12.22.9~dfsg-1ubuntu3.6
dpkg-deb: error: paste subprocess was killed by signal (Broken pipe)
Errors were encountered while processing:
 /var/cache/apt/archives/nodejs_22.9.0-1nodesource1_amd64.deb
E: Sub-process /usr/bin/dpkg returned an error code (1)

 

 

이 오류는 libnode-dev 패키지의 파일이 현재 설치된 Node.js 버전과 충돌하는 경우에 발생하는 오류로,  /usr/include/node/common.gypi 파일에서 문제가 발생했을 가능성이 큼.

이를 해결하기 위해서는 충돌을 일으키는 패키지를 제거하거나 강제로 덮어쓰는 방법을 사용할 수 있어.

 

<충돌 패키지 제거 후 node.js 다시 설치>
우선 충돌하는 패키지 libnode-dev를 제거해봄. 이 패키지는 Node.js 개발 헤더 파일을 포함하는 패키지인데, Node.js 설치 과정에서 중복될 수 있음

 

sudo apt remove libnode-dev

 

sudo apt install -y nodejs

 

 

 

이제 Window 와 동일하게 최신 버젼이 설치되었습니다. 

 

나머지 과정은 위 Windows 작업환경의 경우와 동일하게 진행하면 됩니다.