[Web] 8편 - (1) React, Node.JS 연동해서 사용해보기

Svelte는 멘토님의 일침과 함께 고이 던져두고, 원래 공부하던 리액트로 돌아왔다.

NodeJS는 설치되어 있다는 가정하에 시작한다.

이번엔 카카오API로 로그인을 만들어보고, 다음편엔 sms나 email을 push하는 기능을 만들어볼거다.

개인 프로젝트명을 요약하면 '리액트와 노드JS를 사용해서, sms, email, kakao 메시지를 push하는 기능을 만들껀데, 인증은 카카오 로그인 API로' 정도가 될것 같다.

 

---

Setting

 

1. 프로젝트 폴더(빈 폴더)에서 npm init을 해주고, client, server 폴더를 만들어준다.

npm init
mkdir client
mkdir server

 

2. client 폴더로 들어가서 npx CRA . 을 해준다.

cd client
npx create-react-app .

-> client 폴더에서 npm start를 했을 때 아래와 같이 나오면 여기까진 정상이다.

4. index.js에 필요없는 것들은 날려준다. app.js도 아래와 같이 날려준다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

// app.js
import './App.css';

function App() {
  return (
    <div className="App">
      Hello
    </div>
  );
}

export default App;

5. 이젠 server 폴더로 와서 npm init을 해주고, 필요한것들을 설치해준다.

npm init
npm install express --save
npm install body-parser --save

6. server.js를 다음과 같이 작성해준다.

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

app.get('/', (req,res)=>{
    res.send("Hello BE")
})

const PORT = 3001
app.listen(PORT, ()=> {
    const url = `http://localhost:${PORT}/`;
    console.log(`Listening on ${url}`);
})

-> node server로 실행했을 때 localhost:3001 에서 아래와 같이 나오면 된다.

7. package.json에 아래와 같이 start와 devStart를 추가해준다.

"scripts": {
    "start": "node server.js",
    "devStart":"nodemon server.js"
}

 

8. 다시 client 폴더로 와서 package.json에 프록시를 명세해준다.

"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",

---

Front-End 개발

9. src 폴더 및에 components와 pages 폴더를 만들어준다.

10. App.js를 다음과 같이 고친다.

import { BrowserRouter,Route, Routes } from 'react-router-dom';
import MainPage from './pages/MainPage';

function App() {
  return (
    <div className='App'>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<MainPage />} />
        </Routes>
      </BrowserRouter>
    </div>
    
  );
}

export default App;

 

11. pages 안에 MainPage.js를 만들고, 아래와 같이 적어준다.

// /pages/MainPage.js

import React from 'react';

function MainPage(props){
    return(<div>MainPage 입니다.</div>)
}

export default MainPage;

-> npm start로 잘 돌아가는지 확인

 

---

동시에 실행하기 위해 아래 패키지를 설치한다.

npm i -D concurrently

이후 제일 바깥에 있는 package.json에서 아래와 같이 명시해준다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "cd server && npm start",
    "client": "cd client && npm start",
    "start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
  },

 

서버에서 배포할 때 pm2를 쓴다면 pm2에서 npm start를 사용해서 아래와 같이

pm2 start npm --name "프로젝트명" -- start

동시에 백그라운드에서 무중단배포를 할 수 있다.