📍 오늘 배운내용
SSR을 구현하는 방법으로 HTML을 미리 템플릿을 저장하는 엔진 => Pug, ejs 등

1️⃣ 템플릿 엔진이란?

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

템플릿 엔진의 종류

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

2️⃣ Pug

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

1. Pug 문법

• HTML 닫기 태그 없이 들여쓰기로 블록 구분
• = 을 이용해서 전달받은 변수 사용
• id 나 class 는 태그뒤에 이어서 바로 사용
• ()을 이용해서 attribute 사용

html
	head
		title= title
	body
		h1#welcome 반갑습니다!
		a.link(href="[링크]") 링크입니다.

• each~in 표현식으로 주어진 배열의 값 순환하며 HTML 태그 만듦
• if, else if , else ⇒ 주어진 값의 조건을 확인하여 HTML 태그 만듦

each item in items
	if item.name == 'apple'
		h1 This is Aplle
	else 
		h2= `${item.name}`

✔️ layout 기능

• layout 템플릿으로 사용할 파일(layout.pug) : block 을 포함한 템플릿 작성
  • 주로 html, head (폰트, css참조, title,등..) 등과같이 자주 쓰이는 태그 작성
• 작성한layout.pug파일을 사용하려면 extends 키워드 사용
  • block 부분에 새로 작성한 HTML 태그가 포함된다.

--- layout.pug ---
html
	head
		title= title
	body
		block content
        
        
--- main.pug ---
extends layout
block content
	h1 Hello World!~
    p 안녕하세요.
    
--- 하위에 있는 h1 태그가 레이아웃 content 부분에 들어간다...---

✔️ include 기능

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

--- title.pug ---
h1= title


--- main.pug ---
extend layout
block content
	include title    --- 위에서 선언된것이 그대로 들어감 ---
	div.content
		안녕하세요
	pre
		include article.txt 

✔️ mixin 기능

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

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

2. Express.js + pug 연동하기

• app.set
  • 템플릿 저장되는 디렉터리 지정
  • 어떤 템플릿 엔진을 사용할지 지정
• res.render
  • app.set 에 지정된 값을 이용해 화면을 그리는 기능 수행
  • 첫번째 인자는 템플릿의 이름, 두번째 이름은 템플릿에 전달되는 값

// app.js
app.set('views', path.join(__dirname,'views')); //views에 views 라는 폴더 경로설정
app.set('view engine', 'pug'); //view engine 으로 pug를 사용하겠다.

// requist handler
//.. 생략
res.render('main', { //main => main.pug 파일을 지정
	title: 'Hello Express', //main.pug 파일에 전달하는 값
});

3. Express.js 의 app.locals

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

app.locals.appName = "Express";

h1 = appName
// <h1>Express</h1> 

3️⃣ express-generator 사용시 템플릿 엔진 지정

express --view=pug [프로젝트명] 

// ejs 로 하고싶다면
// express --view=ejs [프로젝트명]

• express-generator 는 기본적으로 jade 라는 템플릿 엔진 사용
• jade 는 pug 의 이전 이름 , 최신 지원을 받기위해선 템플릿 엔진을 pug로 지정 해야 함
• --view 옵션 사용 ⇒ 템플릿 엔진을 지정