1. MERN기반 커뮤니티 - Express 설치와 사용방법(+nodemon)

Express 설치

https://expressjs.com/ko/

Express - Node.js 웹 애플리케이션 프레임워크

1. 빈 폴더에 npm init으로 pagkage.json파일 설치

 -y를 붙여 추가적인 설정없이 바로 설치가능

$ npm init -y

2.Express 설치

$ npm install express --save

설치완료

3.  Express예제를 보면서 서버환경 구축

https://expressjs.com/ko/starter/hello-world.html

Express "Hello World" 예제

4.index.js파일 생성후 아래 코드 복사하기

const express = require('express') //express를 불러옴
const app = express() //app에 express객체할당
const port = 3000

app.get('/', (req, res) => { //url요청이왔을 때 응답하는 함수
  res.send('Hello World!')
})

app.listen(port, () => { //app.listen을 통해 서버를 실행시킬 수 있음
  console.log(`Example app listening on port ${port}`)
})

5. 서버 실행을 위한pagkage.json에서 script에 명령어 추가

6. npm start로 서버실행

 

기존에 만든 클라이언트 파일(리액트 어플리케이션과 같은)을 서버에서 띄워주기

1. res.sendFile을 통해 클라이언트의 HTML파일 띄우기

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname,'../client/build/index.html'));
})

 -> 이 때 클라이언트파일을 build를 해야함 (압축) : webpack개념

  ->정적으로 만들어주는 것임 ->만약 클라이언트의 코드가 변경되면 계속 build로 업데이트 해줘야함

  ->__dirname : 현재 디렉터리 경로를 자동으로 띄워줌

 

2. 현재 디렉터리 경로와  클라이언트의 상대경로를 합쳐주기위한 path 라이브러리 설치 

 ->위 path.join을 사용하기 위해 설치하고 가져와 줘야함

npm install path --save

const path = require('path');

 

이때 서버를 실행해도 클라이언트파일이 실행이 되지않는다

이유는 Express어플리케이션에게 static으로 사용할 폴더를 알려주지 않았기 때문이다.

app.use를 통해서 Express에게 static으로 사용할 폴더를 알려주면된다.

app.use(express.static(path.join(__dirname,'../client/build')));

 

 

Nodemon

서버 코드를 변경하고 적용할 때 서버를 껏다 키는 것이 번거로울 때 사용한다.

npm install nodemon --save

서버 코드를 변경하고 저장하면 자동으로 껏다가 켜주는 라이브러리다.

 

pakage.json파일에서 nodemon으로 실행한다는 것을 알려주면 빠르게 사용가능하다.