-
[NOMAD CODERS_Wetube] View with PUGTodayILearned/Wetube 2020. 7. 14. 00:21
매일 배우고는있지만,
매일 배운것을 글로 쓰려고하는것은 참 어려운 일인 것 같다.
뭔가 글로 풀어낼 만큼 배워야 할 것 같고,
말이 되도록 글을 쓰는것도 참 어렵다. 거기에 남이 이해할 수 있도록 글을 쓰는건 거의 불가능에 가까워 보이는 지금의 나...ㅋㅋㅋㅋ
그렇지만 오늘도 이렇게 꾸역꾸역 글을 써본다..
하단의 글은 언제든 내용이 수정될 수 있고 잘못 된 내용에 대한 지적을 환영합니다.(제발 해주세요.)
결과물
레이아웃을 분리하여 관리, 페이지가 바뀌어도 항상 동일한 메인 레이아웃이 나타난다.
목적
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설치
더보기- Terminal 에 npm install pug 입력하여 설치 후
- 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를 클라이언트에 전송하는 역할을 한다.
정리
- layout을 만드는 이유 : 메인 레이아웃 파일을 이용해 header, footer등의 화면구성을 쉽게 수정하기 위해.
- PUG는 템플릿 언어로 작성되며, 템플릿 언어는 HTML 작성 시 들여쓰기로 작성한다.
- PUG파일을 controllers에서 값을 전송하려면 res.sender()대신 res.render() 함수를 사용하여야 한다.
'TodayILearned > Wetube' 카테고리의 다른 글
[Wetube] DB.js를 이용하여 HOME화면에 동영상 리스트 보여주기 (0) 2020.08.23 [Wetube] VIEW_JOIN/LOGIN 화면 구성 / partial (0) 2020.08.19 [NOMAD CODERS_Wetube] Search controller (0) 2020.07.28 [NOMAD CODERS_Wetube] View with PUG 2 (0) 2020.07.15 [NOMAD CODERS_Wetube] MVC Pattern (0) 2020.07.08