[MERN] React+Express

作成したフロントエンドhtmlをサーバに送信して実行する方法.
1. node.jsがインストールされていると仮定するとexpressをインストールできます.(npm i express)
新しい

12.1サーバフォルダを作成し、端末からサーバフォルダに移動し、npm init(npm初期化)後、npm i expressを使用してexpressをインストールします.

1.2 express.jsを検索し、hello worldをコピーする方法で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フロントで作成されたインデックス.htmlをサーバ側に直接送信すると、フロントエンドとサーバは接着されません.

93.2したがって作成されたhtml+jsファイルはindexにコンパイルされる.htmlと静的ファイルを作成する必要があります(構築されたindex.htmlは、すべての静的jsファイルがインポートされたファイルです).

3.3端末では、npm i run-script buildを使用してフロントエンドコンテンツが自動的に生成されます.

4.生成されたファイルをサーバに送信し、画面上にサスペンションする

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 폴더로 지정해주면 된다.