ProgrammingJavaScript

[Node.js] express engine으로 html load하기

, , , ,

개요

node.js에서 routing되는 view를 html로 뿌려주고 싶었다. 보통의 view는 ejs를 사용하는 것 같은데, 만드는 것이 고작 나만 볼 test page이기에 ejs까진 필요가 없었다. 그런데 웬일? 이렇게 단순한 작업에도 에러 등장.


Error: No default engine was specified and no extension was provided

그렇다. node.js express engine으로 html file을 load할 때 위의 에러가 발생했다. 구글링 결과, 두 가지의 해결 방법을 찾아냈다. 사실 두 가지 방법 외에 sendFile로 해당 html file을 그대로 뿌려 주는 방법도 있다.


1. html을 ejs로 rendering(추천)

  1. ejs 를 설치한다.

    1
    npm install ejs

  2. 화면 엔진을 ejs 로 설정한다.

    1
    2
    3
    // 화면 engine을 ejs로 설정
    app.set('view engine', 'ejs');
    app.engine('html', require('ejs').renderFile);

이대로 사용하면 된다. ^^;; full code는 아래와 같다.

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var express = require('express');
var app = express();
var logger = require('morgan');

// router 설정
var indexRouter = require('./routes/index');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// view 경로 설정
app.set('views', __dirname + '/views');

// 화면 engine을 ejs로 설정
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

// 기본 path를 /public으로 설정(css, javascript 등의 파일 사용을 위해)
app.use(express.static(__dirname + '/public'));

app.use('/', indexRouter);

module.exports = app;
index.js
1
2
3
4
5
6
7
8
9
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index.html');
});

module.exports = router;

2. consolidate, mustache 모듈 설치

잘은 모르겠지만, mustache 가 html file을 ejs로 렌더링하는 것 같다.

  1. 프로젝트 루트 폴더에 consolidate 와 mustache 를 설치한다.

    1
    2
    npm install consolidate
    npm install mustache

  2. server 파일에 consolidate 을 추가한다.

    1
    2
    // 변수 이름은 마음대로 정해도 됨.
    var engines = require('consolidate');

  3. 화면 engine을 html로 설정한다

    1
    2
    3
    // 화면 engine을 html로 설정
    app.engine('html', engines.mustache);
    app.set('view engine', 'html');

이것도 이렇게 끝! 나는 다음과 같이 사용해 보았다.

app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var express = require('express');
var app = express();
var engines = require('consolidate');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

// router 설정
var indexRouter = require('./routes/index');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// view 경로 설정
app.set('views', __dirname + '/views');

// 화면 engine을 html로 설정
app.engine('html', engines.mustache);
app.set('view engine', 'html');

// 기본 path를 /public으로 설정(css, javascript 등의 파일 사용을 위해)
app.use(express.static(__dirname + '/public'));

app.use('/', indexRouter);

module.exports = app;
index.js
1
2
3
4
5
6
7
8
9
var express = require('express');
var router = express.Router();

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

module.exports = router;

기회가 되면 default setting을 정리해서 남기고 싶은데, 연말이라 그런지 너무 귀찮다. ^^;


참고


Share