JavaScript30 Pug Partial Partial의 사용 자주 사용되는 부분은 부분으로 찢어서 사용할 수 있다. header header.header .header__column i.fab.fa-youtube .header__column ul li a(href='#') Join li a(href='#') Log in footer footer.footer .footer__icon i.fab.fa-youtube span.footer__text © #{new Date().getFullYear()} WeTube JavaScript 코드를 사용할 일이 있다면 #{}안에 넣어서 사용하면 된다. 사용하기 include header의 경로 ... include footer의 경로 2020. 2. 24. Pug 레이아웃 레이아웃의 사용 pug에서 자주 사용하는 구성들 ( head, footer 등 )을 매번 복사하여 쓰지 않고, 레이아웃을 지정하여 가져다 사용할 수 있다. 생성 doctype html html head title WeTube body main block content footer span © WeTube main.pug 라는 레이아웃 파일을 만들었다. 여기서 주의하여 볼 점은 block 이라고 되어있는 부분이다. block이라는 태그를 통해 이 부분에 다른 내용을 넣을 수 있다. 적용 extends layouts\main block content p hello 위처럼 extends로 레이아웃 파일을 가져온다. 여기서는 extends 다음 레이아웃 파일 경로를 적어준다. 다음 덮어 쓸 영역을 지정해준다. .. 2020. 2. 24. Pug 설치편 Pug Getting Started – Pug Getting Started Installation Pug is available via npm: $ npm install pug Overview The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an arg pugjs.org express에서 view 를 담당하는 방식 중 하나. express에서 HTML을 전달할 수 있는데 이게 view 파트이다. 템플릿 언어. express의 view engine으로 사용... 2020. 2. 24. Middleware part 2. 참고할 만한 Middleware morgan (https://www.npmjs.com/package/morgan) HTTP request logger middleware for node.js HTTP 요청을 console에 기록해준다. 설치 npm i morgan 사용 import morgan from "morgan"; app.use(morgan("dev")); //combined, common, dev, short, tiny GET / 304 3.181 ms - - GET /profile 200 0.911 ms - 22 HTTP 요청에 따라 log가 기록된다. helmet (https://www.npmjs.com/package/helmet) Helmet helps you secure your Expre.. 2020. 2. 20. 이전 1 2 3 4 5 6 ··· 8 다음