12. Express-템플릿 엔진(pug)

1. 정의

템플릿 엔진이란? 

html code를 최소화시키도록 도와주는 도구이다. 정적인 파일과 동적인 파일의 장단점을 결합시켰다. 클라이언트 측 브라우저는 HTML 템플릿, JSON / XML 데이터 및 템플릿 엔진 라이브러리를 서버에서 로드합니다. 템플릿 엔진은 클라이언트의 브라우저에서 템플릿과 데이터를 사용하여 최종 HTML을 생성합니다. 그러나 일부 HTML 템플릿은 데이터를 처리하고 서버 측에서 최종 HTML 페이지를 생성합니다.

2. 템플릿엔진(pug) 설치 및 사용

• 설치

터미널에서 템플릿 엔진 설치할 폴더로 들어간다. 그 다음 npm install pug --save 를 입력후 설치를 하면, package.json파일에 dependecies에 추가가 된다.

• 템플릿엔진 사용

9. template_engine.js 만들고, 위와 같이 코드를 입력해보자.

첫번째 코드의 의미는 템플릿 엔진을 'pug'라는 템플릿 엔진을 사용한다는 의미이다. 두번째 코드는 템플릿 코드가 있는 폴더를 정해주는것이다.

다음 위의 코드처럼 router를 만들어준다. 그리고 위와같이 코드를 입력한다.

js파일이있는 폴더에 views라는 폴더를 만들고, temp.pug 파일을 만든 후 html만 입력해보자.

서버를 키고, router를 설정해준 주소로 들어가면, 빈화면이 뜰것이다. 마우스 오른쪽 클릭 후, 페이지 소스 보기를 눌러 보자.

우리가 템플릿파일에 입력한 html 태그가 화면처럼 뜬다.

3. 템플릿엔진(pug) 기본문법

temp 파일을 위와같이 입력하고서, 서버를 끄고 다시 켜서, localhost:3000/template로 접속하자. 그리고 마우스 오른쪽 클릭 후, 페이지 소스보기를 누르면 위와 같이 나온다.

코드를 저렇게 바꾸고, 반복해서 다시접속해보면 이렇게 나온다.

줄바꿈이후, 간격을 주면 상위태그안에 하위태그로 포함되는것을 알 수 있다.

태그안에 글을 작성할때는, 스페이스로 한칸뛰고 입력하면, 글로 전환되는것을 알 수 있다.

자바스크립트 for문을 사용하기 위해선 for앞에 -를 붙여야하고, 변수를 사용할때는 #{변수명}을 사용해야한다. 그리고 변수를 담아주기 위해서, js파일에서 render하는 부분에 객체로 key : value 페어로 변수명과 변수에 담을 값을 설정해주어야한다.

자세한 문법은  pug 공식문서에 나와있다.

4. 정리

예전에는 Jade란 이름을 썻으나, 현재는 pug로 바뀌었다.

express에서 템플릿엔진을 사용할땐, app.set('view engine', 템플릿 엔진명), app.set('views', 템플릿파일이 있는 경로) - 파일경로를 지정해주지 않으면 default로 views이다.

템플릿 엔진들의 문법들은 템플릿 엔진에 맞게 공식문서를 통해 익히자!

  

출처 - 생활코딩, 튜토리얼, express공식문서