[pug] pug 템플릿 엔진

html보다 간결한 문법과 기능을 가진 pug가 궁금하여 찾아보고 정리한 내용입니다~

 

PUG 란?

(구) Jade , 이름의 라이선스 문제로 Pug로 강제 개명된 이력이 있습니다.

Pug는 Express가 지원하는 템플릿 뷰 엔진 중 하나입니다.

파일을 렌더링하여 html로 변환한 후 내부의 javascript를 실행하여 텍스트로 바꾼 후 유저 UI를 형성합니다.

Pug로 코드를 작성할 때에는 들여쓰기에 주의해야 합니다.

들여쓸수록 하위 태그 됩니다. 일정한 간격을 유지해야 합니다.

 

규칙

- 소문자

- 속성은 괄호

- 닫는 태그 없음

- 자식 태그는 부모와 2칸 띄어쓰기 or tab

 

3가지 장점

1. 상속( block & extends)

뼈대가 될 레이아웃 안에 block만 생성해주고 이를 상속받은 후 block내부를 채워줌으로써 객체처럼 템플릿을 이용할 수 있습니다. ( head 수정 작업 X)

 

2. 파일 분할(include)

header나 footer처럼 특정 조각만 다루는 경우 유용합니다. footer태그가 너무 길어지는 경우 모듈화하여 가독성을 높여주는 것이 좋습니다.

 

3. 블럭 재사용(Mixins)

for문을 쓰는 것과 비슷합니다.