[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - POST, PATCH, DELETE 요청)

2024. 1. 27. 00:33·웹 프로젝트/👨‍👨‍👧‍👧소셜 가계부
반응형

🚧 사전 작업

 

uuid 라이브러리 설치
고유 식별자(id)를 생성해주는 서드파티 라이브러리

npm install --save uuid

 

 

body-parser 패키지 설치

request.body에 있는 데이터에 접근하기 위해 사용하는 구문 분석 패키지

 

app.js

// 본문을 먼저 파싱 -> 본문의 json 데이터를 추출해서 객체나 배열 같이 일반적인 js 구조로 변환
app.use(bodyParser.json());

 

* body-parser ???

 

Express body-parser middleware

body-parser Node.js body parsing middleware. Parse incoming request bodies in a middleware before your handlers, available under the req.body property. Note As req.body’s shape is based on user-controlled input, all properties and values in this object a

expressjs.com

 

[node.js] body-parser을 정확히 알자

express를 사용하면 보통 아래와 같이 시작을 한다.보통 body-parser를 설명할때 'request.body에 있는 데...

blog.naver.com

 

express 미들웨어 body-parser 모듈

서버 공부를 시작하며 요청에 대한 응답을 주는 과제를 하는 중에 node.js 의 모듈 bodyParser의 존재를 알게 되었다. bodyParser 모듈 없이는 post, put 요청 메소드의 request.body를 읽어올 수 없어 일단 사

velog.io

 

 

🎁 POST (입출금 내역 추가)

transactions-routes.js

router.post("/", transactionsControllers.createTransaction);

router.post는 expess의 라우팅 메소드이다. 

post 요청을 진행할 url과 라우트 일치 시에 실행되는 함수를 작성해 준다.

 

transactions-controller.js

