[ TIL 06 ] - pug의 사용

kgorae·2021년 7월 14일
0

(TIL) Node.js

목록 보기
2/5
post-thumbnail

pug란?

view template engine
컨트롤러에서 res.send("<h1>Hi Hello</h1><p>Nice to see you:)</p>") 로 보내는 대신에,
res.render("pug 파일명"); 로 html 코드를 훨씬 간편하게 보낼 수 있게 된다.

pug 사용법

  1. pug 설치
    npm i pug

  1. express에서 pug를 view engine으로 설정
    app.set("view engine", "pug");

  1. pug 파일 생성
  • views 폴더를 만든 후, '파일명.pug' 파일을 생성
    (express 에서 view 파일을 찾는 default 값이 process.cwd() + '/views'(current working directory에서 views를 폴더를 찾는다)이기 때문)
  • 이때 cwd 가 /views 의 위치가 아니라면, 경로를 지정해주면 된다.
    app.set("views", process.cwd() + "/views파일이 있는 폴더/views");

  1. pug 파일 사용
  • res.render("파일명"); 이 파일명.pug파일을 렌더링한다.
  • 렌더링이란? 개발자가 작성한 코드를 유저에게 보여지는 형태로 보여주는 것
  • render() 함수 : 첫 번째 인자는 템플릿이고, 두 번째 인자는 템플릿에 추가할 정보가 담긴 객체이다.

relative URL / absolute URL

  • relative URL :
    웹 페이지나 파일 디렉토리 중심으로 상대적으로 찾아갈 수 있도록 나타낸 URL
  • absolute URL :
    서비스, 호스트, 파일 경로를 나타내는 완전한 주소
  • 상대 url / 절대 url 비교
    • 상대 url : ../images/img.jpg
      절대 url : http://www.aa.or.kr/CV/word/images/img.jpg
    • 상대 url : edit-profile/edit
      절대 url : http://localhost:4500/profile/edit-profile/edit
  • 참고 : /edit-profile/edithttp://localhost:4500/edit-profile/edit 와 같다.

pug 기능

1. 레이아웃 확장 기능

  • pug를 이용하면 html에서 복사 / 붙여넣기를 통해 반복하던 작업을 extends를 통해 쉽게 해결할 수 있다.
// base.pug 파일을 그대로 가져와서 쓰는 것
extends base.pug
  • block 영역은 base.pug를 가져다 쓴 파일에서 수정 가능하다.
// block 의 생성(base.pug에서)
block content
// block 의 사용(login.pug에서)
extends base
block content
    h1 Login!

2. 컴포넌트 분리와 사용

  • include를 통해 pug에서 분리된 컴포넌트를 가져올 수 있다.
include 폴더명/header
include 폴더명/footer

3. javascript 코드 사용

  • #{} 괄호 안에 javascript 코드를 넣어서 쓸 수 있다.
  • 변수 사용
    base.pug 에서 #{pageTitle} 이란 변수를 쓴다면,
    controller 에서 변수값을 지정하여 렌더링 하면 된다.
// base.pug 파일
title #{pageTitle}
title= pageTitle // 변수 하나라면 '='으로 사용해도 됨
// controller.js 파일
res.render("파일명", {pageTitle :"페이지 명"});

4. mixin 함수로 형식 재활용

  • mixin이란? 형태는 같되 내용은 다르게 사용하고 싶을 때 쓴다.
  • mixin 함수 생성 예시
// mixins/contents.pug 파일에서
// mixin 함수 생성
mixin contents(게시물)
    h1 게시물.title
    p=게시물.description
    ul
		each hashtag in 게시물.hashtags
			li=hashtag
  • mixin 함수 사용 예시
// home.pug 파일에서
// mixin 함수 사용
include mixins/contents
block content
	each posting in postings
		// "+함수이름" 으로 사용
		+contents(posting)
	else
		No contents
profile
좋은 개발자, 좋은 사람

0개의 댓글