1. pug 뷰 템플릿 사용
- pug 포맷은 웹 문서의 태그를 그대로 사용하지 않고 최대한 간단한 형태로 입력하기 때문에 공백과 들여쓰기를 기준으로 태그의 구조가 결정
- pug의 옛이름은 jade
- https://pugjs.org/api/getting-started.html
※ 주의사항
1) 들여쓰기를 잘못하면 pug가 제대로 처리되지 않음
2) 공백과 Tab을 같이 사용하면 오류가 발생
- pug 전역 설치
npm install -g pug
- 뷰엔진 설정
app.set('view engine', 'pug');
- test1_success.pug
doctype html
html
head
title "성공"
body
block content
#container
p "조회에 성공했습니다."
- 결과 Code
<!DOCTYPE html>
<html>
<head><title>"성공"</title></head>
<body>
<div id="container"><p>"조회에 성공했습니다."</p></div>
</body>
</html>
미리 결과코드를 랜더링 하여 볼수있습니다.
http://jade-lang.com/command-line
보시면
Installation via npm: $ npm install jade --global Usage: $ jade [options] [dir|file ...] Options: -P, --pretty compile pretty html output -w, --watch watch files for changes and automatically re-render $ jade < my.jade > my.html Jade over stdio |
- jade 전역 설치
npm install -g jade랜더링 하고자 하는 폴더에 들어갑니다.
그리고 jade -P <test1_success.pug> test1_success.html 라고 명령어가 치면 html 파일이 생성됩니다.
- jdae 명령어를 통해 html로 랜더링
- 랜더링 결과
- 랜더링한 페이지 확인
2. pug 템플릿 상속, 스크립트 사용
- block : 상속받을 파일에서 이 부분만 교체
- include : 다른 pug템플릿 파일을 읽어와서 코드를 붙임
- footer.pug
div#footer
a(href='/public/login.html') 로그인으로 - pug에서 include됨- layout.pug
doctype html
html
head
meta(charset='utf8')
title extends로 상속함
script(src='/public/jquery-3.1.1.min.js')
body
block content
h2 hello, world
include ./footer.pug- adduser.pug
1) adduser.pug에서 block 사용하지 않는경우(순수 상속)(block content 에서 h2 요소 + include 요소)
extends layout
1) adduser.pug에서 block 사용한경우(덮어쓰기 효과)
extends layout
block content
h2 #{title}
h2 Hello
여기서 #{title}은 나온것입니다.
3) adduser.pug는 순수 상속인경우 + layout.pug에서 block content가 include만 있는 경우
- adduser.pug
extends layout
doctype html
html
head
meta(charset='utf8')
title extends로 상속함
script(src='/public/jquery-3.1.1.min.js')
body
block content
include ./footer.pug
3. 패스포트(Passport)
- 노드에서 사용할 수 있는 사용자 인증 모듈
- 사용방법이 간단
- 사용자 인증 기능을 독립된 모듈안에서 진행할 수 있도록 서포트
- 대표적인 인증방식)
1) 데이터베이스에 저장된 사용자 정보와 비교하는 로컬인증
2) 페이스북이나 트위터의 계정을 사용하는 Oauth인증
- 모듈
1) passport : 사용자 인증 처리에 필요한 기본 기능을 제공
2) passport-local : 웹서버에서 직접 사용자의 아이디와 비밀번호를 전달받아 데이터베이스에 저장된 정보와 비교하는 로컬 인증 기능을 제공
3) connect-flash : 요청 객체에 메시지를 넣어 둘 수 있는 기능을 제공하는데, 보통 웹 서버 안의 다른 함수에 메시지를 전달하거나 뷰 템플릿을 처리하는 함수에 메시지를 전달하거나 뷰 템플릿을 철리하는 함수에 메시지를 전달하기위해 사용
'WEB > Node JS' 카테고리의 다른 글
| Nodejs기초 - 14일차 정리(페이스북 활용) (2) | 2019.01.28 |
|---|---|
| Nodejs기초 - 13일차 정리(패스포트 모듈 사용) (0) | 2019.01.27 |
| Nodejs기초 - 11일차 정리(Semantic UI 활용, MVC패턴, 응답 페이지 모듈화[ejs]) (0) | 2019.01.26 |
| Nodejs기초 - 10일차 정리(Require 이해, 모듈화분리 패턴) (0) | 2019.01.24 |
| 9일차 정리 (0) | 2019.01.14 |
