html 조립식으로 만들기

해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다.

 

 

웹사이트를 만들다가 다른 페이지에서 같은 UI를 만들게 되는 경우가 생긴다. (예를 들면 nav)

이런 경우 해당 UI를 변경하려면 각각의 페이지에서 모두 변경해야하는 불편함이 생긴다. 

 

따라서 이런 불편함을 해결하기 위해서는 ejs 특유의 문법을 이용해서 하나의 html 파일을 만들고 해당 html을 include 해주면 된다.

 

1. 새로운 html 파일만들기

 

공통적으로 쓰이는 UI 코드를 복사해서 새로운 html 파일을 만든다.

🚨 주의할 점 🚨

1. ejs 파일에서만 적용된다.
2. ejs 파일에서만 적용되므로 view 폴더 내부에 해당 파일이 있어야한다.

 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="http://localhost:8080">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://localhost:8080/pet">pet</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://localhost:8080/beauty">beauty</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://localhost:8080/todolist">todo 작성하기</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="http://localhost:8080/list">todo 목록보기</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

 

 

 

2. ejs 문법으로 해당 ui가 위치하는 곳에 아래의 코드를 작성한다. (이전에 html 파일은 ejs로 변경되어야함)

 

<%- include('파일명.html')  %>