템플릿 엔진

템플릿 엔진: HTML의 정적인 단점을 개선

• 반복문, 조건문, 변수 등을 사용할 수 있다
• 동적인 페이지 작성 가능하다
• PHP, JSP와 유사하다

Pug

• 문법이 Ruby와 비슷해 코드 양이 많이 줄어든다
• HTML과 많이 달라 호불호가 갈린다
• 익스프레스에 app.set으로 퍼그 연결한다

HTML 표현

Pug HTML 표현 방법1

Pug HTML 표현 방법2

변수 

res.render 에서   두   번째   인수   객체에  Pug  변수를   넣음

res.locals 객체에 넣는 것도 가능(미들웨어간 공유됨)

=이나 #{}으로 변수 렌더링 가능(= 뒤에는 자바스크립트 문법 사용 가능)

파일 내 변수

- 뒤에 자바스크립트 사용

변수 값을 이스케이프 하지 않을 수도 있음(자동 이스케이프)

반복문

for in이나 each in으로 반복문 돌릴 수 있음

값과 인덱스 가져올 수 있음

조건문

if else if else문, case when문 사용 가능

include

퍼그 파일에 다른 퍼그 파일을 넣을 수 있음

• 헤더, 푸터, 내비게이션 등의 공통부분을 따로 관리할 수 있어 편리
• include로 파일 경로 지정

extends/ block

레이아웃을 정할 수 있음

• 공통되는 레이아웃을 따로 관리할 수 있어 좋음, include와도 같이 사용

넌적스

• Pug의 문법에 적응되지 않는다면 넌적스를 사용하면 좋다
• Pug를 지우고 Nunjucks 설치하자
• 확장자는 html 또는 njk(view engine을 njk로)

변수

{{변수}}

내부 변수 선언 가능 {%set 자바스크립트 구문 }

반복문

{% %} 안에 for in 작성(인덱스는 loop 키워드)

조건문

{% if %} 안에 조건문 작성

include

파일이 다른 파일을 불러올 수 있음

• include에 파일 경로 넣어줄 수 있음

레이아웃

레이아웃을 정할 수 있음

 

• 공통되는 레이아웃을 따로 관리할 수 있어 좋음, include와도 같이 사용 

에러 처리 미들웨어

• 에러 발생 시 템플릿 엔진과 상관없이 템플릿 엔진 변수를 설정하고 error 템플릿을 렌더링함
• res.locals.변수명으로도 템플릿 엔진 변수 생성 가능
• process.env.NODE_ENV는 개발환경인지 배포환경인지 구분해주는 속성