pug 설치 및 사용방법 / html 헬퍼, 뷰엔진 (노마드코더 유튜브 클론 5.1)

pug 특징 요약

• HTML을 간략하게 작성할 수 있다. pug가 변환해 줌
• '<','>'를 사용하지 않고 들여쓰기로 계층구조 구분. (2칸 들여쓰거나 tab)
• views 라는 이름의 폴더를 만들고 그 안에 pug파일을 생성한다.
• base가 되는 pug를 먼저 작성한다.
• 다른 pug파일로 기본 pug 파일을 가져다 쓴다. (확장)
  extends base.pug
• controller.js 파일에서 res.render의 첫번째 인자에 사용할 파일 이름을 넣어준다.
  res.render(“사용할 파일. pug”)
• server.js 파일에
  app.set("view engine", "pug");
  app.set("view", process.cwd() + "src/views");
• HTML을 구성하는 특정 부위를 별도의 파일로 만들어 include해 사용할 수 있다.
  include footer.pug

https://pugjs.org/api/getting-started.html

Getting Started – Pug

 

pug icon

 

pug 설치 및 셋팅

---

1. pug 설치 (터미널에 입력)

npm i pug

 

2. 뷰엔진 설정

: express에게 html 헬퍼로 pug를 사용하겠다고 말함.
server.js > 

app.set("view engine", "pug");

 

3. 디렉토리 수정하기.

현재 작업 디렉토리는 node.js를 실행하는 디렉토리인 package.json이다. package.json은 src 폴더에 있지 않기때문에 원시적인 방법으로 src 폴더에 package.json을 넣거나. 더 나은 수정 방법으로는 아래와 같다.
server.js > 

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

express문서 참고

 

4. pug 파일생성.
    views 폴더만들고 -> 그 폴더안에 ~.pug 파일 만들기.

 

 

 

 

 

pug 설치 및 셋팅 과정 캡쳐

---

pug 설치. 터미널에 npm i pug

 

package.json 파일에 dependencies 항목에 pug가 설치되어 추가 된 것을 확인 할 수 있음.

 

src 폴더 안에 pug 파일을 담을 views 폴더 만들기.

 

 

 

pug 작성룰

pug 작성 시 변수 또는 js code 넣는 법
#{변수 또는 js code}