Express - 템플릿 엔진 설치

Express - 템플릿 엔진 설치

이번에는 템플릿 엔진이란 것을 설치해보자.

템플릿 엔진이란 HTML 템플릿과 프로그래밍 언어를 서로 결합시키기 위해 필요한 도구인 것 같다.

예를 들면 Java의 경우 Class파일과 HTML파일을 연결짓고 필요한 데이터들을 상호 송신하기 위해선 JSP라는 스크립트 언어가 사용된다.

이와 같이 Node.js의 서버 언어와 HTML언어를 연결짓고 필요한 데이터들을 송신시키기 위해 템플릿 엔진을 사용할 수가 있다.

아래의 그림을 보자.

좌측은 "pug"라는 템플릿 엔진을 이용해서 HTML 템플릿을 생성한 것이다.

기존에 알고 있었던 HTML 문법하고는 다르지만 HTML 템플릿을 생성할 수 있다는 것을 알 수가 있다.

 템플릿 엔진 설치하기

템플릿 엔진인 pug를 설치해보자.

Express에서는 템플릿 엔진으로 pug를 권장해주고 있다.

Express 사이트에 접속해서 안내서의 템플리트 엔진 사용 메뉴를 클릭하자.

Express에서는 템플릿 엔진을 설치하는 방법을 설명해주고 있다.

가장 먼저 cmd를 통해 pug를 설치해보자.

npm install pug --save를 입력하면 pug 템플릿 엔진이 설치된다.

 pug 템플릿 엔진 사용해보기

pug를 설치했으니 이제 내가 작성한 Express 웹 애플리케이션에 연동하고 이를 사용해보자.

Express 사이트에서는 pug를 설치하고 그것을 어떻게 Express 웹 애플리케이션에 설정하는지 알려주고 있다.

set()함수를 이용해서 템플릿을 관리할 폴더 경로를 지정해준다. => set('views', '템플릿 경로')

그리고 set()함수를 이용해 어떠한 템플릿 엔진을 사용할 것인지 지정해준다. => set('view engine', '엔진 명')

예제를 통해 우리가 사용할 템플릿 엔진을 지정해주고 템플릿을 관리할 폴더도 지정해주자.

그리고 템플릿 폴더도 만들어주자.

 pug템플릿 생성 및 사용

설정이 완료되었으니 이제 pug 템플릿을 생성하고 사용해보자.

Express 홈페이지에선 예제도 보여주고 있다.

이를 참고해서 우리도 직접 코드를 작성해보자.

"get()"함수를 통해 "/template"으로 사용자로부터 요청이 들어오면 익명함수를 실행시킨다.

그리고 익명함수 안에는 response의 "render()"함수를 이용한다.

render함수에 인자로 ''템플릿 파일, {템플릿에 전달할 데이터 객체}"를 작성한다.

여기까지 작성하고 이제 템플릿을 생성하자.

views 폴더 하위에 "temp.pug"라는 명으로 파일을 생성한다.

그리고 이 파일에 아래의 코드를 작성하자.

HTML태그를 위와 같이 좀 더 간결하게 작성할 수 있다.

그리고 "render()"함수에서 인자로 작성했던 데이터 객체를 원하는 위치에 "= 변수명"으로 데이터를 호출할 수 있다.

 실행

우리는 템플릿을 작성했고 서버 데이터를 템플릿으로 전달하고 템플릿에서 사용하는 코드를 작성했다.

이제 서버를 실행시키고 정말로 데이터가 전달되고 HTML템플릿으로 렌더링이 되는지 확인해보자.

node app.js로 서버를 실행시킨다.

그리고 "localhost:9000/template"으로 접속해보자.

우리가 서버에서 작성했던 title과 message내용이 HTML화면으로 출력되는 것을 볼 수 있다.

키보드에서 F12키를 눌러서 개발자 툴을 띄워보면 HTML템플릿으로 렌더링된 것도 알 수가 있다.