Express 연동

Express는 Node.js의 핵심 모듈인 http와 connect 컴포넌트를 기반으로 하는 웹 프레임워크로, 개발을 빠르고 손쉽게 할 수 있도록 도와주는 역할을 한다. 이는 미들웨어 구조 때문에 가능한 것.

미들웨어 함수는 요청 오브젝트(req)와 응답 오브젝트(res), 그리고 애플리케이션 요청-응답 사이클 도중 그다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수이다. 간단하게 말하면 미들웨어란 클라이언트에게 요청이 오고, 그 요청을 보내기 위해 응답하려는 중간(미들)에 목적에 맞게 처리를 하는, 거쳐가는 함수들이라고 볼 수 있겠다.

---

1. Express 환경설정

• Node.js 설치

https://nodejs.org/ko/

Node.js

 

• 폴더 생성

$ mkdir react-express

 

• Express 설치

$ cd react-express // react-express 폴더로 이동

$ npm init -y // package.json 생성 -y 옵션은 대화모드 건너뛰기

$ npm install express // express 설치

 

• Nodemon 설치

$ npm install nodemon

 

• package.json

---

2. Express 동작 확인

• server.js 생성 (server/server.js)

 

• server.js 작성

// server/server.js

const express = require('express');
const app = express();
const PORT = 5000; //포트 번호 5000으로 설정

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

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

 

 

• 실행

$ cd server // server 폴더로 이동

$ nodemon server.js // server.js nodemon으로 실행

 

• 결과

- 터미널

 

- 브라우저를 열어 http://localhost:5000/에 접속

---

3. React 환경설정

• React 생성 (server 폴더를 만든 위치로 이동 후 생성)

$ npx create-react-app client

 

• react-router-dom, axios 설치

$ cd client // client 폴더로 이동

$ npm install react-router-dom axios // react-router-dom, axios 설치

 

• 프록시 설정

// client/package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000/", // 추가
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  ...
}

---

4. Router 설정

• index.js 수정

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

• Home.jsx 생성

// src/components/Home.jsx

const Home = () => {
    return (
        <h1>This is Home</h1>
    )
}

export default Home;

 

• Router.jsx 생성

// src/env/Router.jsx

import { Route, Routes } from "react-router-dom";

import Home from '../components/Home';

const Router = () => {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
        </Routes>
    )
}

export default Router;

 

• App.js 수정

// App.js

import './App.css';
import Router from "./env/Router";

function App() {
  return (
    <Router />
  );
}

export default App;

 

• 실행

$ npm run build // 나중에 Express와 연동하기 위해 build를 해야한다.

 

• 결과

---

5. React, Express 연동

• server.js 수정

// server/server.js

const express = require('express');
const app = express();
const path = require('path');
const PORT = 5000;

app.use(express.json());
var cors = require('cors');
app.use(cors());

app.get('/user', function (req, res) {
    res.json({ 
        name: "song",
        gender: "male"
    });
});

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

 

• User.jsx 생성

// client/src/components/User.jsx

import {useEffect} from 'react';
import axios from 'axios';

const User = () => {
    useEffect(() => {
        axios.get('http://localhost:5000/user').then(res => {
            console.log(res);
        });
    }, []);
    
    return (
        <h1>This is User</h1>
    )
}

export default User;

 

• Router.jsx 수정

// src/env/Router.jsx

import { Route, Routes } from "react-router-dom";

import Home from '../components/Home';
import User from '../components/User';

const Router = () => {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/user" element={<User />} />
        </Routes>
    )
}

export default Router;

 

• 실행

$ nodemon server.js // server 폴더로 이동 후 실행

$ npm start // client 폴더로 이동 후 실행

// 둘 다 실행하고 있어야 함

 

• 결과