[패스트캠퍼스 챌린지 27일차] Express - Pug Template

Fast campus Logo

 

Fastcampus_Node.js 수강 목록

 

패스트캠퍼스 작심 30일 챌린지 27일차.

 

---

 

지난 시간에 Express를 통해 Rest API를 간단히 구현해봤다.

보통 실무에서 Rest API를 통해 특정 Data를 JSON 형태로 전달받는 경우가 많다.

(물론 내 경험을 기준으로...)

 

이전까지 구현한 Rest API는 모두 JSON 형태로 전달받도록 구현하였다.

오늘은 JSON이 아닌 웹 페이지가 출력되도록 수정하였다.

 

Web Page를 구현하기 위한 가장 간단한 방법은 HTML 파일을 직접 만들어서 화면에 전달하면 된다.

하지만 이번 강의에서는 Pug라는 Template Engine을 활용해서 화면을 구현하였다.

 

Pug에 대해 알아보기 전에 Template Engine이란 Template 언어로 작성된 코드를

HTML로 변환해주는 역할을 하는 것이라고 간단히 알아두자.

 

---

 

Pug는 Template Engine의 한 종류로 Web Page를 작성하는데 사용된다.

물론 Template Engine에는 Pug 말고도 EJS 등 다양한 엔진이 있으니

페이지 구현에 효율적인 Template Engine을 선택하여 사용하면 된다.

그럼 아래 코드를 통해 Pug에 대해 간단히 알아보자!

 

// pug setting
_express.set('view engine', 'pug')

// View Derectory
_express.set('views', 'src/views')

_router.get('/:id', (req, res) => {
    res.render('user-profile', {
        nickname: req.user.nickname
    })
})

먼저 첫번째 코드가 view template engine으로 pug를 사용하겠다고 세팅을 해주며,

두번째 코드로 pug template 파일이 어디에 작성되어있는지 경로를 지정해준다.

두번째 Setting이 없는 경우 server가 실행되는 Directory와 같은 Level의 views Directory에서

pug 파일을 찾는다.

 

그리고 response.render를 통해 user-profile.pug 템플릿을 화면에 출력할 것이라고 알려주고,

템플릿에 nickname이라는 key로 데이터를 출력할 수 있도록 Parameter를 작성하여 전달해준다.

 

그럼 Pug Template의 구성은 어떻게 작성되어 있을까? 

html
    head
    body
         h1 User Profile Page
         h2 Nickname
         div= nickname

보면 HTML 태그를 사용하긴 했는데... 일반적으로 작성하는 HTML 문법과는 약간 다르다.

뭐 html 태그 안에 head와 body가 있고, body 안에서 h1, h2로 출력한 텍스트를 옆에 작성해주고 있음을 쉽게 알 수 있다.

 

그럼 'div=는 뭐지?' 라는 생각을 할 것이다.

pug에서는 tag 뒤에 =를 붙이면 '여기는 nickname이라는 Key로 전달된 Parameter를 출력할 것이다.'라는 것을 의미한다.

response.render 함수를 이용해서 전달한 데이터를 여기에 출력하는 것이다.

 

Template Engine - Pug 실습

 

코드를 작성하고 웹에서 출력해보면 왼쪽의 FastCampus 강의처럼 간단히 출력되는 것을 볼 수 있다.

Template Engine이 HTML 태그로 변환하여 화면에 출력해주기 때문이다.

 

이처럼 Node 뿐만 아니라 Javascript에는 많은 Template Engine이 있다.

자신이 가장 이해하기 쉽고 작성하기 편한 Template Engine을 선택해서 구현하면

효율적이고 생산성 높은 소스코드 구현을 할 수 있을 것이다.

 

---

 

[오늘의 학습통계]

패스트캠퍼스 작심 30일 챌린지 27일차 학습통계

 

---

- 패스트캠퍼스 URL : https://bit.ly/37BpXiC

* 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.