11/20 공부정리

videoRouter.get("/upload", upload);

videoRouter.get("/:potato", see);

라우터 파라미터 :URL 안에 변수를 포함시킬 수 있게 해줌

req.params.potato

videoRouter.get("/:id", see);

req.params.id로 접근가능 

 

 

Express Routing 

regular expression 정규표현식

app.get('ab*cd', funtion)  * 무엇이든 아무거나

'ab+cd' + b가 얼마나 많은지 상관x

'ab?cd' ?  b optinal

'ab(cd)?e'  ()? optional group  cd optional

:id(//d+) 숫자로 

 

Pug - template Engine 탬플릿을 이용해 뷰 만드는 것을 도와줌

1. Pug 설치 //npm i pug

2. pug  설정 cofing /뷰엔진으로 퍼그 사용을 익스프레스에게 선언

   app. set("view engine", "pug")

3. 실제로 pug 파일 생성 

 

Express와 함께 템플리트 엔진을 사용
Express가 템플리트를 렌더링하려면 다음과 같은 애플리케이션 설정이 필요합니다.
views, 템플리트가 있는 디렉토리. 예: app.set('views', './views')
view engine, 사용할 템플리트 엔진. 예: app.set('view engine', 'pug')
https://expressjs.com/ko/guide/using-template-engines.html

Application Settings (Express어플리케이션 설정)
https://expressjs.com/ko/4x/api.html#app.use

 

express가 뷰를 찾는 기본값 

process. cwd( ) + '/views'

current working directory의 view폴더 !

cwd  서버를 가동하는 위치이다.(package.json: node.js 실행하는 파일)

 

-->

 app.set("view engine","pug")

 app.set("views", process.cwd() +"/src/views");

 

src--> view폴더 생성

video Controller파일 내  

export const trending (req,res) => res.render("home"); //home.pug파일

 

server.js에서 app.set("view engine","pug")로 지정했고

express가 자동으로 /views디렉토리로 가기 때문에  따로 import 할 필요 없음 

 

pug에서 자바스크립트 이용하거나 변수 사용하는 법#{}

footer © #{new Date().getFullYear()}

 

중복되는 것 한 파일로 업데이트

partial폴더

include partial /footer.pug

 

 

퍼그의 장점: 1.깔끔한html작성, 2. 자바스크립트 html에 적용가능 3반복x 한파일로 업데이트 partial

 

template inheritance 템플릿 상속

:layout의 베이스 html 베이스 만들어 줌

base파일 만들고 다른파일에서 extends base.pug

 

block : base의 창문같은 개념

base파일에 body

                 bock content

사용하는 파일에  block content

                         h1 home!

이것을 render하는 곳 controller 

#{pageTitle}

두가지인수 view이름, 템플릿에 보낸 변수 

res.render("home", {pageTitle: "home"}) 템플릿렌더링 // template 파일 String으로 작성해야 함

 

express ->rendering -> user 유저는 렌더링된 html파일만 보게 됨