7.6.5 쿼리 수행하기

    조금 전에 배웠던 쿼리로 CRUD 작업을 해봅시다. 모델에서 데이터를 받아 페이지를 렌더링하는 방법과 JSON 형식으로 데이터를 가져오는 방법 두 가지를 알아보겠습니다.

    간단하게 사용자 정보를 등록하고 사용자가 등록한 댓글을 가져오는 서버입니다. 먼저 다음과 같이 views 폴더를 만들고 그 안에 sequelize.html 파일과 error.html 파일을 만듭니다. 4.2절의 restFront.html처럼 AJAX를 사용해 서버와 통신합니다. 직접 입력하기에는 코드양이 상당히 많습니다. 프런트엔드 코드가 중요한 것은 아니므로 https://github.com/zerocho/nodejs-book에서 코드를 복사하는 것을 권장합니다.

    views/sequelize.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>시퀄라이즈 서버</title>
        <style>
          table { border: 1px solid black; border-collapse: collapse; }
          table th, table td { border: 1px solid black; }
        </style>
      </head>
      <body>
        <div>
          <form id="user-form">
            <fieldset>
              <legend>사용자 등록</legend>
              <div><input id="username" type="text" placeholder="이름"></div>
              <div><input id="age" type="number" placeholder="나이"></div>
              <div><input id="married" type="checkbox"><label for="married">결혼 여부</label></div>
              <button type="submit">등록</button>
            </fieldset>
          </form>
        </div>
        <br>
        <table id="user-list">
          <thead>
          <tr>
            <th>아이디</th>
            <th>이름</th>
            <th>나이</th>
            <th>결혼 여부</th>
          </tr>
          </thead>
          <tbody>
            {% for user in users %}
            <tr>
              <td>{{user.id}}</td>
              <td>{{user.name}}</td>
              <td>{{user.age}}</td>
              <td>{{ '기혼' if user.married else '미혼'}}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        <br>
        <div>
          <form id="comment-form">
            <fieldset>
              <legend>댓글 등록</legend>
              <div><input id="userid" type="text" placeholder="사용자 아이디"></div>
              <div><input id="comment" type="text" placeholder="댓글"></div>
              <button type="submit">등록</button>
            </fieldset>
          </form>
        </div>
        <br>
        <table id="comment-list">
          <thead>
          <tr>
            <th>아이디</th>
            <th>작성자</th>
            <th>댓글</th>
            <th>수정</th>
            <th>삭제</th>
          </tr>
          </thead>
          <tbody></tbody>
        </table>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="/sequelize.js"></script>
      </body>
    </html>

    views/error.html

    <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.