[express] pug 설치 및 사용방법(템플릿 그리기)

퍼그는 여러 템플릿엔진중 하나로 syntax가 깔끔한편에 속한다.

퍼그언어를 html로 바꿔 준다.

 

pug 설치

npm install -dev pug

 

pug 설정

이제 express에서 퍼그를 사용해 그릴려면 app을 사용하는 파일에가서 view engine을 pug로 설정해준다.

app.set('views', 'src/views')//경로설정
app.set('view engine', 'pug')//뷰엔진에 퍼그등록
app.use('public', express.static('src/public'))//static 미들웨어 절대경로설정

랜더링할때

app.get('/',(req,res)=>{
    const resMineType = req.accepts(['json','html'])

    if(resMineType === 'json'){
        //@ts-ignore
        res.send(req.user)
    }else if(resMineType === 'html'){
        res.render('index',{
            nickname: req.user.nickname
        })
    }else{
        // error handling
    }
})

이런식으로 설정해주고 index.pug파일을 만들어보자

src/views/index.pug

pug 작성

pug문법으로 템플릿을 작성해주는데 앞서 말한것 처럼 syntax가 매우 시원시원함!!

html
    head
        link(rel="stylesheet" href="/public/index.css")
    body 
        h1 User profile page
        //- div=msg
        h2 Nickname
        div.green= nickname

퍼그로 작성한 템플릿 hello가 html형태로 컴파일됨

참고) 퍼그에 변수집어넣기

app 랜더링할때 만든 msg인자가 퍼그 div에 들어가면 잘 출력됨

 

html과 가까운 템플릿엔진들도 있으니 참고하자.