[Node.js / MongoDB] Bootstrap 을 이용해 빠르게 UI 개발해보기

💡 실습 포인트!

• Node.js / MongoDB 강의가 HTML / CSS 를 중점적으로 다루는 수업이 아니므로, Bootstrap 을 이용하여 기본적인 구조를 다듬는 것만 빠르게 진행했다.

---

💜 Bootstrap 으로 글쓰기 페이지(write.html) 만들기

• 우선, 본격적으로 레이아웃을 만들기 전에 Bootstrap 에서 starter template 을 먼저 복사해와서 html 파일에 붙여넣어주었다.
• 이후, Bootstrap 의 Navbar 양식과 form 양식을 이용하여 간단한 레이아웃을 만들었다.

🤍 Navbar 만들기

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">Todo App</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/write">Write</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">임시</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

🤍 글쓰기 form 만들기

<h4 class="container mt-5"><strong>글쓰기</strong></h4>
<div class="container mt-4">
  <form>
    <div class="form-group my-4">
      <label class="mb-2">오늘의 할일</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group my-4">
      <label class="mb-2">날짜</label>
      <input type="text" class="form-control">
    </div>
    <button type="submit" class="btn btn-danger fw-bold">Submit</button>
  </form>
</div>

---

💜 JavaScript 작성하기

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

• 서버에서 HTML 파일전송해보는 실습을 할 때 사용한 코드 양식 그대로 사용하되, 변경이 필요한 부분만 수정해주었다.