node.JS pug #2

404·2021년 12월 23일

node.JS no.4

pug 2nd post "how to write HTML"

pug는 html을 굉장히 편리하게 작성하게 해준다.
https://pugjs.org/api/reference.html <-pug 공식 문서

doctype html
html(lang="en")
    head 
        title Welcome 
    body    
        h1 Welcome Home // h1 태그는 body 태그 안에 들어있다.
        footer &copy; 2021

보통의 HTML처럼 태그를 열고 닫을 필요가 없어서 매우 편리하다.
대신 Python 작성이 그러하듯 부모태그와 자식태그 사이를 표시하기 위해
작성시 열을 잘 맞춰줘야 한다.

pug는 JS로 돌아가기 때문에 아래와 같이 언제든 편하게 JS를 사용할 수 있다.

//home.pug
doctype html
html(lang="en")
    head 
        title Welcome 
    body    
        h1 Welcome Home // h1 태그는 body 태그 안에 들어있다.
        footer &copy; #{new Date().getFullYear()}

"#{}" 안에 JS를 사용하면 된다. 여기서 쓴 JS는 브라우저가 클라에게 보여주기 전에 렌더링 되므로 일반적인 텍스트로 보여진다. 브라우저 개발자도구에서 JS를 확인할 수 없다.

1. include

include example.pug

외부의 JS 파일을 불러와서 쓸수 있듯 pug도 비슷한 기능을 제공한다.
반복을 줄여주는 매우 좋은 기능이다.파일 경로에 신경써야 한다. (home.pug 위치 기준). 위와같이 pug 파일을 불러오면 example 안에 작성한 코드가 그대로 불러와진다.

//example.pug
footer &copy; #{new Date().getFullYear()}

//home.pug
doctype html
html(lang="en")
    head 
        title Welcome 
    body    
        h1 Welcome Home // h1 태그는 body 태그 안에 들어있다.
        include example.pug

위 예제와 아래 예제는 파일이 두개로 나뉘었을뿐 똑같이 작동한다.

2. extends

extends home.pug

새로운 .pug 파일을 만들어서 위 코드를 실행하면 home.pug의 코드를 그대로 실행한다. include 예제와 실행 결과가 같다.

//extend.pug
extends home.pug

3. block

//home.pug
doctype html
html(lang="en")
    head 
        block head /// extend 받는 파일에서 개별로 지정할 수 있는 공간을 만든다.
    body    
        h1 Welcome Home
        include example.pug

위와 같이 작성하면 extend 받는 파일에서 head 안의 내용을 직접 지정할 수 있다.
block은 전체 HTML을 교환한다.

//extend.pug
extends home.pug
block head
	h1 Welcome Home

위 코드 또한 실행 결과가 같다.

4. HTML에 변수 보내기

block은 특정 부분의 HTML만 변경하여 페이지를 찍어내고싶을 때 아주 유용한 도구이다. 하지만 많은 경우에서 전체 HTML이 아닌 특정 부분만 교체해주면 되는 경우도 있다.

//home.pug
doctype html
html(lang="en")
    head 
        block head 
    body    
        h1 Welcome #{where} 
        include example.pug

위 코드에서 우린 사용자가 있는 페이지별로 환영인사를 바꿔서 보여주고싶다.
block을 사용해서 h1 전체를 보낼수도 있지만 welcome이 아니라 you are in 같은 메시지로 바꾸고 싶은 경우 home.pug를 extend 하고있는 수많은 페이지의 인사말을 교체해줘야 할것이다.
이렇게 변수만 보내주고 싶을 때, 그 변수는 컨트롤러에서 보내준다. 이 페이지를 렌더링하는 주체가 컨트롤러이기 때문이다.

const handleHome = (req, res) => {
  res.render("extend", { where: "Home" });
};

extend.pug는 home.pug를 extend 하고 home.pug는 where 이라는 변수를 갖고있다.
위 코드의 결과는 전과 같다.

pug의 장점

HTML을 간편하게 작성하게 해준다.
JS를 편하게 사용할 수 있다.
include, extends, block 등을 활용해 page 조작을 쉽고 빠르게 할수 있다. (양산가능)

적다보니 포스팅이 너무 길어진것 같다.... 다음엔 컨트롤러와 미들웨어 복습도 하고 라우터에 대해 적어보겠다.

404

T.T

이전 포스트

node.JS pug #1

다음 포스트