Express.js란?
Express.js는 Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크다. 그러한 컴포넌트를 미들웨어(middleware)라고 하며, 설정보다는 관례(convention over configuration)와 같은 프레임워크의 철학을 지탱하는 주춧돌에 해당한다. 즉, 개발자들은 특정 프로젝트에 필요한 라이브러리를 어떤 것이든 자유롭게 선택할 수 있으며, 이는 개발자들에게 유연함과 수준 높은 맞춤식 구성을 보장한다.
Node.js의 핵심 모듈만 이용해서 중요 앱을 작성한다면 다음과 같은 비슷한 작업을 위해 동일한 코드를 지속적으로 작성함으로써 바퀴를 재발명할 가능성이 높다.
- HTTP 요청 본문 파싱
- 쿠키 파싱
- 세션 관리
- URL 경로와 HTTP 요청 메서드를 기반으로 한 복잡한 if 조건을 통해 라우팅을 구성
- 데이터 타입을 토대로 한 적절한 응답 헤더 결정
Express.js는 이러한 문제를 비롯해 다른 여러 문제를 해결함과 동시에 웹 앱에 MVC 형태의 구조를 제공한다. 이 같은 앱은 백엔드만 갖춘 REST API에서부터 온갖 기능을 제공하는 고도로 확장 가능한 풀스택(jade-browser와 Socket.IO를 포함하는) 실시간 웹 앱에 이르기까지 다양하다.
Express.js의 작동 방식
보통 Express.js에는 메인 파일이라고 하는 진입점이 있다. 메인 파일에서는 다음과 같은 단계를 밟는다.
- 컨트롤러, 유틸리티, 도우미, 모델과 같은 자체적인 모듈을 비롯한 서드파티 의존 모듈을 인클루드한다.
- 템플릿 엔진과 해당 템플릿 엔진의 파일 확장자와 같은 Express.js 앱 설정을 구성한다.
- 오류 핸들러, 정적 파일 폴더, 쿠키 및 기타 파서와 같은 미들웨어를 정의한다.
- 라우팅을 정의한다.
- MongoDB, Redis 또는 MySQL과 같은 데이터베이스에 연결한다.
- 앱을 구동한다.
Express.js 앱이 실행되면 Express.js가 요청을 대기한다. 앱으로 들어오는 각 요청은 정의된 미들웨어와 라우팅에 따라 맨 위에서 시작해 맨 아래까지 처리된다. 이러한 측면은 실행 흐름을 제어하는 데 중요하다.
- 쿠키 정보를 파싱하고, 파싱이 완료되면 다음 단계로 이동한다.
- URL로부터 매개변수를 파싱하고, 파싱이 완료되면 다음 단계로 이동한다.
- 사용자가 인증되면(쿠키/세션) 매개변수의 값을 토대로 데이터베이스에서 정보를 가져와 일치하는 것이 있으면 다음 단계로 이동한다.
- 데이터를 표시하고 응답을 마친다.
Express generator를 통해 프로젝트를 생성하면 public, routes, views 디렉토리가 생성되고, 서버의 메인 스크립트 파일인 app.js가 생성된다.
routes 디렉토리에는 index.js와 users.js 파일이 default로 생성되고, Http 통신을 하기 위한 기본적인 로직이 설계되어 있다.
views 디렉토리에는 error.ejs, indes.ejs 파일이 default로 생성된다.
모듈(미들웨어) 로드
var [var_name] = require('[module_name 또는 url]');
모듈(미들웨어) 사용
app.use([var_name]);
Welcome to Express 예제
app.js
var createError = require('http-errors'); // 에러 처리 모듈 로드
var express = require('express'); // express 모듈 로드
var path = require('path'); // path 모듈 로드
var cookieParser = require('cookie-parser'); // 쿠키 파서 모듈 로드
var logger = require('morgan'); // 로그 관련 모듈 로드
var indexRouter = require('./routes/index'); // /index 라우터 생성
var usersRouter = require('./routes/users'); // /users 라우터 생성
var app = express(); // express 앱 생성
// view engine setup
app.set('views', path.join(__dirname, 'views')); // view engine 정의
app.set('view engine', 'ejs'); // view engine을 ejs로 설정
app.use(logger('dev')); // 'dev'수준으로 로그 설정
app.use(express.json()); // express.json 모듈 사용
app.use(express.urlencoded({
extended: false
})); // express.urlencoded 모듈 사용
app.use(cookieParser()); // cookie
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter); // index.js로 라우팅 설정
app.use('/users', usersRouter); // users.js로 라우팅 설정
// catch 404 and forward to error handler
app.use(function (req, res, next) { // 404 에러 처리
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;
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) { // RequestMapping
res.render('index', {
title: 'Express'
});
});
module.exports = router;
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
npm start 후 http://localhost:3000(http://127.0.0.1:3000) 접속
