주소록 - Index, New, Create

7 actions 중 index, new, create을 구현해 봅시다.
이름, 이메일 주소, 전화번호를 받는 form을 만들어서 이 정보를 서버로 전달할 수 있게 하고(new)
서버가 이 정보를 사용해서 DB에 정보를 생성하고(create)
생성된 주소록의 이름 목록을 보여 줍니다(index).

폴더 구조

주황색은 변경된 파일, 녹색은 새로 생성된 파일, 회색은 변화가 없는 파일입니다.

Package 설치

form으로 전송된 data를 사용하기 위해서는 body-parser를 사용해야 합니다.
아래 명령어로 body-parser package를 설치합시다.

$ npm install --save body-parser

코드

// index.js

var express = require("express");
var mongoose = require("mongoose");
var bodyParser = require("body-parser"); // 1
var app = express();

// DB setting ...

// Other settings
app.set("view engine", "ejs");
app.use(express.static(__dirname+"/public"));
app.use(bodyParser.json()); // 2
app.use(bodyParser.urlencoded({extended:true})); // 3

// DB schema // 4
var contactSchema = mongoose.Schema({
  name:{type:String, required:true, unique:true},
  email:{type:String},
  phone:{type:String}
});
var Contact = mongoose.model("contact", contactSchema); //5

// Routes
// Home // 6
app.get("/", function(req, res){
  res.redirect("/contacts");
});
// Contacts - Index // 7
app.get("/contacts", function(req, res){
  Contact.find({}, function(err, contacts){
    if(err) return res.json(err);
    res.render("contacts/index", {contacts:contacts});
  });
});
// Contacts - New // 8
app.get("/contacts/new", function(req, res){
  res.render("contacts/new");
});
// Contacts - create // 9
app.post("/contacts", function(req, res){
  Contact.create(req.body, function(err, contact){
    if(err) return res.json(err);
    res.redirect("/contacts");
  });
});

// Port setting ...

...으로 표시된 부분은 이전과 변화가 없는 부분입니다.
새로 추가된 부분들을 각각 살펴봅시다.

var bodyParser = require("body-parser"); // 1

1. body-parser module를 bodyPaser 변수에 담습니다.

app.use(bodyParser.json()); // 2
app.use(bodyParser.urlencoded({extended:true})); // 3

2 & 3. bodyParser로 stream의 form data를 req.body에 옮겨 담습니다. 2번은 json data를, 3번은 urlencoded data를 분석해서 req.body를 생성합니다.
이 부분이 지금 이해가 안가시면 bodyParser로 이렇게 처리를 해 줘야 form에 입력한 data가 req.body에 object로 생성이 된다는 것만 아셔도 괜찮습니다.

// DB schema // 4
var contactSchema = mongoose.Schema({
  name:{type:String, required:true, unique:true},
  email:{type:String},
  phone:{type:String}
})

4. mongoose.Schema 함수를 사용해서 DB에서 사용할 schema object를 생성합니다. 이 형태대로 DB에 data가 저장됩니다.
name, email, phone라는 이름의 항목들을 가지고 있으며 새 항목 모두 타입은 String입니다. name은 값이 반드시 입력되어야 하며(required), 값이 중복되면 안된다(unique)는 추가 설정이 있습니다.

이 예제에서는String만 사용했지만, 다양한 type들을 설정할 수 있습니다. 나머지 사용가능한 schema type들은 mongoose 공식사이트에서 확인해 주세요.

var Contact = mongoose.model("contact", contactSchema); //5

5. mongoose.model함수를 사용하여 contact schema의 model을 생성합니다.
mongoose.model함수의 첫번째 parameter는 mongoDB에서 사용되는 콜렉션의 이름이며, 두번째는 mongoose.Schema로 생성된 오브젝트입니다. DB에 있는 contact라는 데이터 콜렉션을 현재 코드의 Contact라는 변수에 연결해 주는 역할을 합니다.

생성된 Contact object는 mongoDB의 contact collection의 model이며 DB에 접근하여 data를 변경할 수 있는 함수들을 가지고 있습니다. 현재 DB에 contact라는 콜렉션이 존재하지 않더라도 괜찮습니다. 없는 콜렉션은 알아서 생성이 됩니다.

다음으로 route설정입니다.

// Home // 6
app.get("/", function(req, res){
  res.redirect("/contacts");
});

6. "/"에 get 요청이 오는 경우 :
/contacts로redirect하는 코드입니다.

// Contacts - Index // 7
app.get("/contacts", function(req, res){
  Contact.find({}, function(err, contacts){
    if(err) return res.json(err);
    res.render("contacts/index", {contacts:contacts});
  });
});

7. "/contacts"에 get 요청이 오는 경우 :
에러가 있다면 에러를 json형태로 표시하고, 에러가 없다면 검색 결과를 받아 views/contacts/index.ejs를 render합니다.

Contact.find({}, function(err, contacts){ ... })를 살펴봅시다. 이 부분을 일반화시키면 모델.find(검색조건, callback_함수)로 나타낼 수 있습니다.

