파일 분할
만약 ejs 템플릿의 개수가 10개 , 20개 ... 100개가 된다고 가정해보자. 그렇다면 만약 외부 링크를 참조할 때 해당 링크의 주소가 조금이라도 바뀌게 된다면 ? 모든 템플릿을 수정해야 되는 번거로움이 발생한다. 해당 문제를 해결하기 위해 파일 분할을 해보자.
모든 템플릿에 공통적으로 사용되는 아래의 html 코드를 따로 분할하여 보관하자.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<%= name %>
</title>
<!-- public 디렉토리의 콘텐츠 전체를 static()의 인자로 제공했기 때문에 접근할 수 있다. -->
<!-- /를 넣고 사용해야한다. -->
<link rel="stylesheet" href="/app.css">
</head>
<body>partials라는 폴더를 만들어주고 해당 폴더에head.ejs템플릿을 생성한다.- 위의 코드를 해당 템플릿에 복사해서 붙여넣는다.
- 해당 코드가 존재하던 템플릿에 위
head.ejs를 불러올 수 있도록 코드를 추가해준다.
<%- include('partials/head') %>해당 코드를 추가하게 되면 partials 폴더내의 head.ejs를 참조하여 기존의 결과와 동일한 결과를 불러올 수 있으며, 만약 부분을 수정해야 할 때 해당 head.ejs 파일만 수정해주면 되기 때문에 굉장히 효율적이라고 볼 수 있다.
이 외에도, footer 를 따로 보관하여 추가해주면 웹 페이지 하단부분을 공통적으로 사용할 수 있으며, navbar와 같이 모든 페이지에 쓰이는 상단바 역시 마찬가지로 효율적으로 사용할 수 있게 된다.
