풀스택 맛보기6-PUG

  1. PUG
    1. express에게 pug 사용을 알려주기.
    2. pug 파일 생성
    3. render
      1. cwd(current working directory)
    4. Partial
    5. Extending Templates
    6. Block
      1. block [block 이름]
      2. block script
    7. Variable to Templates
    8. Conditional
    9. Iteration
    10. Mixin

PUG

  • pug에 간단하게 작성하면 html로 변환해준다.
  • 템플릿을 이용하여 View 만드는것을 돕는다.

pug에 대해 알아보기

🔧 npm install pug

express에게 pug 사용을 알려주기.

server.js에 추가 app.set("view engine", "pug");

pug 파일 생성

예시. src/views/home.pug 파일 생성 doctype html

html(lang="ko")
    head 
        title Welcome:)
    body 
        h1 Hello 
        footer © Agora Ἀγορά

⭐ 작성 시 주의사항 ⭐

  • 모든건 소문자로 작성
  • 속성은 괄호안에 작성
  • 2칸 혹은 탭을 이용하여 부목 속성보다 안쪽에 작성

render

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

❗ 디렉토리 위치 에러 ❗ src/views를 찾아야 하지만 프로젝트 최상위 폴더에서 views를 찾고 있다.
=> 현재 작업하는 디렉토리(cwd)를

cwd(current working directory)

  • 현지 작업중인 폴더로 어디서 노드를 부르고 있는지에 따라 결정된다.

현재 package.json에서 node.js를 실행하고 있기에 여기가 cwd가 되는 것이다.

해결법

app.set("view engine", "pug");
app.set("views", process.cwd() + "/src/views");

=> 위의 코드로 cwd를 설정하여 프로젝트의 views의 경로를 알려주고 문제를 해결할 수 있다.

Partial

  • 반복되는 부분을 따로 만들어 삽입할 수 있다.

footer 삽입 예시.

  • footer.pug 파일 생성 후 반복하고 싶은 내용 추가
    footer © #{new Date().getFullYear()} Ἀγορά
  • 보여지고 싶은 페이지에 include [경로]를 통해서 삽입
    doctype html
html(lang="ko")
  head 
      title Ἀγορά :
  body 
      h1 Hello
  include partials/footer.pug

    Extending Templates

base.pug 파일 생성 후 반복될 코드 작성

doctype html
html(lang="ko")
    head 
        title Ἀγορά :
    body 
        h1 Hello
    include partials/footer.pug

home.pug 파일에 작성

extends base.pug

Block

  • 반복되는 걸 전부 가져온다면 모두다 같은 페이지가 되기 떄문에
    원하는 부분만 바뀔 수 있도록 block을 사용한다.

block [block 이름]

base.pug에 content라는 block 생성

doctype html
html(lang="ko")
    head 
        title Ἀγορά :
    body 
        block content
    include partials/footer.pug

home.pug에 생성된 block content 아래 보여지고 싶은 것을 작성

extends base.pug

block content 
    h1 Home

block script

=> base.pug는 큰 틀이 되고 block content의 내용을 바꾸면 페이지마다 다른 문구를 보여줄 수 있다.

Variable to Templates

  • 템플릿에 변수 보내기

Page Title을 Home으로 선언하기

export const trending = (req, res) => res.render("home", { pageTitle: "Home" });

=> home.pug의 pageTitle은 Home이라는 문자열을 갖게 된다.

Conditional

h1=pageTitle // 변수로 인식함, 태그에 하나의 변수만 넣는 경우 사용 h1 #{pageTitle} //변수로 인식함 h1 pageTitle //문자로 인식함

Iteration

  • elements의 list를 보여준다.
  1. 임시 게시글(숫자)을 배열에 넣고 render 시킨다.
    export const trending = (req, res) => {
  const posts = [1, 2, 3, 4, 5];
  return res.render("home", { pageTitle: "Ἀγορά", fakeUser: fakeUser , posts:posts});
};
  2. 배열의 요소를 차례대로 나열한다.
    ul 
 each post in posts 
     li=post
  3. 결과
    • 1
• 2
• 3
• 4
• 5

Mixin

  • partial과 비슷하지만 데이터를 받을 수 있는 HTML block이다.

변경 전 views/home.pug

extends base.pug

block content
    h3 주요 뉴스
    each p in posts 
        div
            h4=p.title 
            ul
                li 조회수 #{p.views}
                li 댓글 #{p.comments }
                li #{p.createdAt}
    else 
        h4 게시글이 존재하지 않습니다.

mixin을 사용할 파일 생성

views/home.pug

extends base.pug

block content
    h3 주요 뉴스
    each p in posts 
        +post(p)
    else 
        h4 게시글이 존재하지 않습니다.

views/mixins/post.pug

mixin post(info)
    div
            h4=info.title 
            ul
                li 조회수 #{info.views}
                li 댓글 #{info.comments }
                li #{info.createdAt}

=> home.pug의 p가 post.pug의 info에게 값은 전달한다.

=> HTML을 return 해주는 일종의 함수를 갖게 되었고
생성된 mixin은 필요한 여러 곳에서 사용할 수 있다.

Continue with Router

참고

  • Nomad Coders