[handlebars] configuration 에러

폴더 구조

├── app.js

└── views

　　　├── layout

　　　│　　　　├── inc

　　　│　　　　│　　├── header.hbs

　　　│　　　　│　　└── footet.hbs

　　　│　　　　└── layout.hbs

　　　└── partials

　　　　　　　└── list.hbs

 

layout.hbs

	{{> header }}
    {{> left }}
    {{{body}}}
    {{> footer }}

 

npmjs => express-handlebars에 나오는 readme에 나오는대로 추가했다.

handlebars 템플릿 사용을 위해 app.js configuration 을 추가했다.

var express = require('express');
var app = express();
var exphbs  = require('express-handlebars');

app.set('views', __dirname + '/views/partials');
var hbs = exphbs.create({
  extname: '.hbs',
  defaultLayout: 'layout',
  layoutsDir: __dirname + '/views/layouts',
  partialsDir: __dirname + '/views/layouts/inc'
});
app.engine('.hbs', hbs.engine);
app.set('view engine', '.hbs');

Line 1,2,3 필요한 패키지들을 불러온다.

Line 5 사용자 정의 위치 설정

　　　콘텐츠들이 들어가 있는 위치를 설정하고, 레이아웃에 관한 설절은 instance 만들 때 설정했다.

Line 6~10 ExpressHandlebars instance를 만든다.

- Line 7 extname 어떤 확장자명을 사용할지 설정하는 부분

　　　　app.engine()과 app.set()을 호출 할 때 등록하는 뷰 엔진의 확장자와 같게 설정해야 한다.

　　　　같게 설정하지 않으면 아래와 같은 뷰 엔진을 제공하지 못한다는 에러가 뜬다.

Error: Module "handlebars" does not provide a view engine.
    at new View (경로\node_modules\express\lib\view.js:84:13)
    at Function.render (경로\node_modules\express\lib\application.js:570:12)
    at ServerResponse.render (경로\node_modules\express\lib\response.js:1008:7)
    at 경로:7:13
    at 경로:4598:16
    at 경로:4122:12
    at process.nextTick (경로:35:39)
    at process._tickCallback (internal/process/next_tick.js:61:11)

- Line 8 defaultLayout 기본 레이아웃으로 사용할 템플릿 이름

- Line 9 layoutsDir 기본 레이아웃인 defaultLayout의 경로 설정

　　　　Line 5 사용자 정의 위치 설정을 따로 하지 않았을 경우 views/layouts/에서 파일을 찾지만,

　　　　app.set()에서 기본 경로를 partials로 했기 때문에, views/partials/layouts/에서 파일을 찾는다.

　　　　경로를 제대로 못 찾기 때문에 lookup 에러가 뜬다.

Error: Failed to lookup view "list" in views directory "경로"
    at Function.render (경로\node_modules\express\lib\application.js:580:17)
    at ServerResponse.render (경로\node_modules\express\lib\response.js:1008:7)
    at 경로:7:13
    at 경로:4598:16
    at :4122:12
    at process.nextTick (:35:39)
    at process._tickCallback (internal/process/next_tick.js:61:11)

- Line 10 partialsDir defaultLayout의 경로 설정

　　　　app.set()에서 기본 경로를 partials로 했기 때문에, views/partials/layouts/에서 {{header}}, {{footer}}를 찾는다.

　　　　위와 마찬가지로 경로 설정을 해준다.