HTML을 조립식으로 사용하기

네비게이션 바를 보면

똑같은 모양의 navbar가 index, write, list페이지에 있다.

 

각 페이지마다 navbar 코드를 작성해도 작동은 되지만,

navbar를 수정해야 하는 경우에는 모든 페이지에서 navbar를 수정해주어야 하는 문제가 생긴다.

 

navbar를 따로 빼두고, 조립식으로 HTML을 만들어 보자.

---

ejs를 이용한다.

(ejs를 설치하지 않았다면 npm install ejs를 터미널에 입력해서 설치하고 시작하자)

 

작업폴더 내에 views폴더를 하나 만들고,

모든 페이지의 확장자를 .html에서 .ejs로 바꾼 후 views폴더로 이동시킨다.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Todo App</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="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/write">Write</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/list">List</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>

    </div>
  </nav>

그리고 navbar 코드만 잘라내서,

nav.html파일로 저장한다(views파일에 저장했다)

 

그리고, navbar가 필요한 페이지의

navbar위치에

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

이와 같이 입력해 넣으면 nav.html파일의 내용이 그대로 불러와진다.

 

이제 navbar를 수정할 일이 있을 때 navbar.html파일만 수정하면 된다.

---

app.get('/', function (req, res) {
    //res.sendFile(__dirname + '/index.html')
    res.render('index.ejs');
});

.html에서 .ejs로 바뀌었으니

server.js 에서 res.sendFile()메소드를 사용했던 것을 res.render()메소드로 바꾸는것도 잊지 말자.