템플릿 엔진 사용하기

템플릿 엔진

HTML의 정적인 단점을 개선 

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

Pug(구 Jade)

 

문법이 Ruby와 비슷해 코드 양이 많이 줄어듦

• HTML과 많이 달라 호불호가 갈림
• 익스프레스에 app.set으로 퍼그 연결

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

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

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

퍼그 파일 안에서 변수 선언 가능

• 뒤에 자바스크립트 사용

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

for in이나 each in으로 반복문 돌릴 수 있음 ( for 도 가능 )

• 값과 인덱스 가져올 수 있음

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

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

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

레이아웃을 정할 수 있음

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

넌적스

Pug의 문법에 적응되지 않는다면 넌적스를 사용하면 좋음

• Pug를 지우고 Nunjucks 설치
• 확장자는 html 또는 njk(view engine을 njk로)

 

 

 

 

 

 

 

 

 

-> 퍼그랑 셋팅 방법이 다름   ===>

 

 

 

{{변수}}

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

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

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

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

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

레이아웃을 정할 수 있음

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

에러 발생 시 템플릿 엔진과 상관없이 템플릿 엔진 변수를 설정하고 error 템플릿을 렌더링함

• res.locals.변수명으로도 템플릿 엔진 변수 생성 가능
• process.env.NODE_ENV는 개발환경인지 배포환경인지 구분해주는 속성