수업 31일차
주말에 푹쉬고와서 월요병인가 싶었지만 오늘 수업난이도가 그냥 높은거였다.... 들으면서도 이해가 안되고 이걸 직접 다만들어야한다고? 하는게 많았다... 다음주 부터는 텀프로젝트 들어가는 잘할수 있을까..?
이론
- Model: 데이터를 책임지는 부분, DB
View: 사용자가 보게 되는 부분
Controller: 모델, 뷰 등을 연결하고, 이벤트를 처리하는 부분
View engine: express에서 동적인 결과를 HTML로 담기 위해 사용, SSR방식
MVC패턴
MVC는 Model,View,Controller의 약자로 애플리케이션이(소프트웨어) 동작하는 방식에 대한 하나의 디자인 패턴이다.
하나의 애플리케이션을 구성하는 요소들을 세가지의 역할로 구분한다.
유저가 보게되는 페이지(View), 데이터를 처리하는 요소(Model), 이 둘의 사이에서 제어를 담당하는 요소(Controller)들로 구성되는 애플리케이션을 개발하면 각각의 요소들을 개발할 때, 요소가 담당하는 역할에만 집중하여 개발을 진행할 수 있다.
각자의 역할에만 집중하여 개발을 하면 다음과 같은 장점이 있다.
1. 유연하고 확장하기 쉽다.
2. 개발자와 디자이너간의 협업이 수월해진다.
Model
애플리케이션이 작동하는데 필요한 모든 데이터를 가지고 있거나 또는 모든 데이터가 저장된 데이터베이스와 상호작용하여 데이터를 제공할 수 있어야한다.
Controller가 요구하는 바에따라 알맞은 데이터를 제공해주는 역할을 한다.
View
유저에게 보이는 화면을 담당한다.(html,css등)
페이지에서 유저에 의해 일어나는 액션이나 이벤트를 Controller에게 전달하고 Controller로 부터 받는 데이터를 화면에 그려서 유저에게 보여주는 역할을 한다.
Controller
View와 Model의 중간에서 제어(Control)를 담당한다.
View에서 일어나는 액션,이벤트들을 전달받아 model에게 데이터를 요구하는 역할과 model이 제공한 데이터를 다시 View에게 전달하는 역할을 한다.
PUG 🐶
SSR에서 html을 조금 더 세련되게 쓸 수 있도록 돕는 express 뷰 엔진이다. 이는 html태그들과 javascript를 함께 실행할 수 있게 돕는다
pug는 파일을 렌더링하여 html로 변환한 뒤 내부의 javascript(없을 수도 있음)를 실행하여 텍스트로 바꾼 후 유저 UI를 형성한다.
사용법
- npm i pug
- app.js에 app.set("view engine","pug")
- 경로지정, app.set("views", process.cwd()+"/src/views")
- views 폴더에 index.pug 등과 같이 사용
간단한 규칙
- 모든 건 소문자로! ex) doctype html...
- 속성은 괄호에 넣는다! ex) link(href="abc")
- 닫는 태그 필요 없음!
- 자식태그는 부모와 2칸 띄어쓰기 또는 tap
랜더링 방법
express, res.render("index",{pageTitle:"home"});과 같이 사용
여기서, "index"는 index.pug를 말하고
두 번째 파라미터는 객체 형태로 값을 전달할 수 있다. ex) h1=pageTitle // home
장점
- 상속 (block & extends)
뼈대가 될 레이아웃 안에 block만 생성해주고 이를 상속받은 후 block 내부를 채워줌으로써 객체처럼 템플릿을 이용할 수 있다! 특히 일일이 head 내용을 바꿀 필요 없어서 꿀꿀!
// base.pug
doctype html
html(lang="ko")
head
title 제목입니다
link(...)
body
main
block content
script// main.pug
extends base
block content
h1 hello world!- 파일 분할
header나 footer처럼 특정 조각만을 다루는 경우 유용하다. footer태그가 너무 길어지는 경우 모듈화하여 가독성을 좋게 하는 데 좋다.
// footer.pug
footer © #{new Date().getFullYear()} Wow!// base.pug
doctype html
html(lang="ko")
head
title 제목입니다
link(...)
body
main
block content
include footer <====== 이렇게 첨부
script- 블럭 재사용 (Mixins)
이는 수많은 블럭들에 똑같은 템플릿을 적용해야할 때 사용하면 꿀이다. 마치 for문을 쓰는 것과 비슷하다. include로 적용 후 each ~ in 안에 +(함수명)으로 사용하면 된다.
/ video.pug
mixin video(info)
a(href=`/videos/${info.id}`).video_mixin
div.video_mixin_data
span.video_mixin_title=info.title
div.video_mixin_meta
span #{info.owner.name} ▪
span #{info.meta.views} 회// main.pug
include mixins/video
extends base
block content
div
each video in videos
+video(video) <==== 이렇게