1. Template Engine

템플릿 엔진이란?

• 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장.
• 동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성
• 템플릿 엔진은 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공

Express.js의 템플릿 엔진

• EJS - html과 유사한 문법의 템플릿 엔진
• Mustache - 간단한 데이터 치환 정도만 제공하는 경량화된 템플릿 엔진
• Pug - 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등 강력한 기능을 제공.

Pug

• 들여쓰기 표현식을 이용해 가독성이 좋고 개발 생산성이 높음
• HTML을 잘 모르더라도 문법적 실수를 줄일 수 있음
• layout, include, mixin 등 강력한 기능 제공

html //html 닫기 태그 없이 들여쓰기로 블럭 구분
	head 
    	title= title // =을 이용해서 전달받은 변수 사용 가능
	body
		h1#greeting 안녕하세요 // id나 class는 태그 뒤에 이어서 바로 사용. () 이용해서 attribute 사용 
		a.link(href="/") 홈으로

• each, if

each item in arr
	if item.name == 'new'
    	h1 New Document
    else
    	h1= `${item.name}`

• layout
  block을 포함한 템플릿을 선언하면 해당 템플릿을 layout으로 사용 가능.
  layout을 extends 하면 block 부분에 작성한 HTML태그가 포함됨
  반복되는 웹사이트의 틀을 작성해두고 extends하며 개발하면 매우 편리한 기능.

--- layout.pug ---
html
	head
    	title= title
    body
    	block content
--- main.pug ---
extends layout
block content
	h1 Main Page

• include
  자주 반복되는 구문을 미리 작성해두고 include 하여 사용
  일반적인 텍스트 파일도 include하여 템플릿에 포함 가능

--- title.pug ---
h1= title
--- main.pug ---
extends layout
block content
	include title
    div.content
		안녕하세요
    pre
    	include article.txt

• mixin
  mixin을 사용하여 템플릿을 함수처럼 사용할 수 있게 선언 가능
  include는 값을 지정할 수 없지만 mixin은 파라미터를 지정하여 값을 넘겨받아 템플릿에 사용할 수 있음.

--- listItem.pug ---
mixin listItem(title, name)
	tr
    	td title
        td name
--- main.pug ---
include listItem
table
	tbody
    	listItem('제목', '이름')

Express.js + pug

• app.set을 이용해 템플릿이 저장되는 디렉터리 지정하고, 어떤 템플릿 엔진을 쓸 지 지정 가능

--- app.js ---
app.set('views',
	path.join(__dirname, 'views'));
app.set('view engine', 'pug');

--- request handler ---
res.render('main', {
  title : 'Hello Express',
});

• app.locals
  Express.js의 app.locals를 사용하면 render함수에 전달되지 않은 값이나 함수를 사용할 수 있음
  템플릿에 전역으로 사용될 값을 지정하는 역할

--- app.js ---
app.locals.appName = "Express"

--- main.pug ---
h1 - appName

//<h1>Express</h1>

express-generator 사용 시 템플릿 엔진 지정하기

express-generator는 기본적으로 jade라는 템플릿 엔진을 사용
jade는 pug의 이전 이름으로, 최신 지원을 받기 위해선 템플릿 엔진을 Pug로 지정해야함
--view 옵션을 사용하여 템플릿 엔진을 지정할 수 있음.

$ express --view=pug myapp

2. CRUD

Creat, Read, Update, Delete

3. Async Request Handler

• request handler에서 오류를 처리하는 방법
• 매 라우팅 메소드마다 try ~ catch ~ next작성하기 귀찮으니, 어싱크 핸들러를 하나 만들어놓고 리퀘스트 핸들러에 이를 넣어 처리하는 방법.

const asyncHandler = (requestHandler) => {
	return async (req, res, next) => {
    	try{
        	awaiot requestHandler(req, res);
        } catch (err) {
        	next(err);
        }
    }
}
---
router.get('/', asyncHandler(async (req, res) => {
	const posts = await Posts.find({});
	if ( posts.length < 1) {
    	throw new Error('Not Found');
    }
  	res.render('posts/list', {posts});
});

4. Pagination

Paigination이란?

• 말 그대로 페이지 나누기. (1페이지에는 1~10번.. 2페이지에는 11~20번..)
• Express.js + Mongoose의 Pagination

router.get(... => {
           ... 
           const total = await Post
           	. countDocument({});
		   const posts = await Post.find({})
           	.sort({ createdAt: -1 }) // 데이터 순서 유지(작성순)
           	.skip(perPage * (page - 1)) // skip - 검색 시 포함하지 않을 데이터 수
           	.limit(perPage); //limit -검색 결과 수 제한
		   const totalPage = 
            Math.ceil(total / perPage); //게시글 수 / 페이지 당 게시글 수 = 총 페이지 수
			...

mixin pagination(path)
	p
    	-for(let i = 1; i <= totalPage; i++)
        a(href = `${path}?page=${i}&perPage=${perPage}`)
        	if i == page
            	b= i
            else 
            	= i
            = " "
---
include pagination
tr
	td
    	+pagination("/posts")

5. PM2