express-generator 알아보기

express에서는 아주 감사하게도 빠르게 웹사이트를 만드는데 도움이 되는 틀을 만들어놨는데요. 바로 express-generator입니다.

 $ npm install -g express-generator
 $ express

   create : public\
   create : public\javascripts\
   create : public\images\
   create : public\stylesheets\
   create : public\stylesheets\style.css
   create : routes\
   create : routes\index.js
   create : routes\users.js
   create : views\
   create : views\error.jade
   create : views\index.jade
   create : views\layout.jade
   create : app.js
   create : package.json
   create : bin\
   create : bin\www

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=prac-3:* & npm start

이렇게 많은 데이터를 자동으로 생성을 해줍니다.

만약 이게 뜨지 않고 destination is not empty, continue? [y/N] 가 뜬다면  설치하려는 폴더에 이미 무언가가 있기 때문에 뜨는 오류이니 폴더 확인후 설치해도 무방하면 y를 설치를하면 안된다면 N을 입력하면 됩니다. y를 입력하면 위의 create하면서 설치하는 모습을 볼수 있습니다.

 

/bin/www.js 파일

포트번호 등과 같은 웹 서버를 구축하는데 필요한 설정 데이터가 정의 되어있는 파일로, .env 파일과 같이 설정값을 가지고 에러 처리, 기타 추가 설정을 해주는 파일입니다.

// /bin/www.js

var app = require('../app');
var debug = require('debug')('prac-3:server');
var http = require('http');

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

var server = http.createServer(app);

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

• app, debug, http 모듈을 가져오고
• port번호는 환경변수로 지정해놓은게 있다면 환경변수 포트를 없다면 3000번을 설정하겠다
• http의 createServer를 이용하여 인수로 app.js 모듈을 넣고 해당 서버로 지정을 한다.
• 서버는 3000포트에 연결하고 onError, onListening 함수를 실행한다.

app.js 파일

: 서버의 시작점으로 URI에 따라 라우팅을 해주는 파일이다.

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

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;

 

• http-errors, express, path, cookie-parser, morgan 모듈을 가져온다.(내장모듈,외장모듈)
• indexRouter와 userRouter 모듈을 가져온다(직접생성한모듈)
• express를 실행하는데 그걸 app 변수에 담는다.
• app에 views를  path는 폴더명/views에 있는 파일을 셋팅을 할것이다.
• 이때 view engine으로는 jade를 사용한다.
• app의 미들웨어로 logger, json, 인코더, 쿠키파서, 기본폴더, 각 라우터 연결을 해놓는다.
• 이 모듈이름을 app으로 내보낸다.

/public 폴더

images, javascripts, stylesheets 등과 같은 폴더들이 존재하는데요 이 폴더들은 정적 파일에 관련 된 데이터들을 담아 두는 폴더입니다.

정적 페이지 : 로고, 회사소개 등과 같은 누구나 동일한 화면을 구성하는 페이지
동적 페이지 : 마이페이지, 주문내역 등과 같은 사람마다 다른 데이터 값을 받아와 화면을 구성하는 페이지

/views 폴더

views 폴더는 화면을 구성하는 HTML 코드로 이루어져 있으며 views 폴더의 파일들을 이용하여 클라이언트에게 화면을 보내주는 파일을 말합니다.

/routes 폴더

라우팅 로직을 구현하는 모듈로 각 경로를 담당하는 모듈들이  들어있는 폴더이다. MVC 패턴에서 controller 역할이라 할 수 있습니다.

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;

• express 모듈을 가져온다.
• express의 router함수를 router에 담아준다.
• router가 '/' 경로 get메서드일때, 콜백함수를 실행시켜준다. 이때 콜백함수 인자로 req:요청, res:응답, next:넘기기를 받고 index.jade를 응답으로 넘겨주는데 이때 props로 title은 Express를 넘겨준다.
• 이 모듈의 이름은 router이다

---

왜 express-generator를 사용하나요?

express를 사용하여 DIY 처럼 내입맛대로 만들어도 되지만 여러사람과 일할때는 코드컨벤션을 짜듯이 express가 제공하는 틀에서 작업을하면 조금 더 빠르게 진행을 할수가 있습니다.