Script/Node.js

[Node.js] Node.js EJS 템플릿 적용

Bogass 2025. 1. 6. 10:59

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>
  • index.ejs
    • <%- contentFor() %> : <%- %> or <%- defineContent('navbar')%> 로 정의된 영역정의된 영역에 바인딩 
      <%- contentFor('content') %>
<h1>index</h1>
​

 

저작자표시 (새창열림)