EJS 설치
- ejs와 ejs레이아웃을 같이 사용하기위해 아래 두개 라이브러리를 함께 설치
npm install ejs # ejs 템플릿엔진
npm install express-ejs-layouts # ejs 레이아웃 라이브러리
app.js 셋팅
const expressLayouts = require('express-ejs-layouts');
app.set("view engine", "ejs"); // 뷰엔진 ejs로 설정
app.use(expressLayouts); // 레이아웃 미들웨어 추가
app.set('layout', 'layout/layout'); // 레이아웃파일 설정
app.set('layout extractScripts', true); // 스크립트코드 설정
Layout
- 레이아웃 페이지 만들기
- <%- %> or <%- defineContent('navbar')%> : 영역 정의
- defineContent를 사용할경우 contentFor를 통해 정의되지 않아도 오류가 발생하지 않는다.
- <%# %> : 주석
- <% %> : 스크립트 코드
- <%= %> : 결과값 출력
- <%-include()%> : 페이지 삽입
- vscode를 사용하는경우 마켓플레이스에서 EJS language support 를 설치하면 코드를 더 깔끔하게 쓸수있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Node.js TODO</title>
</head>
<body>
<%- include('./header.ejs')%> %>
<%- defineContent('content') %>
<%- include('./footer.ejs')%>
</body>
</html>
