[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 몽고DB 연동 후 데이터 전송하기 (입출금 내역 POST, GET, PATCH, DELETE 요청)

🚧 사전 작업

필요한 패키지 설치

npm install dotenv mongoose

• dotenv:
  
  • 환경변수 .env를 관리해 주는 패키지
  • computer-science-student.tistory.com 
• mongoose:
  • 비동기 환경에서 작동하도록 설계된 MongoDB 객체 모델링 도구
  • https://velog.io/@soshin_dev/Node.js-Mongoose-%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90

 

MongoDB 드라이버 설치

npm install --save mongodb

 

데이터베이스와 상호작용할 수 있는 sdk 설치

 

 

MongoDB 아틀라스 접속 및 회원가입, 데이터 베이스 만들기

MongoDB 연결하기(1)

MongoDB Atlas 사용법 | 코드잇

 

 

Mongoose 이용해 DB-백엔드 연동

app.js

require("dotenv").config();

const express = require("express");
...
const bodyParser = require("body-parser");
const { default: mongoose } = require("mongoose");

app.use(bodyParser.json());

app.use("/api/transactions", transactionsRouter);

...

mongoose
  .connect(process.env.MONGO_URI)
  .then(() => {
    //db 연결이 성공할 경우 서버 연결
    app.listen(5000);
  })
  .catch((err) => {
    console.log(err);
  });

 

 

Transaction 스키마 생성

models > transaction.js

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const TransactionSchema = new Schema({
  uid: { type: String, required: true },
  date: { type: Number, required: true },
  category: { type: String, required: true },
  title: { type: String, required: true },
  amount: { type: Number, required: true },
  memo: { type: String },
});

module.exports = mongoose.model("Transaction", TransactionSchema);

데이터베이스에 저장될 데이터를 정의하는 스키마를 생성한다. 

 

 

express-validator 설치

express 유효성 검증 모듈

npm install express-validator

 

 

+) models 폴더 > http-error.js 자체 에러 처리 모델 생성

class HttpError extends Error {
  constructor(message, errorCode) {
    super(message); //'message' 프로퍼티 추가
    this.code = errorCode; //'code' 프로퍼티 추가
  }
}

module.exports = HttpError;

 

 

🚧 백엔드 → DB  POST 요청 보내기

transactions-controller.js

const { v4: uuid } = require("uuid");
const { validationResult } = require("express-validator");

const HttpError = require("../models/http-error");
const Transaction = require("../models/transaction");

...

const createTransaction = async (req, res, next) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return next(HttpError(errors.array(), 422));
  }
  const { uid, category, title, amount, memo } = req.body;

  //모델 생성 완료
  const createdTransaction = new Transaction({
    uid,
    date: new Date().getTime(),
    category,
    title,
    amount,
    memo,
  });

  try {
    await createdTransaction.save();
  } catch (e) {
    const error = new HttpError("입출금 내역 저장 실패", 500);
    return next(error);
  }

  res.status(201).json({ transaction: createdTransaction });
};
...

포스트맨으로 post 요청을 보낸다

실제 db에 post 요청된 데이터가 저장되어 있는 모습

 

 

🚧 백엔드 → DB  GET 요청 보내기

transactions-controller.js > getTransactionById

const getTransactionById = async (req, res, next) => {
  const transactionId = req.params.tid; // type: string

  let transaction;
  try {
    transaction = await Transaction.findById(transactionId);
  } catch (e) {
    //GET 요청에 문제가 생겼을 때
    const error = new HttpError("입출금내역을 불러오지 못했습니다.", 500);
    return next(error);
  }

  // GET 요청에 문제가 없지만 입출금내역을 찾을 수 없는 경우 에러 핸들링
  if (!transaction) {
    const error = new HttpError(
      "해당 ID에 대한 입출금내역을 찾지 못했습니다.",
      404
    );
    return next(error);
  }

  res.json({ transaction: transaction.toObject({ getters: true }) });
};

mongoose 함수 findById를 이용해 params의 id와 일치하는 Transaction 스키마의 데이터를 찾아온다. 

GET 요청이 성공적으로 완료된 모습

 

transactions-controller.js > getTransactionsByUserId

const getTransactionsByUserId = async (req, res, next) => {
  const userId = req.params.uid;

  let transactions;
  try {
    transactions = await Transaction.find({ uid: userId });
  } catch (e) {
    const error = new HttpError("입출금내역을 불러오지 못했습니다.", 500);
    return next(error);
  }

  if (!transactions || transactions.length === 0) {
    return next(
      new HttpError("해당 유저의 입출금내역을 찾지 못했습니다.", 404)
    );
  }

  res.json({
    transactions: transactions.map((t) => t.toObject({ getters: true })),
  });
};

mongoose 함수 find를 이용해 params의 id와 일치하는 Transaction 스키마의 데이터를 모두 찾아온다.

데이터가 여러 건이기 때문에, 요청 전송 현황 확인을 위해 데이터를 불러올 때 map 함수를 사용했다.  

GET 요청이 성공적으로 완료된 모습

오류가 생겼을 때의 화면 (id를 틀리게 입력함)

 

 

🚧 백엔드 → DB  PATCH 요청 보내기

transactions-controller.js

const updateTransaction = async (req, res, next) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return next(HttpError(errors.array(), 422));
  }

  const { date, category, title, amount, memo } = req.body;
  const transactionId = req.params.tid;

  //id로 해당 입출금 내역 불러오기
  let transaction;
  try {
    transaction = await Transaction.findById(transactionId);
  } catch (e) {
    const error = new HttpError("입출금내역을 불러오지 못했습니다.", 500);
    return next(error);
  }

  //내용 업데이트
  transaction.date = date;
  transaction.category = category;
  transaction.title = title;
  transaction.amount = amount;
  transaction.memo = memo;

  try {
    await transaction.save();
  } catch (e) {
    const error = new HttpError("입출금 내역 수정 실패", 500);
    return next(error);
  }

  res
    .status(200)
    .json({ transaction: transaction.toObject({ getters: true }) });
};

findById 함수로 우선 입출금 내역을 불러오고, 내용 업데이트 후 데이터베이스에 수정된 내용을 save 함수로 저장하는 두 단계를 거친다.

 

 

🚧 백엔드 → DB  DELETE 요청 보내기

transactions-controller.js

const deleteTransaction = async (req, res, next) => {
  const transactionId = req.params.tid;

  let transaction;
  try {
    transaction = await Transaction.findById(transactionId);
  } catch (e) {
    const error = new HttpError("입출금내역을 불러오지 못했습니다.", 500);
    return next(error);
  }

  try {
    await transaction.deleteOne({ id: transactionId });
  } catch (e) {
    const error = new HttpError("입출금내역을 삭제하지 못했습니다.", 500);
    return next(error);
  }

  res.status(200).json({ message: "삭제 완료", transactionId });
};

findById 함수로 id에 해당하는 입출금 내역을 불러오고, 해당 데이터를 deleteOne 함수를 이용해 삭제했다. 

삭제완료 메시지가 정상적으로 확인된다.

 

 

 

---

참고

 

mongoose 함수

[ Node.js ] Mongoose 를 사용해보자!