EtoC

PUG 사용해보기 본문

ETC/기타 공부

PUG 사용해보기

게리드 2023. 8. 4. 23:55

1.  PUG란?

pug는 템플릿을 이용하여 뷰를 만드는 템플릿 엔진이다.
뷰는 사용자가 보는 대상,화면을 말한다.

html return

export const see = (req, res) => {
`<!DOCTYPE html><html lang='ko'><head><title>Wetube</title></head><body><h1>Watch video #${req.params.id}</h1><footer>&copy;2023 Wetube - All rightsreserved</footer></body></html>`
};

위와 같은 길다란 html코드를 넣어야할때 pug를 사용하면 단순한문장으로 입력한것을 쉽게 html형식으로 바꿀수있다.

2. 설치방법

1. npm i pug를 입력하여 설치한다.

2. express 에게 html 헬퍼로 pug를 쓰겠다고 server.js 로알려주기.(pug를 뷰엔진으로 설정한다)

sever.js에 app.use("viewengine", "pug"); 적으면 된다.

3. pug파일을 생성한다.

view는 기본적으로 현재작업중인 디렉토리의 views에서 view파일을 찾는다.
process.cwd() + '/views' 때문에 views라는 폴더를 따로 만들어야한다.
폴더 만들기: mkdir views
홈 파일 만들기: touch home.pug

  • 홈파일 내용 작성하기
  • 모든 문자는 소문자로 작성해야한다.(파일명도 소문자)
  • 속성이 있으면 괄호안에 작성한다.
  • 모든것은 부모속성보다 안쪽에 있어야한다.(tab또는 띄어쓰기 2칸)

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

 

이렇게 작성된 파일은 우선 pug로 보내지고 pug는 이파일을 렌더링하여 평범한 html로 변환해준다.

이제 맨 위의 복잡했던 코드를 바꾸면 된다.

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

 

이제 express는 내가 템플릿 엔진으로 pug를 쓰는것을 알았다.

그리고

에러 발생

원인은

띄어쓰기

하지만 언제나 그렇듯 나는 예상치 못한 에러를 만난다.


원인은 app.set("viewengine", "pug")로 설정해놨는데
app.set("view engine", "pug")로 뷰 띄고 엔진으로 써야했다.

경로

이번에는 홈파일을 뷰즈디렉토리 안에서 찾을 수 없다고 떴다. 근데 뒤 쪽의 경로를 보면 내가 넣어둔 경로가 아닌 다른 경로가 뜬다

  1. consloe.log(process.cwd())로 현재 작업중인 경로를찾아본다.
    cwd는 nodejs를 호출하는곳,서버를 기동하는 파일의 위치에 따라 결정된다.
    바로 package.json이다.
    package.json안의 scripts에서 nodejs를 실행하고있다. 때문에 현재작업디렉토리는 wetube가 된다.
  2. 경로위치를 물리적(?)으로 바꾼다.
    (1) view폴더를 src밖의 package.json이 있는 곳에 둔다.(구려)
  3. 경로위치를 재설정한다.

partial

모든페이지에띄우기위해 또는 분리하여 사용하기위해 partial를 쓴다.
views/partial/에 footer.pug 파일을 만들어서 footer의 내용을 채운다.


다른 퍼그파일들에서 일일이 적어둔 푸터를 지운뒤 확인해보면 푸터가 다 지워져있다.

 

 

푸터를 인클루드하지 않아서이므로 인클루드해주자

 

 

그러면 푸터가 모든 페이지에서 뜨는것을 확인할 수 있다.

상속

레이아웃의 베이스 혹은 html의 베이스를 만드는것
extend는 html의 베이스를 가질수 있게 해준다.

block

블록은 템플릿의 공간이다. 그 공간에 이것저것 집어넣을 수 있다.
block content

doctype html 
html(lang="ko")
    head
        block head 
    body 
        block content
    include partials/footer.pug

 

block 은 다른 pug파일들이 내용을 채워넣을 공간을 만드는것이다.

변수 지정

#{변수명: 값}

장점

깔금하고 간단하게 html코드로 변경해준다.
html에 자바스크립트를 포함시킬수 있다.
반복적이지 않고 한파일로 모든 템플릿을 업데이트 할수 있다.

'ETC/기타 공부' Related Articles more