Colin's Blog
[Meteor] Meteor_Project_AdressBook 1

Meteor_Project_AdressBook

주소록 만들기 (과정)

  1. 주소록 프로젝트 생성
  2. 미티어 컬렉션 생성
  3. 주소록 초기 데이터 생성
  4. 주소록 목록 구현하기
  5. 주소록 삭제 템플릿 작성하기
  6. 주소록 등록 템플릿 작성하기
  7. 주소록 수정 구현하기
  8. 입력 데이터 검증하기
  9. 보안 적용하기
  10. 페이징 구현하기



주소록 프로젝트 생성

프로젝트 생성 후 기본 설정은 다음 순서로 한다.


프로젝트 생성 -> 기본 생성 파일 삭제 -> 프로젝트 기본 폴더 생성

프로젝트 생성은 프로젝트 폴더를 저장할 폴더를 만들고 만들어진 폴더에 meteor create 프로젝트명으로 프로젝트 폴더를 만든다.
프로젝트를 생성하면 프로젝트 이름으로 된 폴더에 파일이 자동으로 생성되어 있다.
그렇다 meteor create 프로젝트명령은 해당 프로젝트와 같은 이름의 폴더, 파일 뿐만 아니라
미티어를 실행할 수 있는 기본 파일과 설정 파일을 생성한다.

자동 생성된 폴더에서 파일의 역할을 다음과 같다.

프로젝트 생성 및 파일 저장 시 주의할 점

1. 프로젝트 결로 및 프로젝트 이름을 한글로 사용하지 않을 것
   미티어 프로젝트를 생성할 때 한글이 들어가면 실행할 때 에러가 발생할 수 있다.
   윈도에서는 미티어 프로젝트를 C드라이브안에 폴더를 만들고, 만든 폴더에서 meteor create 명령을 사용할 것을 추천한다.
   macOS나 리눅스 사용자는 홈 디렉토리안에 폴더를 만들고, 만든 폴더에서 미티어 프로젝트를 생성하도록 하자

2. *.js, *.html 파일은 UTF-8로 편집 및 저장할 것
   윈도용 에디터 중에는 문자 집합이 간혹 EUC-KR 설정된 경우가 있다.
   미티어와 몽고DB는 UTF-8을 사용하므로 UTF-8로 맞춰 주자.

프로젝트와 같은 이름의 폴더 안에서 생성된 파일을 확인하였으면, lib 이라는 폴더를 생성하도록 한다.
lib 폴더에는 서버와 클라이언트에서 공용으로 쓸 기능을 추가할 것이다.
lib 폴더를 생성했다면 이제 코드를 작성할 준비가 되었다.

미티어는 폴더 이름에 따라서 코드가 실행될 위치를 결정한다.

클라이언트에서 사용하는 HTML, JS, CSS 파일을 client 폴더,
서버에서 실행할 JS파일은 server 폴더,
클라이언트와 서버가 공통으로 사용하는 코드는 lib 폴더에 작성한다.



미티어 컬렉션 생성

몽고 DB 는 미티어의 내장 데이터베이스이며, 이를 다루기 위한 필수 오브젝트가 미티어 컬렉션이다.
우리가 만들 프로젝트에서 대부분의 코드가 이 컬렉션을 주로 사용한다고 해도 과언이 아니다.

컬렉션과 도큐먼트

미티어 컬렉션은 미티어에서 기본으로 제공하는 오브젝트를 말한다.
미티어에서 몽고DB의 데이터를 다루는 가장 기본적인 메서드들을 가지고 있으며,
차차 익숙해져야 할 대상이기도 한다.
미티어 컬렉션은 몽고DB 컬렉션과 1:1로 매핑된다.
몽고DB 컬렉션에 JSON 도큐먼트가 저장되므로 몽고DB를 도큐먼트 데이터베이스라고 부른다.
따라서 미티어 컬렉션이 다루는 대상도 결국 몽고DB에 있는 JSON 도큐먼트이다.

lib 폴더 밑에 collection.js 파일을 생성한다.
생성한 파일을 열어서 아래처럼 컬렉션을 선언한다.
미티어 컬렉션명 = new Mongo.Collection(몽고DB 컬렉션명);
위 코드에서 Mongo.Collection 메소드는 new 키워드와 함께 사용하며,
몽고 DB 의 실제 컬렉션명을 입력받아 해당 컬렉션을 제어할 수 있는 미티어 컬렉션을 반환한다.

컬렉션명 대소문자의 관례

몽고DB 컬렉션명은 소문자로 쓰고 미티어 컬렉션명의 시작은 대문자로 한다.
둘 이상의 단어로 구성된 컬렉션은 두 번째 단어부터 각 단어의 첫 글자를 대문자로 작성하기로 한다.



주소록 초기 데이터 생성

주소록에 등록하는 기능이 아직 없으므로 리스트 코드를 작성하기 전에 초기 데이터를 생성해야 한다.
몽고 DB 의 컬렉션에 연결된 미티어 컬렉션을 이용하여 우리가 사용할 초기 데이터를 입력하는 코드로 작성해 보겠다.(fixture 데이터 작성)

주소록 초기 데이터 삽입을 위한 작업순서
컬렉션 선언 - collection.js -> 초기 데이터 작성 - fixture.js -> 미티어 최초 구동 시 - insert - fixture.js

