[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (사전 작업 - express, nodemon, body-parser 설치 및 테스트 작성)

2024. 1. 25. 21:02·웹 프로젝트/👨‍👨‍👧‍👧소셜 가계부
반응형

🚧 사전 작업

express 설치

npm install express --save

참고: https://expressjs.com/ko/starter/installing.html

 

nodemon 설치

매번 서버를 수동으로 재실행해야 하는 문제 해결

npm install nodemon --save-dev
  • nodemon: 파일이 변경될 때마다 서버를 재실행해준다.
  • --save-dev: 개발자 전용 라이브러리

 

package.json script 처리

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"nodemon node app.js"
  },

start 부분을 입력하고 서버 실행 시에는 `npm start` 실행

 

body-parser 설치

로직 개선(파싱을 간단하게 할 수 있도록 도와줌) 

npm install body-parser --save
  • req.body를 파싱 할 수 있는 기성(ready-to-use) 미들웨어 제공
app.use(bodyParser.urlencoded({extended:false}));
  • 모든 수신 요청을 파싱하고 데이터가 urlencoded 타입일 경우 본문에서 데이터를 추출한다.
  • next 함수도 호출해준다. (next 함수 호출 시 앱 내의 그다음 미들웨어 함수가 호출된다.)

 

* 미들웨어??

 

Express 앱에서 사용하기 위한 미들웨어 작성

Express 앱에서 사용하기 위한 미들웨어 작성 개요 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한

expressjs.com

 

 

🔗 테스트 코드 작성

app.js

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

//응답을 보내는 대신 다른 작업을 하는 미들웨어
app.use(bodyParser.urlencoded({ extended: false }));

//POST
app.post("/transaction", (req, res, next) => {
  res.send("<h1> Transaction:" + req.body.transaction + "</h1>");
});

//GET
app.get("/", (req, res, next) => {
  res.send(
    "<form action='/transaction' method='POST'><input type='text' name='transaction'><button type='submit'>Create transaction</button></form > "
  );
});

app.listen(5000);

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

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

[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 몽고DB 연동 후 데이터 전송하기 (입출금 내역 POST, GET, PATCH, DELETE 요청)  (0) 2024.01.28
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - POST, PATCH, DELETE 요청)  (0) 2024.01.27
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - GET 요청 보내기)  (0) 2024.01.26
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 프론트엔드 초안 작성하기(라우터 설정, 가계부 월별 이동하기 구현)  (1) 2024.01.16
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 기존 React + Spring Boot 소셜 로그인 코드 삭제하기  (0) 2024.01.13
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 프로젝트 전체 기획 정리  (1) 2024.01.13
'웹 프로젝트/👨‍👨‍👧‍👧소셜 가계부' 카테고리의 다른 글
  • [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - POST, PATCH, DELETE 요청)
  • [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - GET 요청 보내기)
  • [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 프론트엔드 초안 작성하기(라우터 설정, 가계부 월별 이동하기 구현)
  • [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 기존 React + Spring Boot 소셜 로그인 코드 삭제하기
청량리 물냉면
청량리 물냉면
프로그래밍 공부를 하고 있습니다. 공부 내용 정리 겸 정보 공유를 목적으로 합니다.
    반응형
  • 청량리 물냉면
    노력중인 블로그
    청량리 물냉면
  • 전체
    오늘
    어제
    • 분류 전체보기 (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
  • 공지사항

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

  • 태그

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

  • hELLO· Designed By정상우.v4.10.3
청량리 물냉면
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (사전 작업 - express, nodemon, body-parser 설치 및 테스트 작성)
상단으로

티스토리툴바