Express.js : 게시판 CRUD 준비

김종현·2023년 4월 10일
0

템플릿 엔진

-서버에서 클라이언트로 보낼 html 형태를 템플릿으로 저장.
-동작시 서버에서 데이터와 html을 조합하여 보내줌.
템플릿 작성 문법/템플릿을 html로 변환하는 기능 제공

-Express.js 템플릿 엔진들
EJS- html과 유사한 문법의 템플릿 엔진
Mustach - 간단한 데이터 치환. 경량화 템플릿 엔진
Pug - 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등 기능 제공

Pug

-들여쓰기 표현식 : 가독성, 개발 생산성 좋음
-layout, include, mixin 등 강력한 기능 제공

Pug 문법

1. 기본 문법

-html 닫기 태그 없이 들여쓰기로 블럭 구분
-'='을 이용해서 전달받은 변수 사용 가능
-id/class는 태그 뒤에 이어서 바로 사용
-()를 사용해서 attribute 사용

html
	head
    	title= title
	body
    		//id
    	h1#hi 안녕
        	//class
        a link(href='/') 홈페이지로 이동

2. each, if

-each ~in 표현식으로 주어진 배열의 값을 순환하며 html 태그를 만들 수 있음
-if/else if/else를 이용해 주어진 값의 조건을 확인하여 html 태그를 만들 수 있음

each item in arr
if	item.name == 'new'
	hi 새 문서
else
  	hi= `${tiem.name}`

3. extends, block

-block을 포함한 템플릿 선언시 해당 템플릿을 레이아웃으로 사용 가능
-layout을 extends시 block 부분에 작성한 html 태그가 포함됨
-반복되는 웹사이트 틀을 작성하고 extends 개발시 매우 편리

---layout.pug---레이아웃 부분
  html
	head
    	title= title
	body
    	block content
        
---main.pug---레이아웃 사용 부분
//레이아웃 사용 선언.
//위의 레이아웃이 그대로 적용.
extends layout

//레이아웃에서 선언한 content 하위에 h1이 들어감.
block content
	h1 메인페이지

4. include

-자주 반복되는 구문 미리 작성후 include로 사용
-include는 값을 지정할 수 없음
-일반적인 텍스트 파일도 include하여 템플릿에 포함 가능

---title.pug---
  //include될 부분
  h1= title

---main.pug---
  extends layout
  block content
  //include 사용 선언
  	include title
    
    div.content
		좋은 아침
    pre
    //pre 태그 안에 article.txt가 들어가게 됨
    	include article.txt

5. mixin

-템플릿을 함수처럼 사용할 수 있게 선언 가능
--include나 layout은 값을 지정할 수 없지만 mixin은 파라미터를 지정하여 값을 받아 템플릿에 사용

---list.pug---
  mixin list(title, name)
//table row
	tr
    //table data
    	td title
        td name
        
---main.pug---
include list

table
	tbody
    	list('제목', '이름')

Express.js와 Pug 연동

-app.set을 이용해 템플릿이 저장되는 디렉터리를 지정, 어떤 템플릿 엔진을 사용할지 지정.
-res.render(연결할 템플릿, {템플릿에 전달할 값}) : app.set에 지정된 값을 화면에 그리는 기능 수행

---app.js---
  //기본적인 퍼그 사용 선언시 app.js에 쓰여지는 코드
  //템플릿 디렉터리 : views
   //view engine을 이용, pug 템플릿 엔진 사용 선언
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

---request handler---
  // views 디렉터리 내부의 이름이 main인 pug 템플릿 렌더링
res.render('main', {
  // 템플릿에서 쓸 데이터인 title: '제목입니다'를 템플릿에 적용시켜 html 생성.
  title: '제목입니다',
});        

Express.js와 app.locals

-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 appName

익스프레스 설치->제네레이터 설치->퍼그 설정.

profile
나는 나의 섬이다.

0개의 댓글