앞에서 컬렉션은 선언했으니 이번에는 초기 데이터를 넣는 코드를 작성해보자
server/fixture.js 파일 생성
컨렉션에 등록될 수소록을 fixtures 오브젝트 배열 변수로 선언한다. (배열 변수는 복수형이므로 주의)

// 초기 데이터 작성
let fixtures = [
  {
    name: "moong2",
    phone: "010-****-3**8",
    email: "dlrm****7@gmail.com",
    company: "Woowa Brothers Corp",
    birthday: "1990/07/22"
  },
  {
    name: "min_zzz",
    phone: "010-****-8**0",
    email: "bmj****@naver.com",
    company: "Woowa Brothers Corp",
    birthday: "19**/03/09"
  },
  {
    name: "dilcheck",
    phone: "010-****-4**5",
    email: "dil****@gmail.com",
    company: "blocko corp",
    birthday: "19**/12/23"
  },
  {
    name: "graceLee",
    phone: "010-****-4**5",
    email: "l****e@nate.com",
    company: "206meat",
    birthday: "19**/02/25"
  },
  {
    name: "mia",
    phone: "010-****-4**5",
    email: "ks****7@naver.com",
    company: "206meat",
    birthday: "19**/02/05"
  }
];

// Meteor.startup 메소드는 실행될 구문을 함수 형태(콜백 함수)로 전달받아 미티어를 실행할 때 1번만 실행된다.
// 따라서 데이터가 없으면(AddressBook.find().count()의 반환값이 0이면)
// AddressBook.insert 메소드를 사용해 fixture 배열의 오브젝트를 하나씩 생성했다.

Meteor.startup(() => {
  if (AddressBook.find().count() === 0) {
    console.log("데이터가 존재하지 않습니다. fixture 데이터를 입력합니다.");
    for (let i = 0, len = 10; i < len; i++) {
      AddressBook.insert(fixtures[i]);
    }
  }
});

초기 데이터가 잘 들어갔을지 확인을 위해서 데이터베이스를 확인해보자.
몽고 쉘을 사용하여 확인할 수 있다.
meteor 가 구동되고 있는 콘솔말고 하나더 콘솔을 열어서 meteor mongo 명령어를 실행한다.
그럼 다음과 같이 몽고 DB 프롬프트가 표시된다.
이 프롬프트는 몽고 DB 자체에서 제공하는 몽고셸이다.

leekeunhwan@Leekeunhwanui-MacBook-Pro  ~/meteor_study_repo/meteor_strudy  meteor mongo
MongoDB shell version v3.4.10
connecting to: mongodb://127.0.0.1:3001/meteor
MongoDB server version: 3.4.10
meteor:PRIMARY>

3001 번 포트로 meteor 데이터베이스에 접속했음을 알 수 있다.
이제 이 몽고셸에 db.adressBook.find()라는 명령어를 입력하고 엔터를 누르면
다음과 같은 화면을 확인할 수 있다.

{ "_id" : "4wSfbQoqje8bm4wmC", "name" : "moong2", "phone" : "010-****-3**8", "email" : "dl*****ks7@gmail.com", "company" : "Woowa Brothers Corp", "birthday" : "19**/07/22" }
{ "_id" : "6QyNKnxWHkQSwtq5f", "name" : "min_zzz", "phone" : "010-****-8**0", "email" : "b*****2@naver.com", "company" : "Woowa Brothers Corp", "birthday" : "19**/03/09" }
{ "_id" : "LTiKiv8w6daWjJjWH", "name" : "dilcheck", "phone" : "010-****-4**5", "email" : "d******k@gmail.com", "company" : "blocko corp", "birthday" : "19**/12/23" }
{ "_id" : "GDhsqH5g8F2CeQ2rY", "name" : "graceLee", "phone" : "010-****-4**5", "email" : "l****e@nate.com", "company" : "206meat", "birthday" : "19**/02/25" }
{ "_id" : "CcbMNGLhkc5RF5iC6", "name" : "mia", "phone" : "010-****-4**5", "email" : "k*****7@naver.com", "company" : "206meat", "birthday" : "19**/02/05" }
meteor:PRIMARY>

몽고 DB 는 JSON 기반이며, 앞에서 넣은 JSON 데이터가 성공적으로 들어간 것을 볼 수 있다.
픽스처 데이터 생성은 성공이다.

db.addressBook.find() 알아보기

몽고DB 콘솔은 자바스크립트 콘솔이다. 우리가 데이터를 저장하는 컬렉션은 db 오브젝트의 하위 오브젝트다.
따라서 db.addressBook 형태로 접근할 수 있다. 모든 컬렉션 오브젝트는 데이터를 조회할 수 있는 find 메소드를 갖고 있다.
따라서 몽고DB 콘솔에서 db.컬렉션이름.find() 형태로 실행하면 데이터를 조회할 수 있다.

몽고DB의 데이터를 삭제하거나 초기화하는 방법

몽고 셸에서 삭제 명령을 실해앟면 몽고DB에 입력된 데이터를 모두 삭제할 수 있다.

컬렉션 데이터 삭제
meteor:PRIMARY> db.addressBook.remove({});
WriteResult({ "nRemoved" : 10 })

미티어 실행을 중지하고 미티어 초기화 명령을 사용하면 데이터를 초기화할 수 있다.
$ meteor reset
단, 초기화는 모든 컬렉션의 테스트 데이터를 초기화하므로 개발 환경에서만 사용해야 한다.
© 2018 Colin. All rights reserved.