코딩 개발/Javascript

Express 초기 환경세팅 가이드

호소세 2022. 11. 3. 21:41
728x90
반응형

express 설치

는 검색해보면 저보다 더 뛰어난 분들이 잘 작성 해주셨을 것이라 믿습니다.

 

설치 명령어 

$ npm install express

Express를 일시적으로만 사용하고 배포용 dependency list에 저장하고 싶지 않는다면 아래의 명령어를 입력합니다.

$ npm install express --no-save

dependencies가 아니라 로컬 개발환경에서 쓰고 싶은 패키지들을 관리하는 devDependencies에 해당 내용을 저장하고 싶다면 사용하셔야될 명령어는 아래와 같습니다.

$ npm install express --save-dev

2. nodemon

개념 정의

Node에서는 코드에서 수정이 일어났을 때, 코드의 수정 사항이 서버에 자동으로 반영되지 않습니다. 즉, 코드를 수정하고나면, 서버를 계속 다시 켜주어야 합니다. 이를 보완하기 위하여 우리는 nodemon 이라는 패키지를 이용할 수 있습니다.

-> 매번 귀찮게 서버를 켰다가 저장했다가 다시 키는 상황은 생기지 않을 것입니다.

 

설치 법에는 local/global 설치법이 따로 있습니다.

$ npm install nodemon # local dependency install

$ npm install -g nodemon # global install

우분투로 설치한다면 sudo를 사용해서 깔아야할 듯 합니다. root 계정으로 말이죠 (다시 말씀드리지만... 저보다 더 자세하고 전문가이신 분들의 글을 읽으시면 설치에 유용할 겁니다.)

 

또, 하나 추가해야할 부분이 있더라고요 ㅎㅎ

package.json 파일에 

"scripts": {
"start": "nodemon app",
"test": "echo \"Error: no test specified\" && exit 1"
},
 

script 부분에 저 start를 넣고 nodemon '파일명' 을 넣어야 실행이 되더라고요!

 

3. CORS 설정

현재의 웹 브라우저는 보안상의 이유로 서로 다른 출처의 http 통신을 막도록 기본적으로 세팅되어 있습니다. 동일한 출처의 주체끼리만 서로 통신할 수 있도록 하는 이 SOP(Same Origin Policy) 정책은 보안성 향상을 위한 기본이라 이해할 수 있습니다.

하지만 현실적으로 백엔드와 프론트 서버가 서로 다른 도메인에서 운용되는 현재의 3세대 웹 서비스 환경에서, 동일한 출처에서만 리소스를 주고 받을 수 없는 실정입니다. 따라서 이러한 SOP 정책을 올바르게 의도한 요청에 한해서 다소 완화시켜 서로간 통신을 가능케 해야 합니다.

이는 별도의 CORS 설정을 통해서 서로 다른 두개의 origin/domain 끼리의 데이터를 주고 받게 하기 위한 설정하여 이루어지며, 만일 해당 과정을 생략한다면 CORS 정책 위반을 이유로 웹 브라우저 차원에서 서버 통신을 막습니다.

 

Cors 설정을 위한 npm 설치 CLI 명령어는 아래와 같습니다. 터미널에서 입력하여 설치를 진행합니다.

$ npm install cors

모든 request에 대해 CORS 요청을 설정하는 법

const express = require('express')
const cors = require('cors')
const app = express()
 
app.use(cors())
 
app.get('/ping', function (req, res, next) {
  res.json({message: 'pong'})
})
 
app.listen(3000, function () {
  console.log('server listening on port 3000')
})

4. Dotenv 환경변수 관리

env 환경이 중요합니다. 이 환경에 대해 제대로 구축하지 않으면 db에 접속할 수 없게 됩니다.

설치는 

npm install dotenv 이 명령어를 이용해서 설치 하시면 됩니다.

.env.sample 파일에는 자신이 사용하는 환경에 대한 예시를 보여주면 됩니다.

 

5. Morgan

NodeJS 서버로 구성된 웹 환경에서는 기본적으로 제공되어지는 로깅(네트워크 통신기록) 기능이 없기에, 로그(log)를 관리하기 위해서 외부의 서드파티 모듈/라이브러리를 사용할 것을 권장합니다. 그 중 Morgan은 npm 에서 사용되는 로그 관리를 위한 여러 패키지 중 하나이며 많은 개발자들이 사용하고 있습니다.

Morgan을 사용하면 http(s) 통신시 프론트-백엔드간 소통시 필요로 하는 ‘기본 정보’들을 자동으로 포매팅하여 편리하게 주고 받을 수 있게 됩니다. 여기서 말하는 ‘기본 정보’란, http 통신시 request, response 형태로 주고 받는 status code, http version 등의 메타 정보들을 의미하며, node.js-express 선에서 제공하지 않는 이 기능을 외부의 패키지의 힘을 빌려 사용하게 된 것 입니다. 참고사항으로, Morgan을 사용할 때 내가 원하는 요소대로 내부 속성을 커스터마이징 하여 설정 할 수도 있습니다.

 

app.use(morgan)만 사용해도 되지만 app.use(morgan('포맷') 을 넣어서 사용해도 됩니다.

정의된 포맷들

다양한 정의된 포맷들이 제공됩니다.

combined

표준 Apache combined 로그 출력

:remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] ":referrer" ":user-agent"

common

표준 Apache common 로그 출력.

:remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length]

dev

개발용을 위해 response에 따라 색상이 입혀진 축약된 로그를 출력합니다. :status값이 빨간색이면 서버 에러코드, 노란색이면 클라이언트 에러 코드, 청록색은 리다이렉션 코드, 그외 코드는 컬러가 입없습니다.

:method :url :status :response-time ms - :res[content-length]

short

기본 설정보다 짧은 로그를 출력하고, 응답 시간을 포함합니다.

:remote-addr :remote-user :method :url HTTP/:http-version :status :res[content-length] - :response-time ms

tiny

최소화된 로그를 출력합니다.

:method :url :status :res[content-length] - :response-time ms

 

이러한 패키지 모듈로 초기환경을 세팅하였지만... 더 많은 패키지 모듈이 필요하거나 불필요한 모듈은 삭제하는 식으로 모듈관리를 해야한다고 합니다.

각자의 환경에 맞게 환경설정을 진행해보아요!

 

혹시 로그관리, 서드파티 모듈/라이브러리를 아시면... 댓글 좀 달아주세요.

morgan format 출처 : https://chan180.tistory.com/164

반응형