Express (Node.js) : PUG

pug는  node express template engine이다. 요새 핫하다고 한다.

 

express로 HTML을 보여준다. 사용성이 편리하고 설치도 편리하다

HTML을 아주 쉽고 보기 편하게 만들어준 템플릿이라고 한다. (경험한 템플릿 엔진은 jinja template이 있다 = 진자도 꽤 편리했다)

 

pug의 특징은 코드를 간소화시켰고, 컴파일한 후에 html문서를 랜더링 하는 형식이라 생산성이 높아지기 때문에

문법을 익히는데 시간은 조금 걸리지만 장기적으로 좋다.

 

pug사용법은 npm으로 pug를 install 해주고 app.js에서 app.set("view engine", "pug"); 라고 선언해주면 준비는 끝이다

 

그리고 기존 확장자를 html > pug로 써주면 pug템플릿을 사용할 수 있다.

각 url당 pug템플릿들을 먼저 다 만들어주고 views폴더에 넣어준다.

views폴더에서 다시 layouts폴더를 만들어준다

layouts폴더에는 main.pug를 만든다. 기준이 될 레이아웃이다

그리고 doctype은  html이라고 선언 해준뒤

베이스가 될 html구조를 만들어주자 

pug는 닫는 태그가 없는 문법이다. 태그 옆에 뭔가 작성하면 content가 되고  태그 안에 다른 태그를 중첩하기 위해서는

들여쓰기가 필수이다. 뭐 프로그래밍에서 들여쓰기는 언제나 중요하다

pug는 더더욱이.. 

사진처럼 메인 레이아웃을 만들어주고 각 템플릿에 extends시켜주자.

block은 각 템플릿마다 내용이 상이하니 block처리해서 각자 만들어주고

나머지 block이 아닌 구문은 예를들어 navbar나 footer는 거의 모든 페이지가 공유를 하게되니

그냥 extends로 상속해주면 된다.

이렇게 home이 되는 페이지에 상속시키고 main에 block부분에 p태그로 hello를 넣어줬다

자 타이틀은 안보이지만 전부 상속되고 block content부분에 작성한 p태그의 hello가 보인다.

이렇게 모든 템플릿에 상속과 block으로 간편하게 관리할 수 있다.

 

파이썬의 진자템플릿도 같은 기능이 다 있다. 템플릿이 다 그런가보다.

그리고 pug나 진자 템플릿 같은 템플릿 엔진들이 좋은것이 html css에서 불가능한

프로그래밍이 가능하다. 조건문 반복문등등~~~ 얼마나 편리한가 

 

pug의 기본문법은 차차 알아보자

참고할 블로그 하나를 보자

jeong-pro.tistory.com/65

Pug 문법 정리 요약 (템플릿 엔진)