[MDN/Express] 03.Express Tutorial: The Local Library website(2)

앞에서 동네 도서관 프로젝트를 위한 기본 코드 생성까지 살펴보았습니다.

https://learn-and-give.tistory.com/114#comment13660711

[MDN/Express] 02.Express Tutorial: The Local Library website(1)

프로젝트 생성 시 Generator를 사용하여 기본 코드를 생성했는데, 그 구조를 한번 살펴보겠습니다.

 

 package.json을 보면 script를 정의하는 부분이 있는데

  "scripts": {
    "start": "node ./bin/www"
  },

저 경로를 찾아가 보면 자동으로 생성 된 www.js라는 파일이 있습니다. 대충 코드를 보면 웹 서비스와 관련 된 코드 같고 뒤쪽에는 에러 처리 코드도 포함되어 있습니다. app.js를 읽어서 서버를 구동하는 코드인 것 같네요.

 

라우팅에 대한 내용은 route 폴더 안의 index.js에 정의되어 있고, 

view 템플릿은 views 폴더에 들어 있습니다. 확장자가 pug인 것 보이시죠??

 

Dependencies

 기본으로 설치 된 모듈들이 무엇인지 package.json에 기록 된 목록을 보고 한번 살펴 보겠습니다.

  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  },

cookie-parser는 cookie를 이용하여 데이터를 저장하고 읽을 때 쓰는 모듈이고,

debug는 node의 디버깅 툴이구요,

morgan은 HTTP 요청 로그를 남겨주는 "미들웨어"이고,

http-errors는 필요 할 때 HTTP 에러를 생성해 주는 모듈입니다.

 

"미들웨어"의 개념에 대해서는 따로 공부 해 두는 것이 좋은데, 서버들이 공통적으로 처리할 것들을 이미 여러 모듈로 만들어 두고 조합해서 쓸 수 있게 해주는 그런 기술 정도로 이해해 두도록 하겠습니다.

 

 

www file

 /bin/www 파일은 실제 application의 시작점이며, app.js를 가져오는 것으로 시작합니다. 실제 서버의 특성을 정의하는 것은 app.js 내부에 있습니다. express도 app.js의 앞쪽에서 가져오게 됩니다. app.js의 시작 부분 코드만 살짝 보면~ 이렇게 저렇게 여차 저차 한 후, 그렇게 설정 된 app을 export 해 줍니다. 즉, 이렇게 설정 된 app을 www에서 쓰는거죠.

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

...
...
module.exports = app;

 

 

세부 설정

app.js의 처음 코드는 그다지 길지 않고, 역할이 명확한 몇 개의 단락으로 구분 할 수 있으니 한번 살펴보는 것도 좋을 것 같습니다. 

...
...
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;

 

가장 먼저 view 설정을 하는데, view에 사용 될 파일들의 경로를 지정해주고, 엔진으로 pug를 설정해줬습니다.

이어서 여러가지 미들웨어 설정을 하고,

라우터 설정을 하고

에러 처리를 해 주는 코드로 구성되어 있습니다.

 

Routes

설정 된 라우터 파일 중 users.js를 한번 살펴보겠습니다. 

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;

이 라우터가 호출되려면 app.js에 설정 된 라우팅을 통해서 접근하게 되는데, app.js를 보면 아래와 같이 되어 있습니다.

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

즉, user.js의 '/' 라우트는 실제로 /users에 해당하는 것이죠.

http://localhost:3000/users/

 

Views (templates)

view 템플릿은 라우터와 함께 살펴봐야 합니다.  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;

res.render라는 부분이 View와 관련이 있습니다. 이것은 요청에 대한 결과를 rendering을 해서 보내주는 명령인데, 여기 들어가는 인자가 바로 pug 파일입니다. 첫번째 인자가 pug 파일이고, 그 뒤의 인자는 전달 될 변수이죠. 즉, 위의 코드는 index.pug라는 파일에 title을 Express를 넘겨서 랜더링 한 결과를 response로 보내주라는 뜻이죠.

 Express 대신 다른 글자를 넣어서 한번 테스트 해 보겠습니다.

 

 

제목을 바꾸고

var express = require('express');
var router = express.Router();

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

module.exports = router;

 

서버를 구동하겠습니다.

 

결과는 아래와 같이 수정 된 title이 반영 된 화면이 출력 됩니다.

 

겸사겸사 실제 pug 파일을 한번 살펴보면, 아래와 같이 h1과 p에서 title을 사용하고 있습니다.

extends layout

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

 

겸사겸사, 이 템플릿을 수정하고, "서버 재구동을 하지 않고" 반영이 되는지 확인 해 보겠습니다.

h2 테그에도 title 출력을 하도록 수정한 후

extends layout

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

서버 재구동을 하지 않고, 브라우져만 새로고침을 하니 아래와 같이 나옵니다.

 

도서관 만들기 기본 뼈대 만들기, 엄밀히 말하면 Express Generator 기본 템플릿 만들기를 하였습니다. 다음에는 DB(Mongoose)를 사용하는 방법을 살펴보겠습니다.

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose

Express Tutorial Part 3: Using a Database (with Mongoose) - Learn web development | MDN