node.js ejs 뷰엔진으로 공통 레이아웃 적용하기 - include 사용

안녕하세요 엘빈입니다. node.js를 사용하여 웹개발을 진행하다 보면 사실 html 파일을 이용하는 경우가 드뭅니다. html 웹문서는 웹개발에 가벼운 문서로 유명하지만 정적인 페이지로 서버를 이용하는 웹개발에서는 변형에 한계가 있기 때문입니다. node.js에서는 동적인 페이지 개발을 위해 뷰엔진 모듈을 사용하도록 권고하는데 저같은 경우 ejs 모듈을 사용하고 있습니다. 이번 포스팅에서는 ejs 뷰엔진을 통해 공통 레이아웃 적용 방법에 대해서 알아보겠습니다.

 ejs 모듈로 공통 레이아웃 적용하기

사실 ejs 모듈을 정식적으로 배운것은 아니고 인터넷에서 검색 도중 알게되어 사용하게 되었습니다. 그러다보니 지금까지 유용한 모듈화 기능을 활용하지 못하다가 최근에 알게되어 사용하게 되었고 대단히 편리한 기능이라고 생각되어 이렇게 포스팅으로 정리합니다.

모듈화 기능은 웹페이지 UI에서 자주 사용하는 부분을 공통 레이아웃으로 지정하여 소스 코드를 중복시키지 않고 하나의 탬플릿으로 나누어 사용할때 ejs 문법을 통해 불러들이는 기능을 말합니다. 

위처럼 폴더 구분을 해놓았습니다. 먼저 views에 ejs 파일들이 있습니다. common 폴더에는 공통 레이아웃 파일들을 정리해두기로 합니다. 저같은 경우 상단 컨테이너 즉 헤더 부분을 공통 레이아웃으로 지정할 것입니다.

    <div class="container">

        <!--상단 컨테이너 시작-->

            <%- include ("./common/header") %>

            <!--상단 컨테이너 끝-->

그리고 이런식으로 include를 통해 경로를 지정하고 파일 이름을 넣으면 됩니다. 그러면 header 부분 소스 코드가 그대로 이 안에 삽입됩니다.

참고로 모듈화 된 파일 안에 html 태그나 body 태그 등을 무조건적으로 넣을 필요 없습니다. 그저 삽입할 코드 그래도 넣어주면 됩니다.