모델.find(검색조건, 콜백_함수)를 모델.find, 검색조건, 콜백_함수 세부분으로 나누어서 자세히 살펴봅시다.
- 모델.find 함수는 DB에서 검색조건에 맞는 모델(여기서는 Contact) data를 찾고 콜백_함수를 호출하는 함수입니다.
- 모델.find의 검색조건은 Object 형태로 전달되는데 빈 Object({})를 전달하는 경우(=검색조건 없음) DB에서 해당 모델의 모든 data를 return합니다.
- 모델.find의 콜백_함수는 function(에러, 검색결과)의 형태입니다(function(err, contacts){ ... } 부분). 첫번째 parameter인 에러(여기서는 err)는 error가 있는 경우에만 내용이 전달됩니다. 즉 if(err)로 에러가 있는지 없는지를 알 수 있습니다. 두번째 parameter인 검색결과(여기서는 contacts)는 한개 이상일 수 있기 때문에 검색결과는 항상 array이며 심지어 검색 결과가 없는 경우에도 빈 array[]를 전달합니다. 검색결과가 array임을 나타내기 위해 parameter이름으로 contact의 복수형인 contacts를 사용합니다.

// Contacts - New // 8
app.get("/contacts/new", function(req, res){
  res.render("contacts/new");
});

8. "/contacts/new"에 get 요청이 오는 경우 :
새로운 주소록을 만드는 form이 있는 views/contacts/new.ejs를 render합니다.

// Contacts - create // 9
app.post("/contacts", function(req, res){
  Contact.create(req.body, function(err, contact){
    if(err) return res.json(err);
    res.redirect("/contacts");
  });
});

9. "/contacts"에 post 요청이 오는 경우 :
"/contacts/new"에서 폼을 전달받는 경우입니다.
모델.create은 DB에 data를 생성하는 함수입니다. 첫번째 parameter로 생성할 data의 object(여기서는 req.body)를 받고, 두번째 parameter로 콜백 함수를 받습니다.
모델.create의 callback 함수(여기서는 function(err, contact){ ... } 부분) 는 첫번째 parameter로 error를 받고 두번째 parameter로 생성된 data를 받습니다. 생성된 data는 항상 하나이므로 parameter이름으로 단수형인 contact를 사용하였습니다.
에러없이 contact data가 생성되면 /contacts로 redirect합니다.

다음으로 view 파일들을 살펴봅시다.

두개의 페이지가 있고 두개의 partial이 있습니다. partial은 여러 페이지들에 중복되는 부분의 코드를 따로 빼 놓은 것입니다.

<!-- views/partials/head.ejs -->

<link rel="stylesheet" href="/css/master.css">
<title>Contact</title>

먼저 head tag에 들어갈 부분입니다.
css와 title을 모든 페이지가 공유하게 하였습니다.

<!-- views/partials/nav.ejs -->

<nav>
  <div>Contact Book</div>
  <ul>
    <li><a href="/contacts">Index</a></li>
    <li><a href="/contacts/new">New</a></li>
  </ul>
</nav>

페이지마다 표시될 menu부분입니다. index와 new view로 이동하는 메뉴를 가지고 있습니다.

<!-- views/contacts/index.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <% include ../partials/head %> <!-- 1 -->
  </head>
  <body>
    <% include ../partials/nav %> <!-- 2 -->

    <div class="contact contact-index">
      <h2>Index</h2>
      <ul>
        <% contacts.forEach(function(contact) { %> <!-- 3 -->
          <li>
            <%= contact.name %>
          </li>
        <% }) %>
      </ul>
    </div>
  </body>
</html>

1&2. <% include %>를 사용해서 외부 ejs(head와 nav)를 가져왔습니다.

3. contacts object에 forEach를 사용해서 코드를 반복해서 표시하고있습니다.

<!-- views/contacts/new.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <% include ../partials/head %>
  </head>
  <body>
    <% include ../partials/nav %>

    <div class="contact contact-new">
      <div class="contact-menu">
        <a href="/contacts">Back</a>
      </div>
      <h2>New</h2>
      <form class="contact-form" action="/contacts" method="post">
        <div>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" value="">
        </div>
        <div>
          <label for="email">Email</label>
          <input type="text" id="email" name="email" value="">
        </div>
        <div>
          <label for="phone">Phone</label>
          <input type="text" id="phone" name="phone" value="">
        </div>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  </body>
</html>

새로운 주소를 만드는 form입니다.
form이 submit되면 "/contacts"에 post를 요청하게 됩니다.

/* public/css/master.css */

.contact h2{
  color: tomato;
}
.contact .contact-form label{
  display: inline-block;
  width: 50px;
}

CSS 스타일링은 거의 하지 않았습니다. 일단 웹페이지의 기능을 완성한 다음 스타일링을 하도록 하겠습니다.

실행결과

nodemon으로 실행결과를 확인합시다.

$ nodemon

localhost:3000로 접속하면 자동으로 /contacts로 redirect됩니다.

처음 실행하면 생성한 자료가 없으므로 아무런 자료를 보여주지 않습니다. New 링크를 클릭합니다.

주소록을 생성할 수 있는 form이 보입니다. data를 입력하고 submit 버튼을 누릅니다.

/contacts로 redirect되고 입력한 이름이 표시됩니다.

만약 이름을 입력하지 않고 form을 submit하면 에러가 표시됩니다.

동일한 이름을 입력해도 에러가 표시됩니다.

에러의 구조가 다른 것을 볼 수 있는데, 이름이 반드시 필요한 것은 DB로 data를 보내기 전에 mongoose에서 확인해서 error를 낸 것이고, 이름의 중복확인은 DB에서 error를 내는 것이기 때문입니다.

마치며..

다음 강의에서는 7 actions의 나머지 show, edit, update, destroy를 추가하겠습니다.