[MERN] React+Express

만들어 놓은 프론트 단의 html을 서버에 보내 실행시키는 방법.

1. node.js가 설치되어있다는 가정하에 express를 설치해준다. (npm i express)

• 1.1 server 폴더를 새로 만들고 터미널에서 server폴더로 이동해 npm init(npm 초기화) 후 npm i express를 이용해 express를 설치해준다.
• 1.2 express.js를 검색해 들어가서 hello world 띄우는 방법을 copy하여 index.js 파일을 만들고 붙혀넣기 해준다.

2. 서버단으로 Hello World 띄우기

const express = require('express') // express 불러오기
const app = express() // app이라는 새로운 express 생성
const port = 3000 // 연결할 port number

app.get('/', (req, res) => {
  res.send('Hello World!')
})
// get 함수는 첫번째 인자로 url을 가지고, 두번째 인자로는 req,res 즉 요청,응답을 가진다.
// /(root url)에 접속했을 때 res(응답)으로 send 함수를 이용해 'Hello World!'라는 텍스트를 보낸것.

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
// 모든 요청을 감지해야 그 요청에 응답이 가능하기 때문에 app(express)함수에 listen함수를 사용
// 첫번째 인자로 port를 가지고 두번째 인자로는 실행할 함수를 가진다.
// 5000번의 port number로 들어오는 모든 요청을 listen하며, 정상적으로 listen가능하다면 console에 Example app listening on port 5000 을 띄운다.

3. Build 파일 생성하기

• 3.1 프론트 단에서 만든 내용이 담긴 index.html을 그대로 서버단으로 보내면 프론트와 서버가 붙지 않음.
• 3.2 그래서 만든 html+js파일을 Build 시켜 Build된 index.html와 static 파일을 만들어야함 (Build된 index.html은 static된 js파일이 모두 import된 파일이다.)
• 3.3 터미널에서 npm i run-script bulid 를 이용하면 프론트단의 내용이 자동으로 Build 된다.

4. 서버로 Build 파일 보내서 화면에 띄우기

const path = require('path');
// 폴더나 파일을 서버단으로 보낼때는 현재경로+상대경로를 합쳐서 인자로 줘야하는데 path를 통해 쉽게 현재경로와 상대경로를 붙힐 수 있다.
// npm i path 후 path를 import

app.use(express.static(path.join(__dirname, "../client/build")));
// use함수를 통해 어떤 폴더를 static폴더로 사용할것인지 지정해줘야 한다.
// express.static을 통해 static폴더를 지정하고 함수 안의 내용에 path.join 함수를 통해 현재경로와 상대경로를 붙혀준다.
// 현재경로는 __dirname, 두번째 인자인 상대경로는 build 폴더로 지정해주면 된다.