[NOMAD CODERS_Wetube] View with PUG

매일 배우고는있지만,

매일 배운것을 글로 쓰려고하는것은 참 어려운 일인 것 같다.

뭔가 글로 풀어낼 만큼 배워야 할 것 같고,

말이 되도록 글을 쓰는것도 참 어렵다. 거기에 남이 이해할 수 있도록 글을 쓰는건 거의 불가능에 가까워 보이는 지금의 나...ㅋㅋㅋㅋ

그렇지만 오늘도 이렇게 꾸역꾸역 글을 써본다..

하단의 글은 언제든 내용이 수정될 수 있고 잘못 된 내용에 대한 지적을 환영합니다.(제발 해주세요.)

---

결과물

레이아웃을 분리하여 관리, 페이지가 바뀌어도 항상 동일한 메인 레이아웃이 나타난다.

---

목적

EXPRESS의 VIEW ENGINE인 PUG를 이용하여 메인 레이아웃을 구성한다.

메인 레이아웃을 구성하는 이유는

head, footer 등을 페이지별로 일일이 수정하지 않고, 한꺼번에 수정할 수 있도록 하기 위함이다.

 

◈main.pug 파일만 수정하면 모든 페이지의 구성이 변하도록 한다.

---

CODE

..view/layouts/main.pug

doctype html
html
    head
    body
        h1 Wetube
        main
        block content
        footer
            span © Wetube
               

PUG는 템플릿 언어로 작성한다.

템플릿 언어는 HTML작성을 좀 더 편리하게 한다.

위 코드와 같이 꺽쇠를 사용하지 않으며 들여쓰기로 모든것을 해결한다. 매우 편한듯 편하지않기도하고..?

..view/home.pug

extends layouts/main.pug

block content
    p HOME

Extends를 사용하여 main layout에 확장성을 더한다.

PUG설치

1. Terminal 에 npm install pug 입력하여 설치 후
2. app.set() 함수를 이용해 view engine을 pug로 설정한다.

app.js

import routes from "./routes";
const app = express();

app.set("view engine", "pug");
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

참고) https://expressjs.com/ko/4x/api.html#app.set

app.set("name","value") 형식으로 입력하며, 디폴트값은 없다.

 

video controllers.js

export const home = (req, res) => res.render("home");
export const videos = (req, res) => res.render("videos");
export const upload = (req, res) => res.render("upload");
export const videoDetail = (req, res) => res.render("ViedoDetail");
export const deleteVideo = (req, res) => res.render("Delete Video");
export const search = (req, res) => res.render("SEARCH");

user controllers.js

export const join = (req, res) => res.render("Join");
export const login = (req, res) => res.render("Login");
export const logout = (req, res) => res.render("Logout");
export const users = (req, res) => res.render("users");
export const userDetail = (req, res) => res.render("user Detail");
export const editProfile = (req, res) => res.render("Edit Profile");
export const changePassword = (req, res) => res.render("Change password");

템플릿 언어로 작성한 PUG 파일을 controllers에서 전송(redner) 해주기 위해서,

controllers의 res.send()함수가 아닌 res.render()함수를 사용한다. 

render함수는 view를 클라이언트에 전송하는 역할을 한다.

---

정리

1. layout을 만드는 이유 : 메인 레이아웃 파일을 이용해 header, footer등의 화면구성을 쉽게 수정하기 위해.
2. PUG는 템플릿 언어로 작성되며, 템플릿 언어는 HTML 작성 시 들여쓰기로 작성한다.
3. PUG파일을 controllers에서 값을 전송하려면 res.sender()대신 res.render() 함수를 사용하여야 한다.