[Node.js] Pug - partial (복붙 최소화하기)

만약 똑같은 부분을 모든 파일에 복붙 한다면 굉장히 귀찮을뿐더러

수정할 곳이 생긴다면 모든 파일에 들어가서 하나하나 바꿔야 된다는 불상사가 생길 것이다.

 

다행히도 Pug는 html 파일을 따로 나눠서 include, extends 하는 기능을 제공한다.

이 기능을 사용하면 수정할 곳이 생겨도 파일 하나만 수정하면 모든 파일에 변경이 적용된다.

 

 

include

 

만약 모든 페이지마다 footer를 달아야 한다면 include를 사용할 수 있다.

먼저 footer.pug 파일을 만든다.

 

// footer.pug

footer COPYRIGHT(C) 2021 ALL RIGHTS RESERVED.

 

이제 다른 Pug 파일에서 footer.pug의 경로를 include 하면 된다.

 

// hello.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body 
        h1 hello
    
    include footer1.pug

결과 출력

 

실행해보면 위의 결과가 나오는 것을 확인할 수 있다.

만약 footer의 내용을 수정하려면 footer.pug만 바꿔주면 된다.

 

 

 

extends

 

html 파일에는 doctype부터 html, head, body까지 겹치는 부분이 정말 많다.

extends를 사용하면 그런 불편함을 줄일 수 있다.

기본적인 틀을 가진 한 파일만 만들면 다른 파일에선 extends 기능으로 불러올 수 있다.

 

// base.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body 
        header
        	block header	// block을 지정
        main
        	block content
    
    include footer1.pug

 

기본적인 틀 외에 각 페이지마다 다른 곳은 위처럼 block을 이름과 함께 지정할 수 있다.

 

이제 다른 파일에서 base.pug를 extends 하면 된다.

 

// hello.pug

extends numList.pug 

block header 
    h1 페이지에 오신 걸 환영합니다

block content 
    h2 Hello

base.pug에서 지정한 block의 이름을 적고 그 아래에 내용을 적으면 된다.

 

실행 결과

 

이렇게 include와 extends를 활용하면

똑같이 사용하는 내용을 한 파일에서 다룰 수 있다는 엄청난 장점이 있다.

Pug를 사용한다면 이 기능은 필수인 것 같다