[Express]초기설정

Express 초기설정

이 게시글은 백엔드 개발에 앞서 npm 및 미들웨어 초기설정에 관해 다룬다

1. npm 설정

• 처음 프로젝트 폴더를 생성한 후에는 아무것도 생성되어 있지 않은 상태인데 pacakage.json 을 생성하기 위해 npm init 명령어를 사용한다

• 위와 같이 입력을 마치면 아래와 같이 package.json 파일이 생성된 것을 확인할 수 있다

2. 기본 Express 미들웨어

• npm i express 를 통해 express를 받아 사용할 수 있도록 한다
• npm i -D nodemon 을 통해 nodemon을 받아 사용할 수 있도록 한다
  • nodemon은 서버 코드 변경시마다 서버를 재시작 해야하는 번거로움을 해결해준다
  • -D 옵션을 통해 개발용으로 사용한다
  • pacakage.json의 scripts에 "start": "nodemon app" 를 추가하여 npm start 명령어로 app.js파일을 실행시킬 수 있도록 한다

const express = require('express');
const path = require('path');

const app = express();

app.set('port', process.env.PORT || 3000);

app.use((req, res, next)=>{
    console.log('모든 요청에서 실행됩니다~');
    next();
});

app.get('/', (req, res, next)=>{
    console.log('GET / 요청시에 실행됩니다~');
    next();
}, (req, res)=>{
    throw new Error('에러 발생');
});

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

app.use((err, req, res, next)=>{
    console.error(err);
    res.status(500).send(err.message);
});

app.listen(app.get('port'), (req, res)=>{
    console.log(app.get('port'), '번 포트에서 대기중~');
});

• process.env의 PORT 혹은 3000번을 app.set('port')로 설정하여 app.get('port')로 가져다 쓸 수 있도록 한다
• app.use()에 아무런 경로를 설정하지 않는다면 모든 요청에 대하여 해당 미들웨어를 실행한다
  • app.use() 이후에 다른 미들웨어를 실행하고 싶다면 next()를 반드시 적어줘야 한다
• app.get('/') 설정에 따라 ‘/’로 요청이 올시에 첫번째 미들웨어 처리후 두번째 미들웨어에서 에러를 발생시킨다
• app.get('/page')설정에서 res.sendFile을 통해 존재하는 html페이지를 열어줄 수 있다
  • 위의 예시는 index.html 페이지를 연결해주는 설정이다
• app.use()에서 미들웨어에 err, req, res, next 4가지의 인자를 모두 넣어주면 에러처리 미들웨어로 사용가능하다
  • 위의 app.get('/')에서 던진 에러를 여기서 처리한다

3. 주요 Express 미들웨어

• npm i morgan express-session cookie-parser dotenv를 통해 morgan, express-session, cookie-parser, dotenv를 사용할 수 있도록 다운받는다

1. dotenv

const dotenv = require('dotenv');
dotenv.config();

• .env 명의 파일을 만들어 key-value의 형태로 적어놓으면 process.env로 가져다 쓸 수 있도록 한다
  • 예를 들어, .env에 COOKIE_SECRET=cookiesecret과 같이 적어놓으면 process.env.COOKIE_SECRET으로 가져다 쓸 수 있다
• 보안이 중요한 내용들을 .env에 적어놓고 이 파일만 관리하면 되기 때문에 편리하다

2. morgan

const morgan = require('morgan');
app.use(morgan('dev'));

• morgan은 HTTP 메서드, 요청경로, HTTP 상태 등 더 다양한 정보들을 제공해준다
• morgan의 인수로 dev뿐만 아니라 배포환경에서 combined를 사용할 수 있다

3. static

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

• express의 static 미들웨어는 정적인 파일들을 제공하는 라우터 역할을 한다
• 이를 사용하면, 실제 파일경로가 드러나지 않아 보안상으로 안전하다
  • 위와 같이 코드 작성시 ‘/style/test.html’으로 접근시에 ‘/public/style/test.html’에 존재하는 파일을 열어준다

4. body parser

app.use(express.json());
app.use(express.urlencoded({extended: false}));

• json 및 form을 통해 전달받은 데이터를 req.body객체로 넘겨주는 역할을 한다
• express.json()을 통해 json파일들을 파싱해주고, express.urlencoded()를 통해 form데이터를 파싱해준다
  • express.urlencoded()의 extended옵션이 true일 경우 qs모듈을 이용하여 쿼리스트링을 해석하고, false일 경우 node의 querystring모듈을 이용한다

5. cookie parser

const cookieParser = require('cookie-parser');
app.use(cookieParser(process.env.COOKIE_SECRET));

• 요청에 들어있는 쿠키를 해석하 req.cookies객체로 만든다
  • 예를 들어, name=lim의 형태로 요청에 쿠키가 들어있다면 req.cookies에는 {name: 'lim'}의 형태로 존재한다
• cookieParser의 인수로는 비밀키를 받는데, 여기서는 .env파일에 들어있는 COOKIE_SECRET로 사용하낟

6. express-session

const session = require('express-session');
app.use(session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
        httpOnly: true, // javascript에서 접근못하게 막음
        secure: false,  // https 적용시킬때 true로 변경
    }
}));

• 로그인 등의 세션을 관리하거나 사용자정보를 임시저장할 필요가 있을때 세션을 사용한다
• 세션은 req.session객체 내부에 존재한다
• resave옵션은 요청에서 세션에 수정사항이 없더라도 세션을 다시 저장할지의 여부를 정하고, saveUninitialized옵션은 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지의 여부를 정한다
• express-session은 세션관리 시에 클라이언트에 쿠키를 보내는데, 이때 안전하게 쿠키를 전송하기 위해 secret을 사용한다
  • 이 값은 5번의 cookieParser이용 시의 인자값과 동일하게 하는 것이 좋다
• cookie옵션은 세션쿠키에 대한 설정으로 httpOnly는 클라이언트가 쿠키를 확인할 수 있도록의 여부를 설정하고, secure은 https에서의 사용가능 여부를 정해주는 역할을 한다