backend part 👨‍💻

✅ todo-backend/server.js

1. 모듈 및 환경 변수 설정 🎯

const express = require("express");
const mongoose = require("mongoose");
const Cors = require("cors");
const dotenv = require("dotenv");

dotenv.config();

server에 관한 기본적인 모듈 및 환경 변수 설정이다. express와 mongoose, cors, 그리고 dotenv에 관한 내용을 각각의 변수에 할당하고 있다.

여기서 require는 Node.js에서 모듈을 불러오는 데 사용되는 함수다. backend 관련 셋팅에 필요한 각종 모듈을 require 함수를 통해 가져오고 있다고 요약할 수 있다.

2. 컨트롤러 함수 불러오기 🎯

const {
  getTodos,
  createTodo,
  updateTodo,
  deleteTodo,
} = require("./controllers/todoController");

만들어놓은 컨트롤러 함수를 단순히 가져오는 코드이다. todoController 파트에서 자세히 설명을 남길 예정이다.

3. 앱 설정 🎯

// App config
const app = express();
const port = process.env.PORT || 8000;
const connectionURL = process.env.MONGO_URI;

express 애플리케이션 인스턴스를 생성하고, 해당 애플리케이션이 실행될 포트를 설정한다. 추가적으로 connectionURL은 MongoDB 연결 URL을 의미한다.

4. 미들웨어 설정 🎯

// Middlewares
// convert to json
app.use(express.json());
app.use(Cors());

express.json()을 통해, 요청 body를 JSON 형식으로 파싱한다. app.use(Cors())는 모든 출처에서의 요청을 허용하겠다는 것을 의미한다.

5. 데이터베이스 설정 및 서버 시작 🎯

// DB Config
mongoose
  .connect(connectionURL)
  .then(() => {
    app.listen(port, () => {
      console.log(`Running on port: ${port}`);
    });
  })
  .catch((err) => console.log(err));

MongoDB에 연결하는데, 성공 시 서버가 시작되고 연결에 실패하면 에러를 출력하는 코드이다.

6. API 엔드포인트 설정 🎯

// API Endpoints
// Get todos list
app.get("/todos", getTodos);
// Create a new todo
app.post("/todos", createTodo);
// Update a todo
app.put("/todos/:id", updateTodo);
// Delete a todo
app.delete("/todos/:id", deleteTodo);

API 엔드포인트를 설정한 모습이다.

✅ todo-backend/dbTodos.js

1. Mongoose 및 스키마 정의 🎯

const mongoose = require("mongoose");

const todoSchema = mongoose.Schema(
  {
    text: {
      type: String,
      required: true,
    },
    completed: {
      type: Boolean,
      required: true,
    },
  },
  { timestamps: true }
);

module.exports = mongoose.model("todos", todoSchema);

1. text: 할 일의 텍스트를 저장하는 필드이다. 문자열 타입이며, 필수다.
2. completed: 할 일의 완료 상태를 나타내는 필드이다. 불리언 타입이며, 필수다.
3. { timestamps: true }를 통해 createAt 및 updatedAt 타임 스탬프를 자동으로 추가한다.

✅ todo-backend/controllers/todoController.js

1. 초기 설정 🎯

const mongoose = require("mongoose");
const Todos = require("../dbTodos");

2. Get todo 🎯

const getTodos = async (req, res) => {
  try {
    const allTodos = await Todos.find({}).sort({ createdAt: -1 });
    res.status(200).send(allTodos);
  } catch (error) {
    res.status(400).send(error.message);
  }
};

할 일 목록을 조회하는 함수다. 데이터베이스에서 모든 할 일 항목을 조회하고, createAt 필드를 기준으로 내림차순 정렬한다. 이때, 조회에 성공하면 상태 코드 200과 함께 모든 할 일 목록을 클라이언트에 전송한다. 오류가 발생하면 상태 코드 400과 함께 오류 메세지를 전달한다.

3. Create todo 🎯

const createTodo = async (req, res) => {
  const dbTodo = req.body;
  try {
    const newTodo = await Todos.create(dbTodo);
    res.status(201).send(newTodo);
  } catch (error) {
    res.status(500).send(error.message);
  }
};

req.body를 통해 클라이언트에서 전송된 새로운 할 일 데이터를 받는다. 해당 데이터를 create()를 통해 데이터베이스에 저장하게 된다. 이때, 생성에 성공하면 상태 코드 201과 함께 생성된 할 일 목록을 클라이언트에 전공한다. 단, 오류가 발생하면 상태 코드 500과 함께 오류 메세지를 전송하게 된다.

4. Update todo 🎯

const updateTodo = async (req, res) => {
  const { id } = req.params;
  try {
    // check th id is valid
    if (!mongoose.Types.ObjectId.isValid(id)) {
      return res.status(404).send(`There is no todo with the id of ${id}`);
    }
    const todoID = { _id: id };
    const update = { completed: true };
    const updateTodo = await Todos.findOneAndUpdate(todoID, update);
    if (!updateTodo) {
      return res.status(404).send(`There is no todo with the id of ${id}`);
    }
    res.status(200).send(updateTodo);
  } catch (error) {
    res.status(500).send(error.message);
  }
};

req.params를 통해 URL 매개변수에서 할 일 항목의 id를 받는다. 이때, 해당 id가 유효한 MongoDB Object인지 확인하고, 만일 유효하지 않다면 상태 코드 404와 오류 메세지를 전송한다.

id가 맞다면, findOneAndUpdate 함수를 통해 해당 항목의 completed 필드를 true로 변경한다. 업데이트 된 항목이 없다면 404 상태 코드와 에러 메세지를 반환한다.

업데이트에 성공하면 상태 코드 200과 업데이트 된 할 일 항목을 클라이언트에 전송한다. 별도의 에러가 발생할 경우 상태 코드 500과 해당 에러 메세지를 전송한다.

5. Delete todo 🎯

const deleteTodo = async (req, res) => {
  const { id } = req.params;
  try {
    // check th id is valid
    if (!mongoose.Types.ObjectId.isValid(id)) {
      return res.status(404).send(`There is no todo with the id of ${id}`);
    }

    const deleteTodo = await Todos.findOneAndDelete({ _id: id });

    res.status(200).send(deleteTodo);
  } catch (error) {
    res.status(500).send(error.message);
  }
};

update와 마찬가지로 URL 매개변수에서 할 일 항목의 id를 추출한다. MongoDB의 데이터가 맞는지 검증한 후 findOneAndDelete 함수를 통해 삭제를 진행한다. 에러가 발생했다면, 해당 에러 메세지를 전송한다.

6. export 🎯

module.exports = { getTodos, createTodo, updateTodo, deleteTodo };

마지막으로 각 함수를 모듈로 내보내서 다른 파일에서 사용할 수 있도록 한다.

✅ todo-frontend/src/axios.js

1. axios 인스턴스 생성 🎯

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:8000",
});

export default instance;

axios를 사용하기 위해 인스턴스를 생성하는 코드이다. 아직 인스턴스라는 용어가 생경한데, "axios를 쓰겠다!" 정도의 작업이라고 이해하겠다.

✅ 요약

1. server.js

• express와 mongoose를 연결하고 API 엔드포인트를 설정하여 서버를 구성

2. dbTodos.js

• mongoose를 사용하여 data 스키마와 모델을 정의

3. todoController.js

• CRUD API를 구현하여 데이터를 처리하는 로직을 제공

4. axios.js

• axios 인스턴스를 생성하여 클라이언트 측에서 HTTP 요청을 더 간편하게 할 수 있도록 설정