ejs 뷰 템플릿 사용하기
- 많은 애플리케이션은 MVC 패턴을 사용한다.
- 모델(M) : 데이터베이스 CRUD
- 뷰(V) : 결과물을 보여주기 위한 화면
- 컨트롤러(C) : 사용자 요청을 처리하는 라우팅 함수
- 웹 문서의 기본 형태를 뷰 템플릿 파일을 만들어 두고 사용한다.
- 뷰 템플릿을 사용해 결과 웹 문서를 자동으로 생성한 후 응답을 보내는 역할을
뷰엔진이라고 한다. -
ejs, pug과 같은 여러 가지 뷰 엔진을 지원한다.
- ejs는 웹 문서에서 사용하는 태그를 그대로 템플릿 파일 안에 넣고 사용한다.
// 뷰 엔진 설정
app.set('views', `${__dirname}/views`);
app.set('view engine', 'ejs');
render()메소드를 호출하여 렌더링한다.- 뷰 엔진은 뷰 템플릿 파일을 로딩한 후 백앤드에서 넘겨준 객체의 속성을 웹 문서에 넣을 수 있다. (jsp에 스크립트릿과 비슷?)
<% = userId %>
<% = userName %>
- ejs 모듈 추가
> npm install ejs --save
- 별도로 분리되어 있는 ejs 파일을 삽입할 수 있다. ( ex.
<% include header.js %>)
pug 뷰 템플릿 사용하기
- 웹 문서의 태그를 그대로 사용하지 않고 최대한 간단한 형태로 입력한다.
- 공백과 들여쓰기 기준으로 태그의 구조가 결정된다. (
space와tab을 혼용해서 쓰면 안된다.)
// 뷰 엔진 설정
app.set('views', `${__dirname}/views`);
app.set('view engine', 'pug');
| pug | html |
|---|---|
doctype html |
<!DOCTYPE html> |
html |
<html> |
head | ` <head>` |
|
title 'index' | ` |
|
| … | … |
- pug 템플릿 사용 시, 템플릿이 제대로 만들어졌는지 확인하고 싶다면 다음과 같은 명령어를 사용한다.
- 우선 템플릿을 html로 변환해줄 cli를 설치합니다. ( 반드시 –global으로 설치한다. )
> npm install pug-cli --global
> pug {템플릿 문서}.pug --pretty