Express - view engine

DB에서 아래 코드 처럼 http 요청을 받아서 html에 뿌려주게 되는데 템플릿의 상속을 이용하거나, 문법에 차이에 따라 사용되며 여러 방법이 있다

app.get('/', (req, res) => {
    res.send('hello, 안녕, 안녕하세요');
});

app.get('/test-site', (req, res) => {
    res.send('hello test-site, get 요청했어!');
});

app.use ( '/admin', admin );

app.listen(port, () => {
    console.log('Express listening on port', port);
});

view engine의 Nunjucks를 사용

$ cd code_test
$ npm install nunjucks

npm start

템플릿 엔진 추가

컨트롤러단에서 엔진을 감시하고 모니터링하며, 프론트엔드단으로 뿌려주게 된다

설치된 모듈 확인

code 추가

//app.js
const nunjucks = require('nunjucks');

템플릿 구조에 따라 URL 구조도 그대로 따라가야 리팩토링 측면에서 용이하다

폴더 template를 생성 후 app.js에 nunjucks 경로 추가

//app.js
nunjucks.configure('template',  {
    autoescape : true ,
    express : app
});

admin.js에 있는 아래 코드 router 경로를 template 경로를 통해 연결할 예정이다

router.get('/products' , (req, res) => {
    res.send('admin 이후 url/products')
})

template > admin 폴더 생성 > product.html 파일 생성

products {
    {message}
}

다시 admin.js로 돌아와서 경로 지정 및 message 지정
render('admin/products.html')은 template 다음 경로이기 때문에 바로 admin부터 시작한다

//admin.js
router.get('/products' , (req, res) => {
    //res.send('admin 이후 url/products')
    res.render('admin/products.html', {
        message : 'hello!'
    })
})

로컬에서 확인

코드 한줄 더 추가해서 확인

res.render('admin/products.html', {
        message : 'hello!',
        online : 'express!'
    })

template > admin > products.html 코드 변경

products 
{{online}}

로컬에서 확인

간혹 template에서 데이터에 대한 반영이 느리거나 안될 때가 있다 이때 package.json에 nodemon을 넣어서 자동 실행해준 것 처럼
template도 추가해서 실시간 반영 할 수 있게끔 만들어준다

//package.json

  "scripts": {
    "start": "npx nodemon -e js,html app.js"
  },