Node.js, MongoDB 로 웹서비스 만들기 - 14. 메뉴(navbar)

지금껏 로그인하거나 마이페이지를 가거나 할 때

직접 url 에 입력해서 이동하거나 간단하게 버튼을 급조해 사용했는데 

navbar 를 만들어보자

<nav class="navbar navbar-light bg-light px-3">
    <a class="navbar-brand" href="/">NFP</a>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" href="#" style="color: black;">임시</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/member/login" style="color: black;">로그인</a>
        </li>
    </ul>
</nav>

bootstrap 을 이용해 간단하게 구현했는데 

문제는 이걸 모든 페이지에 다 적용하려면 파일마다 다 복붙해야된다는거다. 

만약 메뉴 수정이라도 한다면 또 하나하나 찾아서 다 수정해야함

 

하지만 ejs 의 include 기능을 이용하면 해결된다. 

일단 위 navbar 에 해당하는 코드를 파일로 따로 빼준다. 

나는 nav.html 로 만들었음

이제 기존에 코드가 있던 부분에 

<%- include('nav.html') %>

위 코드를 적어주면 nav.html 에 있는 내용이 나온다. 

* views 폴더 안에 위치시켜야함

 

다른 페이지들에도 include 코드만 다 작성해놓으면 나중에 navbar 를 수정할 일이 생겼을 때 

nav.html 만 열어서 수정하면 된다.