Pug(1)

0. Returning HTML

 - 우리는 지금까지 HTML을 return 할때 controller에서 res.send()를 사용했음

 - 한줄 정도의 HTML을 보내는건 상관없으나 한 페이지 전체를 보낼 경우 매번 많은 내용을 작성해야함

 - 이 부분을 개선하기 위해 Template Engine을 사용할 것임

 

Pug

1. Pug

 - Template을 이용하여 View 만들기를 돕는 Engine

 - https://github.com/pugjs/pug/tree/master/packages/pug#syntax

pug/packages/pug at master · pugjs/pug

 

2. 사용법

 - https://expressjs.com/ko/4x/api.html#app.set

Express - Node.js web application framework

 

// /src/views/home.pug
doctype html
html(lang="ko")
    head 
        tile Wetube 
    body 
        h1 Welcome to Wetube 
        footer © 2024 Wetube

// videoController.js
export const trending = (req, res) => res.render("home");

// server.js
app.set("view engine", "pug");

 - 공식 API Reference에도 나와있듯 현재 작업 경로에서 views 폴더를 찾는다고 나옴

   - 하지만 홈 화면에 접속하면 home을 찾을 수 없다며 에러가 발생

   - console.log(process.cwd())를 사용하여 현재 경로를 확인

     - cwd(current working directory)

 - root 파일은 서버를 구동하는 파일의 위치에 따라 결정

 - 즉 package.json 파일(server.js가 아님)의 위치가 중요

 - 간단하게 현재 views 폴더는 src 내에 있으므로 package.json이 있는 곳으로 폴더를 이동해도 됨

 - 하지만 우리는 src 폴더내에 모든 코드가 있게 만들 예정

// 한줄 더 추가
app.set("views", process.cwd() + "/src/views");