Meteor_Project_AdressBook

주소록 목록의 구현 순서

파일 생성
뷰 메인 작성 (main.html)
뷰 작성하기 (addressList.html)
헬퍼 구현 (addressList.js)
부트스트랩 적용
이름으로 정렬하기 (addressList.js)

우선 HTML 에 미티어 템플릿을 사용해 뷰를 작성하고,
이어서 해당 뷰에 데이터를 제공하는 템플릿 헬퍼(Template.helper)를 작성해보자

client 에 addressList.html, addressList.js 를 생성하기

주소록 목록 뷰 작성하기

main.html 은 우리가 사용하는 애플리케이션의 메인 화면이다.
<html> 태그도 없는 불완전한 HTML 문서이지만 신경쓰지 않아도 된다.
미티어는 빌드할 때 HTML 에 필요한 나머지 부분을 알아서 채운 후 클라이언트가 접속할 때 전송해준다.
따라서 <head>와 <body>안에만 코드를 작성하면 된다.

client/main.html

<head>
  <title>Address Book</title>
  <!--html이랑 동일하게 제목을 써준다.-->
</head>

<body>
  
  <!--addressList 템플릿이 들어갈 자리라는 의미-->
</body>

미티어는 HTML 템플릿 문법으로 스페이스바를 사용하여 뷰를 작성한다.
모든 뷰는 <template> 태그 아래에 작성되며, 작성된 HTML을 DOM으로 렌더링하는 부분은
블레이즈 템플릿 엔진을 사용한다.
블레이즈 엔진은 스페이스 바에서 사용할 데이터를 제공한다.
또한 DOM에서 발생한 이벤트도 관리한다.

client/main.js

import { Meteor } from "meteor/meteor";

Meteor.startup(() => {
  // 클라이언트 어플리케이션이 처음 실행될 때 시작될 코드
});

client/addressList.html

<template name="addressList">
    <table>
        <thead>
            <tr>
                <th>이름</th>
                <th>전화번호</th>
                <th>이메일</th>
                <th>회사</th>
                <th>생일</th>
            </tr>
        </thead>
        <tbody>
         
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</template>