[express] express-generator 폴더 구조 및 파일 역할

다음은 express-generator 모듈을 통해 생성한 어플리케이션의 기본 폴더 구조이다.

생성 폴더로는 bin / node_modules / public / routes / views 가 있고, 파일은 app.js / package-lock.json / package.json 이 있다.

 

• bin 폴더
  • 프로그램의 실행과 관련된 파일을 모아두는 폴더
  • www 파일은 서버를 실행하는 역할을 한다.
• public 폴더
  • JS, CSS, img 파일과 같은 클라이언트에게 제공하는 정적 파일을 모아두는 폴더
  • app.use(express.static(...))로 루트(/)에 마운트되어 http://localhost:3000/stylesheets/style.css 같은 경로로 접근 가능

 

• routes 폴더
  • URL별 처리 로직(라우터)을 모아둔 곳. express.router()를 사용한다.

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;

<index.js>

- /로 들어오는 GET 요청을 받아 views/index.jade를 렌더링한다.

var express = require('express');

var router = express.Router();

/* GET users listing. */

router.get('/', function(req, res, next) {

  res.send('respond with a resource');

});

module.exports = router;

<users.js>

- /로 들어오는 GET 요청을 받을 경우 'respond with a resource'라는 메세지를 뿌려준다.

- 이 모듈의 반환 객체는 'router'이어야 한다.

- app.js에서 미들웨어로 등록할 수 있다.

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

 

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

 

• views 폴더
  
  • 템플릿 엔진(pug/jade, ejs 등) 파일이 위치한다. 
  • 템플릿을 통해 HTML을 동적으로 생성한다.(서버 사이드 렌더링 : 서버에서 화면 그려줌)

extends layout

block content

  h1= title

  p Welcome to #{title}

<index.jade>

• app.js 파일
  • app.js는 프로젝트의 중심이 되는 파일로서 express 환경설정, 미들웨어 등록 등 서버운영에 필요한 코드를 작성한다.
  • 실제로 서버를 켜는 코드는 'bin/www'에 있고, app.js는 순수한 express 앱 구성(미들웨어, 라우터)만 담당
  • 구성 : 모듈 선언부 / 서버 설정 / 미들웨어(+라우터) 등록부

1) 모듈/라우터 선언부

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

• 미들웨어를 등록하기 위해 모듈 및 라우터를 선언한다.

 

2) 서버 설정

var app = express();

// view engine setup

app.set('views', path.join(__dirname, 'views'));      // 템플릿 위치

app.set('view engine', 'pug');                                // view engine

• app.set(key, value) : Express 어플리케이션에 전역 설정값을 저장하는 메소드
• app.set('views', path.join(__dirname, 'views'));
  • Express는 템플릿 엔진을 쓸 때 res.render('파일명')으로 템플릿 파일을 찾는다.
  • 이때 "템플릿 파일들이 어디 있는지"를 알아야 하는데, 그 경로를 'views' 설정값으로 저장해둔다.
  • __dirname : 현재 실행 중인 app.js 파일이 있는 디렉토리 경로를 의미
  • path.join(__dirname, 'views') : 현재 디렉토리/views

          ➡️ "내 템플릿 파일들은 프로젝트폴더/views 안에 있어!" 라고 Express에 알려주는 코드

 

res.render('index', { title: 'Express' }); ➡️ 라우터에서 이렇게 쓰면 Express는 자동으로 views/index.pug (또는 index.jade) 파일을 찾아서 title 변수를 넣어 HTML로 만들어 준다.

• app.set('view engine', 'pug');
  • 어떤 템플릿 엔진을 사용할지 Express에 알려줌. 즉, .pug를 템플릿으로 해석하겠다.

 

3) 미들웨어 등록

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

});

 

개발에 필요한 기본적인 미들웨어들은 express-generator가 자동으로 등록을 해준다.

추가적으로 미들웨어가 필요하다면 이곳에서 작성을 할 수 있다.

 

• package.json
  • 의존(dependencies), 실행 스크립트(scripts), 메타정보가 담겨 있다.
  • 기본 scripts에는 보통 "start": "node ./bin/www"가 있음. 개발 중엔 nodemon을 설치해 "dev": "nodemon ./bin/www"로 쓰기도 함.

---

개인 프로젝트를 진행할 때 서버를 express로 구현해보고 싶어서 공부하고 있다. 큰 프로젝트를 할 때를 대비해 express-generator로 생성되는 폴더 구조를 뜯어보면 좀 더 express에 대해 잘 알 수 있을 거라 판단했다. 템플릿 엔진을 이용해 화면을 서버 사이드 렌더링으로 구현할 수 있는 점이 인상적이었다. 그러면 express로만 사이트를 구현할 수 있는 것인지가 궁금했다. 작고 단순한 화면이면 express와 템플릿 엔진만으로도 구현 가능할 것 같다는 생각을 했다.