평행코드

Pug란? 본문

Node js

Pug란?

나의 오류는 누군가 겪었던 오류 2023. 5. 30. 10:45

Pug는 Haml의 영향을 많이 받은, Node.js 및 브라우저용 JS로 구현된 고성능 템플릿 엔진이다.

https://github.com/pugjs/pug

 

GitHub - pugjs/pug: Pug – robust, elegant, feature rich template engine for Node.js

Pug – robust, elegant, feature rich template engine for Node.js - GitHub - pugjs/pug: Pug – robust, elegant, feature rich template engine for Node.js

github.com

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5);
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

이렇게쓰면

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5);
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Pug is a terse and simple templating language with a strong focus on
        performance and powerful features.
      </p>
    </div>
  </body>
</html>

이런식으로 변환됨

설치
npm i pug

 

뷰 엔진 설정

 

View Engin: 뷰엔진은 서버에서 처리한 데이터 결과값을

정적인 페이지(HTML 파일)에 보다 편리하게 출력해주기 위해 사용한다.

뷰엔진에서 요구하는 형태로 템플릿 파일(문서)을 만들고,

해당 템플릿 문서에 서버에서 처리한 데이터를 전달하면 해당 데이터를 화면에 출력할 수 있다.

 

app에 우리의 view engine이 pug라고 말해줘야 한다.

app.set("view engine", "pug");
pug 파일 생성

 

src폴더에 views라는 폴더를 생성후 home.pug파일을 생성한다.

home.pug파일에 아래형식으로 작성해준다.

doctype html
html(lang="ko")
    head
        title Wetube 
    body
        h1 Welcome to Wetube 
        footer &copy; 2023 Wetube

 

그리고 라우터의 응답을 보내주는 곳에서 아래처럼 작성하면 home.pug파일을 읽어서 브라우저로 보내준다.

export const trending = (req, res) => 
res.render("home");

1. pug를 설치

2. pug를 뷰 엔진으로 설정

3. 실제로 pug 파일을 생성

4. 파일 렌더해주기

저작자표시

'Node js' 카테고리의 다른 글

Mixins, HTML 코드를 재사용하는 방법  (0) 2023.05.30
Pug 부분적으로변경하기 (include, extend, res.render, 변수설정)  (0) 2023.05.30
URL Parameters , 정규식  (0) 2023.05.26
Router란?  (0) 2023.05.26
Morgan middleware  (0) 2023.05.26
'Node js' Related Articles more