[node / Express] 템플릿과 html 관한 오류

 

 

*에러코드

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

 

---

 

*원인

node.js express로 html file을 로드할때 에러가 발생하는 현상이었다. 

이에대하여 스택오버플로우와 검색을 통해 쉽게 해결할 수 있는 방법은 2가지 정도라고 생각되었다.

이미 view파일에 ejs를 이용하여 템플릿을 만들어두었던 상태이기때문에 

탬플릿으로 화면엔진을 설정해주었다

 

 

*해결방법

1.EJS(탬플릿)으로 엔진 설정하기   2.sendFile로 html파일을 뿌리기

 

 

*발생당시 의존성

  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.15.5",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.6.9",
    "morgan": "~1.9.0",
    "randomstring": "^1.1.5",
    "serve-favicon": "~2.4.5"
  },
  "devDependencies": {
    "chai": "^4.2.0",
    "mocha": "^6.2.0",
    "nodemon": "^1.19.1",
    "supertest": "^4.0.2"
  }
}

 

 

 

*ejs(탬플릿)으로 설정하기

const path = require('path'); //path를 import한다

...

app.set('view engine', 'ejs'); //'ejs'탬플릿을 엔진으로 한다.
app.set('views', path.join(__dirname, 'views')); //폴더, 폴더경로 지정

위와 같이 import개념으로 path를 변수에 저장해준후,

밑에 엔진 설정을 해준다. 단 두줄이면 완료!

 

-ejs부분에 설정을 원하는 탬플릿을 넣어주면, 그걸 기반으로 탬플릿 엔진이 설정된다

-이후 탬플릿이 들어있는 폴더(통상적으로 views로 저장된다) / 폴더의 경로를 적어주면 된다.

상대경로로 적어도 되지만 후일을 위해 절대경로인 __dirname을 이용해주는것이 좋다고 생각된다.

 

 

전체코드

//...app.js

const express = require('express');
const path = require('path');

const index = require('./routes/index');
const app = express();

app.use('/', index);

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

 

 

*sendFile 사용방법 (스택오버플로우)

https://stackoverflow.com/questions/25270434/nodejs-how-to-render-static-html-with-express-4

 

 

---

참고용 사이트

- express 용 템플릿개발 https://expressjs.com/ko/advanced/developing-template-engines.html

Express용 템플릿 엔진 개발

 

- 궁금한 점 / 수정 요청사항 등은 언제든 댓글 달아주세요 :)

- 도움이 되셨다면 ❤️ 하트 한 번 눌러주세요! 감사합니다 !