소셜가계부5 [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) 회원가입 로그인 부분은 생.. 2024. 1. 28. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - POST, PATCH, DELETE 요청) 🚧 사전 작업 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, av.. 2024. 1. 27. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - GET 요청 보내기) 기본 라우터 추가하기(GET 요청 사용) app.js const express = require("express"); const bodyParser = require("body-parser"); const app = express(); const transactionsRouter = require("./routes/transactions-routes"); app.use(transactionsRouter); app.listen(5000); * app.use() 지정된 경로에 존재하는 미들웨어 함수를 마운트한다. (요청된 경로와 일치하는 미들웨어 함수가 실행된다.) Express 4.x - API 참조 Express 4.x API express() Creates an Express application. T.. 2024. 1. 26. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (사전 작업 - express, nodemon, body-parser 설치 및 테스트 작성) 🚧 사전 작업 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.. 2024. 1. 25. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 프론트엔드 초안 작성하기(라우터 설정, 가계부 월별 이동하기 구현) 기초공사 새로 기획한 프로젝트 내용에 필요하지 않은 코드를 모두 지우고 폴더 구조를 수정하고, 라우트도 새로 작성했다. --- SPA Pages `/`: 대시보드 `/authenticate`: 회원가입, 로그인 폼 `/calendar`: 캘린더 `/transactions`: 유저 입출금 기록 `/challenge`: 챌린지 `/community`: 커뮤니티 `/community/new`: 게시글을 추가하는 페이지로 연결 `/community/:cid`: 게시글을 조회 및 수정하는 페이지로 연결 `/profile`: 환경설정 및 개인 정보 페이지 import React, { useState } from "react"; import { BrowserRouter as Router, Routes, Route }.. 2024. 1. 16. 이전 1 다음 반응형
