#2 <node.js 초보자 시작하기 : express-generator (HBS)>

저번 포스팅에서 기본 골격과 generator의 차이를 알았다. 그러면 generator로 생성되는건 다 무얼까?

 

var express = require('express');
var app = express();

//사용할 모듈들. 밑에서 설명
var createError = require('http-errors');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

// 라우터 모듈 불러오기 
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

// html 뷰 엔진을 hbs로 쓰겠습니다
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// 개발환경에서 로그 보기 
app.use(logger('dev'));

// req.body를 사용할 수 있게한다. 즉 post방식으로 데이터 전송을 받은 것을 사용할 수 있게한다. 
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

// public 폴더를 기본 경로로 사용할 수 있게 한다. 
// public폴더에 img.jpg를 넣으면 localhost:3000/img.jpg로 그 파일을 직접 확인가능하다
app.use(express.static(path.join(__dirname, 'public')));

// 라우터 사용하기
app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
// 404에러는 이거 쓸게요
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');
});

app.listen(3000,(req, res)=>{
  console.log("3000 opened");
})

이번에도 같은 골격이지만 좀 더 '이거는 있어야지' 싶은것들이 많다. 저번 포스팅은 약간 머리하고 척추만 있는 정도? 

 

여기에 난 좀더 hbs의 장점을 살리고자 뷰엔진을 좀 건드렸다. 

 

// 이부분을...
// html 뷰 엔진을 hbs로 쓰겠습니다
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');




// 이렇게 바꿨다. 
const handlebars = require('express-handlebars')
app.engine('hbs', handlebars({
  defaultLayout: 'basic',
  extname: 'hbs',
  layoutsDir: __dirname + '/views/layouts/',
  partialsDir: __dirname + '/views/partials/',
}))
app.set('view engine', 'hbs');

 

그리고 views 안에 layouts, partials라는 폴더를 만드는데

layouts은 언제나 보여질 기본 html

partials는 header, footer 등 각 섹션 

을 넣어 관리를 편하게 하였다. 

 

예를 들어 

위의 basic.hbs는 간단히 골격만 만들고 들어올 자리만 마련한다. 그리고 footer를 작성하면 어느 구역이든 basic하고 footer는 항상 노출되므로 각 페이지에 따른 body만 작성해주면 된다. 

내 홈페이지는 이거 달랑한줄이다. 이게 {{body}} 에 들어가진다.

 

이제 이걸 어디다가 적용시키냐구? 이제 라우터를 사용할 차례이다.