2월 19일 자 학습 내용 정리입니다.
✅ Template Engine
템플릿 엔진(Template Engine)이란 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장해놓는 것이다.
동작 시에 미리 작성된 템플릿에 데이터를 넣어 완성된 HTML을 생성한다.
템플릿 엔진은 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공한다.
Express.js의 템플릿 엔진에는 EJS, Mustache, Pug 등이 있다.
- EJS : html과 유사한 문법을 가짐
- Mustache : 간단한 데이터 치환 정도만 제공하는 경량화된 템플릿 엔진
- Pug : 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등의 기능 제공
그 중 Pug는 들여쓰기 표현식을 이용해 가독성이 좋고 개발 생산성이 높다.
HTML을 잘 모르더라도 문법적 실수를 줄일 수 있고 layout, include, mixin 등 강력한 기능을 제공한다.
✅ Pug 문법
✔️ 기본 문법
html
head
title= title
body
h1#greeting 안녕하세요
a.link(href="/") 홈으로
Pug는 HTML 닫기 태그 없이 들여쓰기로 블럭을 구분한다.
=을 이용해 전달받은 변수를 사용할 수 있다.
id나 class는 태그 뒤에 이어서 바로 사용할 수 있으며 소괄호 ()를 이용해서 attribute를 사용한다.
위의 pug 코드는 아래 html 코드와 같다.
<html>
<head>
<title>title</title>
</head>
<body>
<h1 id="greeting">안녕하세요</h1>
<a class="link" href="/">홈으로</a>
</body>
</html>
✔️ 반복문과 조건문
each item in arr
if item.name == 'new'
h1 New Document
else
h1= `${item.name}`
each ~ in 표현식으로 주어진 배열의 값을 순회하며 HTML 태그를 만들 수 있다.
if, else if, else의 조건문을 이용해 주어진 값의 조건을 확인하여 HTML 태그를 만들 수 있다.
✔️ Block
--- layout.pug ---
html
head
title= title
body
block content
--- main.pug ---
extends layout
block content
h1 Main Page
block을 포함한 템플릿을 선언하면 해당하는 템플릿을 layout으로 사용할 수 있다.
layout을 extends하면 block 부분에 작성한 HTML 태그가 포함된다.
따라서 반복되는 웹사이트의 틀을 작성해두고 extends하며 개발하면 된다.
✔️ include
--- title.pug ---
h1= title
--- main.pug ---
extend layout
block content
include title
div.content
안녕하세요
pre
include article.txt
자주 반복되는 구문을 미리 작성해두고 include하여 사용할 수 있다.
일반적인 텍스트파일도 include하여 템플릿에 포함할 수 있다.
✔️ mixin
--- listItem.pug ---
mixin listItem(title, name)
tr
td title
td name
--- main.pug ---
include listItem
table
tbody
listItem('제목','이름')
mixin을 사용하여 템플릿을 함수처럼 사용할 수 있도록 선언할 수 있다.
include는 값을 지정할 수 없지만 mixin은 파라미터를 지정하여 값을 넘겨받을 수 있고 이를 템플릿에 사용할 수 있다.
✅ Express.js와 Pug 연동하기
--- app.js ---
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
--- request handler ---
res.render('main', {
title: 'Hello Express'
});
app.set을 이용해 템플릿이 저장되는 디렉터리를 지정하고 어떤 템플릿 엔진을 사용할지 지정할 수 있다.
보통 템플릿이 저장되는 디렉터리로 views 디렉터리를 사용한다.
res.render() 함수는 app.set()에 지정된 값을 이용해 화면에 그리는 기능을 수행한다.
render의 첫 번째 인자는 템플릿의 이름이며 두 번째 인자는 템플릿에 전달되는 값이다.
--- app.js ---
app.locals.appName = "Express"
--- main.pug ---
h1= appName
// <h1>Express</h1>
app.locals를 사용하면 render()에 전달되지 않은 값이나 함수를 사용할 수 있다.
템플릿에 전역으로 사용될 값을 지정하는 역할을 한다.
✅ Async Request Handler
request handler에서 오류를 처리하는 방법은 promise().catch(next)와 async function의 try~catch, next의 두가지가 있다.
async의 비동기 처리는 편리하지만 매번 try~catch문을 작성하는 것은 귀찮고 실수하기 쉽다.
async request handler는 request handler를 async function으로 작성하면서 try~catch, next를 자동으로 할 수 있도록 구성한다.
const asyncHandler = (requestHandler) => {
return async (req, res, next) => {
try {
await requestHandler(req, res);
} catch(err) {
next(err);
}
}
}
----------------------------------------------
router.get('/', asyncHandler(async (req, res) => {
...
// 에러처리는 그냥 throw new Error로 넘긴다.
}));
asyncHandler는 requestHandler를 매개변수로 갖는 함수형 미들웨어이다.
전달된 requestHandler는 try~catch로 감싸져 asyncHandler 내에서 실행되고 throw되는 에러는 자동으로 오류처리 미들웨어로 전달되도록 구성된다.
✅ PM2 Process Manager
PM2는 Node.js 작업을 관리해주는 Process Manager이다.
기본적으로 node.js를 node 명령어로 실행 시 오류 발생이나 실행 상태를 관리할 수 없다.
반면 pm2는 작업 관리를 위한 다양한 기능을 제공한다.
pm2를 사용하는 이유는 다음과 같다.
- 안정적인 프로세스 실행 : 오류 발생 시 자동으로 재실행한다.
- 빠른 개발환경 : 소스 코드 변경 시 자동으로 재실행한다.
- 배포 시 편리한 관리 : pm2에 모든 프로세스를 한번에 관리할 수 있다.
✔️ PM2 사용
$ pm2 init simple
$ pm2 init
pm2 init 명령어를 이용해 pm2 설정파일 예제를 만들 수 있다.
module.exports = {
apps : [{
name: 'simple-board',
script: './bin/www',
watch: '.',
ignore_watch: 'views',
}],
};
예제를 수정하여 설정파일을 생성한 후 $ pm2 start 명령어를 실행하면 어플리케이션을 pm2 데몬으로 실행시켜준다.
개발시 watch 옵션을 사용해 해당 파일의 변경이 있으면 서버를 자동으로 재실행하도록 구성할 수 있다.
'엘리스 AI 트랙 4기 > elice AI track' 카테고리의 다른 글
| [6주차] crypto와 회원가입 구현하기 (0) | 2022.02.23 |
|---|---|
| [5주차] Express.js + Mongoose로 Pagination 구현하기 (0) | 2022.02.19 |
| [5주차] Mongoose ODM - (2) (0) | 2022.02.19 |
| [5주차] Mongoose ODM - (1) (0) | 2022.02.19 |
| [5주차] NoSQL과 MongoDB (0) | 2022.02.19 |
댓글