Node-Express + React 연결하기

서버란?

.com에 접속하면 그에 해당하는 html을 보여주는 장치일 뿐.

여기서 html은 React가 손쉽게 만들어준다. React는 그런걸 해주는 편한 장치.

구현

Node / Express

1. nodejs 설치
2. 작업 폴더 만들고 server.js 만들기
3. 서버 관련 코드 작성

// 기본적인 틀
const express = require('express');
const path = require('path');
const app = express();

app.listen(3000, function () {
  console.log('listening on 3000')
}); 

app.use(express.static(path.join(__dirname, 'react-map-app/build')));

app.get('/', function (요청, 응답) {
  응답.sendFile(path.join(__dirname, 'react-map-app/build/index.html'));
});

4. npm init -y
5. npm install express
6. 서버 시작을 위해
   npm i -D nodemon

React

1. npx create-react-app 프로젝트명
2. react 코드 작성
3. npm run build
   • 이 작업은 여태적은 react 코드를 서버가 받을 수 있는 html를 생성해주는 작업을 수행한다.
     여기서 생성된 html 파일이 spa(single page application)이 된다.