템플릿 엔진 이란? pug 활용법

템플릿 엔진 이란?

 

 

PUG란?

Node Express Template Engine

pug 는 express의 패키지 view engine

PUG 문법으로 코드를 작성하면 자동으로 HTML 로 바꿔주는 기능을 합니다.

마크업 문법보다 코드량이 적어 생산성이 좋아지고 

JS 연산 결과를 쉽게 보여줄 수 있습니다.

 

https://naltatis.github.io/jade-syntax-docs/

Jade Template Syntax Documentation by Example

Basics doctype html html head title my jade template body h1 Hello #{name} {"name": "Bob"} id & classes #content .block input#bar.foo1.foo2 Nesting ul#books li a(href="#book-a") Book A li a(href="#book-b") Book B ul#books li: a(href="#book-a") Book A li: a(href="#bo...

naltatis.github.io

npm install pug

 

예시

사진 설명을 입력하세요.

 

사진 설명을 입력하세요.

 

사진 설명을 입력하세요.

 

사진 설명을 입력하세요.

 

pug 와 express 연결 방법

app.set('views', path.join(__dirname, 'views'); // 폴더 경로 지정
app.set('view engine' , 'pug'); // 확장자 지정

 

 

특징

1.닫는 태그가 없음

2.공잭까지 자동 맞춤

 

기억해야 할 부분

html에서

. 점은 class

#은 id

 

감사합니다.