Start pug.js express에서 pug를 설치하고 사용해보자

HTML을 멋져 보이도록 만들어보자!

pug.js 사이트가기

설치는 

$ npm install pug

Pug는 view engine이다

set함수에는 name과 value가 필요하다

application의 설정을 하는 함수.

그중

view engin 설정을 바꿀 것이고

설정의 기본값은 undefined이다.

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

와같이 설정해주면된다.

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

그 설정을 바꾸고 싶다면 views 설정을 바꾸면 된다.

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

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

pug는 템플릿 언어, express의 view engine 이기때문에

pug는 html파일들이 더 멋져보이도록 만들어준다.

HTML 파일에서는 Hello!! 라는 코드 대신에 pug파일에선s p Hello 라고 적어주어야한다.

p Hello!

같이 적어주면

pug는 

<p>Hello!</p>

와 같이 html 코드로 변환해준다.

아래는 코드에서의 예시이다

확장자는 위에

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

에서 pug로 설정했었다.