const createTransaction = (req, res, next) => {
  const { uid, category, title, amount, transaction_type, memo } = req.body;
  const createdTransaction = {
    tid: uuid(),
    uid,
    category,
    title,
    amount,
    transaction_type,
    memo,
  };

  DUMMY_TRANSACTION.push(createdTransaction);

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

exports.createTransaction = createTransaction;

정상적으로 가계부가 게시되었는지 살펴보려면 post man을 이용해 직접 request를 날려보면 된다.

정상적으로 잘 응답받고 있다.

tid로는 uuid()로 생성한 id값이 들어가 있는 것을 확인할 수 있다.

 

 

🎨 PATCH (입출금 내역 수정)

transactions-routes.js

router.patch("/:tid", transactionsControllers.updateTransaction);

특정 id를 가진 입출금 내역을 수정한다. 

 

transactions-controller.js

const updateTransaction = (req, res, next) => {
  const { category, title, amount, transaction_type, memo } = req.body;
  const transactionId = req.params.tid;

  const updatedTransaction = {
    ...DUMMY_TRANSACTION.find((t) => t.tid === transactionId),
  };
  const transactionIndex = DUMMY_TRANSACTION.findIndex(
    (t) => t.tid === transactionId
  );
  updatedTransaction.category = category;
  updatedTransaction.title = title;
  updatedTransaction.amount = amount;
  updatedTransaction.transaction_type = transaction_type;
  updatedTransaction.memo = memo;

  DUMMY_TRANSACTION[transactionIndex] = updatedTransaction;

  res.status(200).json({ transaction: updatedTransaction });
};

exports.updateTransaction = updateTransaction;

우선 특정 id를 가진 입출금 내역을 찾아온다.

이후에 찾아온 입출금 내역의 내용을 수정하여 저장해 준다.

 

 

🗑 PATCH (입출금 내역 삭제)

transactions-routes.js

router.delete("/:tid", transactionsControllers.deleteTransaction);

특정 id를 가진 입출금 내역을 삭제한다. 

 

transactions-controller.js

const deleteTransaction = (req, res, next) => {
  const transactionId = req.params.tid;
  DUMMY_TRANSACTION = DUMMY_TRANSACTION.filter((t) => t.tid !== transactionId);

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

exports.deleteTransaction = deleteTransaction;

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'웹 프로젝트 > 👨‍👨‍👧‍👧소셜 가계부' 카테고리의 다른 글

[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 배포 (서버: Koyeb, 프론트: vercel)  (0) 2024.03.07
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 리덕스(Redux)로 가계부 데이터 상태 관리 1(리덕스 선택이유, 리덕스 정의 및 스토어, 액션, 리듀서 정의, 덕스패턴 적용까지)  (0) 2024.03.07
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 몽고DB 연동 후 데이터 전송하기 (입출금 내역 POST, GET, PATCH, DELETE 요청)  (0) 2024.01.28
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - GET 요청 보내기)  (0) 2024.01.26
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (사전 작업 - express, nodemon, body-parser 설치 및 테스트 작성)  (1) 2024.01.25
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 프론트엔드 초안 작성하기(라우터 설정, 가계부 월별 이동하기 구현)  (1) 2024.01.16
'웹 프로젝트/👨‍👨‍👧‍👧소셜 가계부' 카테고리의 다른 글
  • [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 리덕스(Redux)로 가계부 데이터 상태 관리 1(리덕스 선택이유, 리덕스 정의 및 스토어, 액션, 리듀서 정의, 덕스패턴 적용까지)
  • [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 몽고DB 연동 후 데이터 전송하기 (입출금 내역 POST, GET, PATCH, DELETE 요청)
  • [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - GET 요청 보내기)
  • [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (사전 작업 - express, nodemon, body-parser 설치 및 테스트 작성)
청량리 물냉면
청량리 물냉면
프로그래밍 공부를 하고 있습니다. 공부 내용 정리 겸 정보 공유를 목적으로 합니다.
    반응형
  • 청량리 물냉면
    노력중인 블로그
    청량리 물냉면
  • 전체
    오늘
    어제
    • 분류 전체보기 (505)
      • 프로그래밍 (41)
        • Programming (1)
        • C | C++ (6)
        • Java (28)
        • Python (5)
      • 웹 프로그래밍 (108)
        • HTML | CSS (5)
        • JavaScript | TypeScript (41)
        • React (25)
        • Vue.js (0)
        • Next.js (18)
        • Spring & Spring Boot (13)
        • JSP & Servlet (1)
        • DB (4)
      • 웹 프로젝트 (77)
        • 웹 프로젝트 (22)
        • 🥨스낵몰 (3)
        • 👨‍👨‍👧‍👧소셜 가계부 (26)
        • 🌜꿈 일기장 (11)
        • 🔮포트폴리오 사이트 (11)
        • 🏃‍♂️팀 프로젝트: 일정관리 프로그램 (0)
        • 📈팀 프로젝트: AI기반 주식 분석 플랫폼 (0)
        • 😺Just Meow It: 조언 사이트 (2)
        • 📕Workly: 교대근무 다이어리 (1)
      • 앱 프로그래밍 (26)
        • Flutter (24)
        • Kotlin (2)
      • Problem Solving (166)
        • 백준 (52)
        • 프로그래머스 (79)
        • SWEA (29)
      • Computer Science (40)
        • 알고리즘 (14)
        • 컴퓨터 네트워크 (18)
        • 이산수학 (8)
      • Developer (47)
        • 후기 (4)
        • 자료정리 (4)
        • 취업 | 취준 (9)
        • SSAFY (1)
        • 웹개발 교육 프로그램 (9)
        • TIL (20)
  • 블로그 메뉴

    • 홈
    • Github
  • 공지사항

    • 프로그래밍 공부 중😊
  • 인기 글

  • 태그

    강의내용정리
    클론 프로젝트
    ZeroCho
    백준
    컴퓨터네트워크
    React
    bfs
    AWS
    구현
    파이썬
    Next.js
    Til
    포트폴리오
    mysql
    자바스크립트
    d3
    플러터
    알고리즘
    Jiraynor Programming
    리액트
    블로그 제작
    타입스크립트
    프로그래머스
    SWEA
    뉴렉처
    웹사이트
    자바
    공식문서
    프로젝트
    spring boot
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
청량리 물냉면
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - POST, PATCH, DELETE 요청)
상단으로

티스토리툴바