입문 2주차 5. Mongoose Schema 설계

1. [할 일 메모 사이트]의 MongoDB를 설정합니다.
2. [할 일 메모 사이트]의 기능을 바탕으로 모델과 스키마를 설계합니다.

01. [할 일 메모 사이트] - Mongoose Schema 설계하기

1) MongoDB 연결 준비

mongoose를 사용하여 MongoDB에 데이터를 저장할 것입니다.

이를 위해 Mongoose의 공식 문서를 따라 schemas 폴더를 생성하고, 하위 파일인 index.js를 아래처럼 준비합니다

 

데이터베이스의 이름은 todo_memo
MongoDB의 URL은 이전에 대여한 MongoDB Atlas에서 가져옵니다.

// schemas/index.js  mongoose 연결

import mongoose from "mongoose";

const connect = () => {
  mongoose
    .connect(
      //대여한 ID, Password, 주소에 맞게끔 수정해주세요!
      "mongodb+srv://Introduction_nodejs:Introduction_nodejs@introduction-mongo.cewv5.mongodb.net/?retryWrites=true&w=majority&appName=Introduction-mongo",
      {
        dbName: "todo_memo", // todo_memo 데이터베이스명을 사용합니다.
      }
    )
    // 연결에 성공했을 때
    .then(() => console.log("MongoDB 연결에 성공하였습니다."))
    // 연결에 실패했을 때
    .catch((err) => console.log(`MongoDB 연결에 실패하였습니다. ${err}`));
};

// 서비스 중에 에러 발생
mongoose.connection.on("error", (err) => {
  console.error("MongoDB 연결 에러", err);
});

export default connect;

// app.js    mongoose 연결

import express from "express";
import connect from "./schemas/index.js";

const app = express();
const PORT = 3000;

connect();

// Express에서 req.body에 접근하여 body 데이터를 사용할 수 있도록 설정합니다.
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// static Middleware, express.static()을 사용하여 정적 파일을 제공합니다.
app.use(express.static("./assets")); // ./assets폴더를 바탕으로 서빙을 할 것입니다.

const router = express.Router();

router.get("/", (req, res) => {
  return res.json({ message: "Hi!" });
});

app.use("/api", router);

app.listen(PORT, () => {
  console.log(PORT, "포트로 서버가 열렸어요!");
});

2) 할 일 메모사이트 Schema 설계

◆ [할 일 메모 사이트]에서 구현할 기능

1. 할 일 추가하기
2. 할 일 목록 보기
3. 할 일 내용 변경하기
4. 할 일 순서 변경하기
5. 할 일 완료하기
6. 할 일 완료 해제하기

MongoDB를 도입하기 위해 필요한 데이터와 형식을 정의하는 것은 스키마(Schema) 설계의 가장 중요한 요소입니다. 

스키마 설계는 추후에 수정될 가능성을 미리 예측하고, 고려하여 설계해야 시간이 지났을 때, 적은 리소스만으로도 해당하는 내역을 반영할 수 있습니다.

이제 할 일 메모 사이트의 기능을 바탕으로 필요한 데이터를 도출해봅시다

1. 할 일 추가하기, 목록 보기, 내용 변경 기능:
   ● 할 일을 구현하기 위해선, 내가 어떠한 할 일이 있는지 내용이 필요하겠죠?
   ● 여기서, 해야 할 일(value)이라는 문자열(String) 형식의 필드(Field)를 정의하겠습니다.
2. 할 일 순서 변경하기 기능:
   ● 할 일의 순서를 구현하기 위해선, 할 일이 몇번째 해야할 일인지 정의가 되어 있어야합니다.
   ● 여기서, 해야 할 일의 순서(order)라는 숫자(Number) 형식의 필드(Field)를 정의하겠습니다.
3. 할 일 완료하기, 완료 해제하기 기능:
   ● 마지막으로, 할 일을 완료했다면, 언제 완료했는지 시간을 확인할 수 있어야할 것입니다.
   ● 여기서, 완료 날짜(doneAt)라는 날짜(Date) 형식의 필드(Field)를 정의하겠습니다.

최종적으로 할 일(Todo) 스키마의 요소들은 아래와 같습니다.

1. 해야 할 일(value):
   ● 할 일의 내용을 나타내는 문자열(String) 형식의 데이터입니다.
2. 해야 할 일의 순서(order):
   ● 할 일의 순서를 나타내는 숫자(Number) 형식의 데이터입니다.
3. 완료 날짜(doneAt):
   ● 할 일이 언제 완료되었는지 나타내는 날짜(Date) 형식의 데이터입니다.
   ● 완료되지 않았다면 null, 완료 되었다면 날짜(Date) 형식의 데이터를 가지게됩니다.

6가지의 기능을 바탕으로 실제 [할 일 메모 사이트]의 구성 요소를 정의할 수 있었습니다.

3) mongoose - Todo 모델 작성하기

MongoDB에 연결 할 준비와 [할 일 메모 사이트]의 구성 요소또한 모두 정의 되었으니, 이제 Todo 스키마와 모델을 작성하고 기능을 구현해봅시다!
[코드스니펫] Todo 모델, schemas/todo.schema.js
TodoSchema.virtual 과 set 부분은 프론트엔드 처리를 위한 코드입니다.
백엔드의 비즈니스 로직 작성에는 직접적으로 관련되지 않으니, 이 부분에 크게 신경 쓰실 필요는 없습니다! 😎​

// schemas/todo.schema.js

// 활용 : 몽구스의 스키마 생성, 모델 생성
import mongoose from "mongoose";

// TodoSchema : 작성되고 있는 스키마
const TodoSchema = new mongoose.Schema({
  value: {
    // 해야 할 일
    type: String,
    required: true, // value 필드는 필수 요소입니다.
  },
  order: {
    // 해야할 일 순서
    type: Number,
    required: true, // order 필드 또한 필수 요소입니다.
  },
  doneAt: {
    // 완료날짜
    type: Date, // doneAt 필드는 Date 타입을 가집니다.
    required: false, // doneAt 필드는 필수 요소가 아닙니다. (미완은 값이 없음)
  },
});

// 프론트엔드 서빙을 위한 코드입니다. 모르셔도 괜찮아요!
TodoSchema.virtual("todoId").get(function () {
  return this._id.toHexString();
});
TodoSchema.set("toJSON", {
  virtuals: true,
});

// TodoSchema를 바탕으로 Todo모델을 생성하여, 외부로 내보냅니다.
export default mongoose.model("Todo", TodoSchema);
schemas / todo.schema.js;

[할 일 메모 사이트]의 MongoDB 설정과 monoose 스키마, 모델 정의까지 완료하였습니다.

다음에는 실제로 [할 일 메모 사이트]의 CRUD를 구현합니다.