[유튜브 클론코딩] 2.13 Installing Pug(퍼그 설치)

2.13 Installing Pug(퍼그 설치) 

Pug란?

Pug는 view 엔진을 말함

pug 설치하기

콘솔에 npm install pug 로 설치한다.

 

 

set함수로 application 설정하기 -  app.set("view engine", "pug");

• https://expressjs.com/ko/4x/api.html#app.set  expressjs 공식 홈페이지> API 참조 > application> app.set()
• set 함수: application의 설정을 하는 함수
  • name과 value가 필요하다.

• 우리는 view engine 설정을 바꿀것이다.
• view engine 설정의 기본 값은 undefined인데 이것을 pug로 바꿀것이다.
• app.js에 다음과 같은 코드를 추가한다.

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

 

• pug와 express에는 view 파일들의 위치에 관한 기본 설정이 있다.

       만약 그 설정을 바꾸고 싶다면, "views" 설정을 바꾸면 된다.

       application의 화면이 담긴 디렉토리나 디렉토리의 배열을 입력하면 된다.

       html 파일을 저장해야 하는 폴더의 기본 값은 프로젝트의 작업 디렉토리 +'/views' 이다

 

views 폴더 만들어서 pug 만들어보기

이 폴더 안에 파일을 하나 만든다. 파일명은 home. 확장자는 html 대신에 pug으로 하면 된다.

 

home.pug 에 다음과 같이 작성해본다.

 

p Hello!! 

 

pug는 html 파일들이 더 아름답게 보이도록 만들어준다.

예를 들어, HTML 파일에서 <p>Hello</p> 라는 코드 대신에 pug 파일에서는 p Hello라고 적으면 된다.

pug가 이 코드를 일반적인 html 코드로 변환해줄 것이다.

 

만든 pug를 웹사이트에서 보여주려면? res.send 대신 res.render 사용하기

컨트롤러에서 res.send로 home을 전송하는 대신에 res.render를 사용한다.

render 함수의 인자로 템플릿 파일의 이름을 입력하면 된다.

아까 만든 파일이 home.pug 이므로 소문자로 home을 적으면 된다.

이 함수가 views 폴더에서 파일명이 home이고 확장자가 pug인 템플릿 파일을 찾은 후에 보여줄 것이다.

 

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

↑  videoController.js

 

npm start하고 localhost:4000으로 접속해보면 hello!라고 뜨는 것을 볼 수가 있다.

개발자모드로 확인해보면 p hello는 <p>hello</p>로 태그로 바뀐 것을 알 수가 있다.

 

다음시간에는

이제 정말 멋진 것을 보여줄것이다. html이 멋지게 보이도록 바꿔줄 것이다.

직접 템플릿을 작성하는 것보다 프로그래밍을 더 빠르게 할 수 있다.

지금까지는 HTML, CSS 에 대해서만 알고 있었을 텐데,

계속 header, footer 같은 부분을 복사-붙여넣기 해야 하기 때문에 못생기고 불편하다.

express에서 pug을 사용한다면 이 문제를 쉽게 해결할 수 있다.