[Node] express 레이아웃 express-ejs-layouts 사용하기

node에서 express와 ejs 템플릿 엔진을 이용해 웹 프로젝트를 하나 만들려고

기본적인 틀을 만들면서 layout 관련해서 구글링을 통해 이런저런 글을 봤는데

header나 footer 파일을 따로 만들고 include를 사용해서 파일마다 소스를 넣어서 만드는 글이 대부분이었다.

이런 식으로 파일을 따로 만들어두고 작업하는 페이지마다 include를 시키는...

하지만 내가 원하는 건 

이런 식이라면 header와 footer를 유지한 채로 body부분만 변경시키는 그런 걸 원했는데

express-ejs-layouts라는 걸 쓰면 된다는 걸 찾았다.

처음에 이거 봤는데 이해를 못해서... 내가 원하는 게 맞나?? 하다가 한번 써봤는데 맞았다.

 

우선 express-ejs-layouts를 설치한다.

www.npmjs.com/package/express-ejs-layouts

express-ejs-layouts

여기를 참고!

 

그리고 이제 app.js에다 다음과 같이 소스를 추가하면 된다.

line 2, 9, 12, 13 이렇게 4줄 추가

12 : views/layout.ejs를 기본 레이아웃으로 설정하고 <%- body %> 부분에 렌더링 된 html 문자열이 들어감

13 : 렌더링된 html에서 모든 script 태그를 추출해서 <%- script %> 부분에 들어감

이렇게 한 뒤 layout.ejs를 만들어서 아래처럼 해주면 된다.

layout.ejs 소스 일부분

이렇게 해주면 이제 헤더와 푸터를 따로 만들어서 작업하는 페이지마다 include 시키는 작업을 안 해도 된다..

내가 테스트해본 소스로 확인해보면 이렇다.

프로젝트 구조

메인 페이지 접속 시 index.ejs가 호출되는데

layout.ejs 안에 <%- body %> 여기로 index.ejs 안에 있는 html 소스가 렌더링 된다

index.ejs

그리고 아까 app.js에서 설정한 app.set("layout extractScripts", true); 이걸로 인해 index.ejs 안에 있는 script 문은 

layout.ejs 안에 <%- script %> 여기로 렌더링 된다.

이런 식으로 이제 layout.ejs안에 소스는 유지된 상태로 다른 페이지를 불러올 때 <%- body %> 부분에 렌더링 되게 된다.

 

페이지마다 include 할 필요 없고, layout.ejs에서 <%- body %> 부분에 들어갈 소스만 작성하면 되기 때문에

페이지 파일을 만들어서 거기에 들어갈 소스만(위 index.ejs처럼) 작성하면 끝!

페이지 이동 확인해보려고 만든 test.ejs

<%- body %>에  test.ejs가 들어간 화면

header와 footer 파일을 만들어서 layout.ejs에 include 시킨 후 페이지 파일들을 만들어서 작업하면 될 것 같다.