express 프로젝트 만들기

expres-generator 설치

sudo npm i -g express-generator

express project 생성

–view 옵션은 pug를 통해 html코드를 대신 작성하겠다는 뜻입니다.

express express-study --view=pug

bin/www파일

var app = require('../app');
var debug = require('debug')('express-study:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

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

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

app을 사용해서 http.createServer를 통해 app을 실행시킵니다.

포트번호도 사용자가 정의한 포트가 없다면 3000번 포트로 서버를 실행시킨다고 적혀있습니다.

그렇다면 app이 어떻게 작성되어있는지 알아보겠습니다.

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

전체적으로보면 많은 모듈들을 사용하고 있으며 app.set()과 app.use()를 많이 사용하고 있는 것을 확인할 수 있습니다.

해당 함수들은 모두 미들웨어입니다. 미들웨어란 요청이들어오고 응답하기 전까지 중간에서 처리해주는 부분입니다. 데이터를 가공한다던지, 요청이 유효한 요청인지 판단을 할 수도 있습니다.

express에서는 get과post에 대한 처리도 app.get() , app.post()로 작성합니다. 이것 또한 GET메서드와 POST메서드에서만 동작하는 미들웨어라고 생각하시면 express가 미들웨어로 동작하는 것에 대한 이해가 더 잘 될 것입니다.

만약에 서버를 직접 만든다면 아래처럼 만들 수 있습니다. (express-generator로 만든 express에는 node-modules 가 없기 때문에 npm i를 통해 모듈을 설치해야합니다. )

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.send("hello express");
});
module.exports = app;

express모듈을 사용해서 app을 만들고 http서버에서 했던 것과 비슷하게 url 에 대해서 처리를 해주면 됩니다.

미들웨어 사용해보기

app.set() : 익스프레스 설정 또는 값 저장

app.use() : 미들웨어 장작

app.get() : GET메서드만 처리하는 미들웨어

app.post() : POST메서드만 처리하는 미들웨어

위와 같은 형태로 미들웨어를 사용할 수 있습니다. 그러면 직접 미들웨어를 만들어서 사용해보겠습니다.

const express = require("express");

const app = express();

//middleware
app.use((req, res) => {
  console.log("첫번째 미들웨어");
});

app.use((req, res) => {
  console.log("두번째 미들웨어");
});

app.get("/", (req, res) => {
  res.send("hello express");
});

app.post("/", (req, res) => {});
module.exports = app;

위 상태에서 서버를 실행시킬 경우 아래처럼 첫번째 미들웨어만 동작을합니다.

첫번째 미들웨어

미들웨어를 넘어가기 위해서는 세번째 인자로 들어오는 next를 실행해야합니다.

const express = require("express");

const app = express();

//middleware
app.use((req, res, next) => {
  console.log("첫번째 미들웨어");
  next();
});

app.use((req, res) => {
  console.log("두번째 미들웨어");
});

app.get("/", (req, res) => {
  res.send("hello express");
});

app.post("/", (req, res) => {});
module.exports = app;


첫번째 미들웨어
두번째 미들웨어

익스프레스 404 및 에러 처리

404 NOT FOUND

app.use((req, res) => {
  res.status(404).send("not found");
});

**에러처리 **

app.use((req, res, next) => {
  console.log("첫번째 미들웨어");
  try {
    throw new Error("에러 투척");
  } catch (err) {
    next(err);
  }
});

// 500 error 
app.use(function(err, req, res) {
  console.log(err);
  res.status(500).send("server error");
});

미들웨어 꿀팁

  • REST API에서는 res.json을 통해 데이터를 응답한다.
  • app.set()을 하면 app.get()을 통해 접근할 수 있다.
  • res.render()에 변수를 넣는 방법 말고도 res.locals에 변수를 넣어놓으면 다른 미들웨어에서도 사용가능하다.

익스프레스 서버를 만드는 흐름

  1. 미들웨어
  2. 라우트 마들웨어
  3. 404미들웨어
  4. 에러처리 미들웨어