클라이언트측에 UI를 제공하는 경우 Express의 View Engine（혹은 템플릿 엔진）을 사용해서 개발하면 효율성을 올릴 수 있다. 흔히 말하는 MVC 패턴 중 View에 해당한다.
Express에서 사용하는 템플릿 엔진은 여러가지가 있는데, Pug(옛날에는 Jade)나 EJS, ETC, 등등 많은 모듈이 있으며 이 중에서 선택해서 사용하면 된다.
종류도 많고 특징도 가지가지..그 중에서 나는 EJS를 선택했는데 HTML을 그대로 사용할 수 있다는 것이 매력적이었다. 다른 엔진 중에는 소스코드를 간략화 하기 위해 해당 엔진 전용 문법이 있는 경우가 있는데 별도 학습도 필요하고 팀 프로젝트를 하는 경우 다른 팀원, 특히 디자이너가 그 문법을 모르면 곤란하므로 HTML을 그대로 사용할 수 있는 엔진을 골랐다.
EJS 역시 npm 으로 설치 가능하다. 프로젝트 폴더에서 다음 커멘트를 입력하자.
다음 실제 UI를 구성하기 위한 파일을 작성한다. EJS 를 사용하는 경우 파일 확장자를 .ejs 로 지정한다. 뷰 파일을 두기 위한 Views 폴더를 만든다.
index.ejs
<html>
<body>
<h1>New Project</h1>
</body>
</html>
次にサーバー側でapp.jsを編集して2つほど設定をおこないます。ひとつはView EngineにEJSを指定する設定です。そしてもうひとつは
http://localhost:3000/ へのGETリクエストで先ほど作成したindex.ejsを表示する設定です。この設定のために下記のコードをapp.jsの末尾に追加します。
다음에는 app.js를 편집해서 다음과 같이 설정한다. 첫 번째로는 vie engine 을 set 메소드로 설정한다. 다음은 라우팅을 설정한다. / 로 (localhost:3000) 접속한 경우에 res.render() 메소드로 index.ejs 파일을 표시하게끔 설정한다.
app.js
// View EngineにEJSを指定。
app.set('view engine', 'ejs');
// "/"へのGETリクエストでindex.ejsを表示する。拡張子（.ejs）は省略されていることに注意。
app.get("/", function(req, res, next){
res.render("index", {});
});
ㅁこれでapp.jsの変更を反映させるためにサーバープロセスを再起動します。再起動するには先ほど実行したnode app.jsプロセスを終了してもう一度実行します。
마지막으로 node app.js 를 재실행하고
http://localhost:3000/ 에 접속하면 index.ejs 에 기술한 내용이 화면에 표시된다.
댓글
댓글 쓰기