WEB/NodeJS

[Node.js] node.js에서 pug 연결

다콩잉 2022. 9. 15. 22:33

pug는 HTML 템플릿 엔진이다. 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링할 수 있게 해준다.

 

 

 

HTML과 아주 살짝 다른 문법을 가지고 있다.

1. 닫는 태그 사용 X

2. id는 #container과 같이 #을 입력하고 클래스는 .col처럼 .을 입력

3. 태그 사이가 아닌 태그의 속성으로 넣으려면 () 사용

    ex) html(lang='en')

 

 

HTML

<!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>

 

Pug

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.

 

 

다음은 node.js에서 pug를 사용하는 법을 알아보자.

 

 

1. pug 다운로드

터미널에 npm i pug

 

2. 뷰 엔진 설정

express에 뷰 엔진을 pug로 설정

 

 

3. views 폴더 안에 pug 파일 생성

- express는 기본적으로 views 폴더 안에 있는 파일을 찾기 때문에 views 폴더 안에 pug 파일 생성

views 폴더 안에 pug 파일 생성

- express는 기본적으로 현재 작업 디렉토리는 노드를 시작하는 디렉토리에서 views 폴더를 찾음

- 다음과 같이 폴더 안에 views 폴더가 있을 경우 app.set('veiws', process.cwd() + "/폴더명/views") 코드 추가

728x90