[데브코스] Express Generator 구조와 핵심 파일 뜯어보기(www, app.js)

어제에 이어서 오늘은 map에 object를 넣는 방법을 배우고, map을 활용하여 유튜버 정보 조회 코드를 작성해보았다. - 어제랑 많이 겹치는 내용들이어서 정리는 생략.

 

대신 오늘 새롭게 배운 Express의 기본 구조, 그리고 express-generator를 통해 Express 프로젝트의 틀을 자동으로 생성하는 방법을 정리해보았다. 여태까진 강사님 코드를 따라 API를 만들기만 하다 보니 일단 콘솔만 찍히면 오오오오 했는데, 오늘은 그 구조를 직접 들여다보면서 Express를 더 깊게 이해할 수 있었다.

---

🍳Express는 프레임워크

사실 Node.js로 웹 서버를 만들 땐 http 모듈만으로도 가능하다. 하지만 API가 많아지고 요청이 다양해질수록 코드가 복잡해지고 관리하기가 어려워진다. 이를 해결해 주는 것이 바로 Express이다.

 

공식 문서에서는 Express를 이렇게 소개 하고 있다.

Fast, Unopinionated, minimalist web framework for Node.js

 

즉, 간단하고 빠르며, 유연하게 구성 가능한 웹 프레임워크라는 것이다.

 

https://expressjs.com/ko/

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

---

🪄Express Generator

Express 애플리케이션의 기본 틀을 자동으로 생성해주는 도구

개발자가 매번 app.js를 만들고, routes폴더를 만들고, listen() 설정을 하고...이런 반복 작업을 하지 않도록 미리 생성된 템플릿으로 프로젝트를 생성하는 도구이다.

 

설치

$ npm install express-generator -g

사용

express

명령어를 입력하면, 폴더가 자동으로 세팅이 된다.

 

Generator 없이 직접 만들면?

express-generator 없이 만들려면 다음과 같은 절차가 필요하다:

1. npm init, npm install express
2. app.js 직접 작성
3. router, views, public 직접 구성
4. 포트 설정, listen 코드 작성

지금까지는 이렇게 실습을 진행해왔다.하지만 단순 실습이라면 괜찮지만, 협업을 하거나 실제 프로젝트를 한다면 구조화가 필수이므로 generator 사용이 훨씬 효율적이다.

---

🗂️폴더구조

일단, 생성된 프로젝트 폴더 구조를 보면 다음과 같다.

myapp/
├── app.js
├── bin/
│   └── www
├── public/
│   ├── images/
│   ├── javascripts/
│   └── stylesheets/
├── routes/
│   ├── index.js
│   └── users.js
├── views/
│   ├── error.jade
│   └── index.jade
├── package.json

 

bin > www

서버 실행 파일

var app = require('../app');
var debug = require('debug')('expressgenerator:server');
var http = require('http');

• ../app에서 설정한 Express 앱 객체를 가져온다.
• debug: 디버깅용 로그를 출력한다.
• http: 실제 서버를 띄우기 위한 로그

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

• 환경변수 PORT가 있으면 사용하고, 없으면 기본값 3000을 사용한다.
• Express 앱에 이 포트 정보를 등록한다.

var server = http.createServer(app);

• app 객체를 인자로 넘겨 HTTP 서버를 생성한다.

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

• 서버 리스닝 및 이벤트 바인딩을 위한 코드이다.
• .listen()으로 실제 서버를 구동하고, 에러와 리스닝 이벤트에 대한 콜백을 등록한다.

👉 www파일은 Express 앱을 감싼 HTTP 서버를 생성하고 실행하는 엔트리 포인트

 

app.js

Express 핵심 설정 파일

app.js에는 서버의 전반적인 설정과 미들웨어, 라우팅 처리가 들어간다.

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

• 오류 처리용 http-errors, express, path, 쿠키파서, 로그용 morgan 등 필수 모듈을 불러온다.

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

• /, /users 요청이 들어왔을 때 처리할 라우터 파일을 불러온다.

var app = express();

• 모든 설정의 기반이 되는 app 객체를 생성한다.

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

• 템플릿 파일은 view 폴더에 위치한다.
• 기본 뷰 엔진은 jade

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')));

• 미들웨어 설정

미들웨어	설명
logger('dev')	요청 로그 출력
express.json()	JSON 요청 바디 파싱
express.unlencoded()	폼 형식 데이터 파싱
cookieParser()	요청의 쿠키 파싱
express.static()	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');
});

• 예외처리. 위 라우터를 다 통과했는데 해당 경로가 없다? -> 404 에러를 출력한다.
• 발생한 에러를 뷰에 전달하고 렌더링한다.

module.exports = app;

• app 객체를 외부(www)에서 사용할 수 있게 내보낸다.

 

routes 폴더

라우터 파일 모음

//index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

• GET / 요청이 들어오면 views/index.jade를 렌더링한다.
• res.render()로 데이터를 템플릿에 넘겨주고 HTML을 생성한다.

 

views 폴더

템플릿 파일

• jade 템플릿 엔진을 기반으로 HTML을 동적으로 생성한다.
• res.render()와 연결되어 페이지를 만들어주는 역할을 한다.

index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}

• layout.jade를 상속하여 개별 페이지의 콘텐츠를 삽입한다.

 

layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

• 전체 HTML 레이아웃을 정의(머리글, 바디 등)

 

public 폴더

정적 파일 경로

public 폴더에 위치한 파일은 정적 파일로 직접 접근 가능하다. 이미지, JS, CSS 등의 파일을 넣어두고 클라이언트에서 사용한다.

 

express 실행 방법

지금까지 실습 파일은 상단 play 버튼을 누르면 문제없이 작동했다. 하지만 generator로 만든 프로젝트를 play 버튼으로 실행하면 Running->Done으로 바로 종료된다.

www 파일이 실행 엔트리이기 때문에, 터미널에서 명령어로 실행해주어야 한다.

npm start

---

확실히, generator을 쓰니 번거로운 것들이 확 줄어든 느낌이다. 원래도 할 게 없었는데 더 할게 없어진 느낌..