웹 프로그래밍/👨👨👧👧소셜 가계부24 [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. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 기존 React + Spring Boot 소셜 로그인 코드 삭제하기 기존에 리액트와 스프링부트 지식이 없는 상태에서 인터넷에서 찾은 지식만으로 프로젝트를 만들었더니, 스프링 프로젝트를 켜지 않으면 리액트 프로젝트도 수정할 수 없는 매우 귀찮은 상태가 돼 버렸다. 어차피 앞으로 진행할 프로젝트의 백엔드 부분은 node.js와 express를 사용하게 될 테니 스프링부트 코드는 이제 쓸모가 없는 상황이다. 따라서 프로젝트를 다시 시작하기 전에 가장 먼저 해야 할 것이 리액트와 스프링부트 연동을 해제하는 일이었다. 인텔리제이 Run 활성화 스프링부트 실행 시 run 활성화가 되어 있지 않아서 구글링을 통해 해결방법을 찾아보았다. 아래 블로그를 보고 해결했다. [JAVA] intellij Run 비활성화 시 해결 방법 intellij Run 비활성화 시 해결 방법 intelli.. 2024. 1. 13. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 프로젝트 전체 기획 정리 1. 기획 소셜 가계부 서비스의 기획 의도는 사용자들이 자신의 소비 습관을 관리하고, 다양한 방식으로 소비 관련 정보를 교류하며 소비 습관을 향상하는 데에 있습니다. 아래는 소셜 가계부 서비스가 제공하는 주요 기획 의도입니다. 개인 소비 관리: 사용자들은 개인 소비 내역을 간편하게 기록하고 분석하여 자신의 소비 습관을 파악하고 관리할 수 있습니다. 이를 통해 예산을 효과적으로 관리하고 불필요한 지출을 줄일 수 있습니다. 소비 정보 교류: 커뮤니티 기능을 통해 사용자들은 소비 관련 정보를 서로 공유하고 의견을 나눌 수 있습니다. 다양한 소비 팁, 할인 정보, 경험 등이 교환되어 사용자들이 더 현명한 소비 결정을 할 수 있습니다. 소비목표(예산) 설정: 소비목표(예산)를 설정하고 동료들과 경쟁하며 목표를 달.. 2024. 1. 13. [React / Socket.io] 채팅 구현하기 프로젝트 개발 당시 프론트는 리액트, 백엔드는 스프링으로 진행하기로 했는데 백엔드 인원이 갑작스레 빠지게 되면서 혼자 백엔드까지 구현 해야 하는 상황이 되었다. 스프링은 한번도 해본 적이 없어서 급하게 노드로 백엔드 서버를 만들고 리액트로 프론트를 구현하기로 했다. 구글링을 통해 노드 채팅 코드를 검색했고 레퍼런스를 통해 코드의 구조를 대략적으로 이해하는 시간을 가졌다 .이후에 서버의 데이터를 프론트에서 받아 사용하는 코드를 작성했다. 🌅 서버 구현 우선 아래 패키지를 모두 설치해준다. npm i nodemon express socket.io cors 📂 Server > 📄 index.js const httpServer = require("http").createServer(); //서버 객체 생성 //.. 2023. 9. 13. [React/Spring Boot/MySQL] 리액트+스프링부트 OAuth2 Google, Facebook, Github 소셜로그인 구현 일지 (스프링 구현x, 리액트 구현o) 완성화면 현재 회원가입 되어 있는 구글 아이디로 로그인하는 과정. DB에 사용자 정보가 저장되어 있지 않을 시 회원가입을 자동으로 진행한다. 오른쪽 상단은 mysql workbench, 오른쪽 하단은 인텔리제이 ide이다. 아직 회원가입되어 있지 않은 구글아이디로 회원가입+로그인을 진행 후 mysql workbench의 user 테이블을 확인하면 새로운 사용자 정보가 DB에 성공적으로 입력되어 있었음을 알 수 있다. 참고 사이트 리액트와 스프링부트를 모두 사용해 본 적이 없어서 로그인 구현부터 난감했다. 구글링을 해서 다양한 솔루션을 따라해보기는 했지만 모두 실패하고 소셜로그인은 포기할까 하던 중 아래 블로그를 발견했다. https://www.callicoder.com/spring-boot-securit.. 2023. 5. 26. [React/JavaScript/Nodejs/Express] 채팅 기능을 포함한 가계부 프론트 웹 프로젝트 ⭐️ 프로젝트 소개 기존 가계부에 친구 초대, 채팅 기능을 추가한 소셜 가계부 제작 프로젝트 🎢 개발 기간 2022.03.20 ~ 2022.06.06 (1차) ⚙️ 개발환경 및 라이브러리 서버를 두지 않고 리액트로만 CRUD를 작업하였으며, 채팅을 위해서는 nodejs와 express + socke.io를 사용하였다. 추가로, 로그인 구현을 위해 스프링 부트와 mysql을 이용했다. 🚲 동작 방법 1. 인텔리제이 서버 on (서버를 켜지 않을 시 구글 로그인 동작하지 않음) 2. 채팅 서버 on (채팅을 위해 서버를 켜야 함. server 폴더 열고 yarn start) 3. 리액트 서버 on (frontend 폴더를 열고 yarn start) 🚨 'xxx'은(는) 내부 또는 외부 명령, 실행할 수 있는.. 2022. 6. 27. [React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-3. 달력 페이지 구현 가계부 웹 사이트인 만큼 수입, 지출 내역 페이지와 수입 지출을 한 눈에 보여줄 달력 페이지가 메인으로 사용될 것이다. 그래서 서칭을 하다 보니 달력 라이브러리가 있다고 해서 사용해 보기로 했다. https://velog.io/@khy226/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%B1%EC%97%90-%EB%8B%AC%EB%A0%A5react-calendar-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0 리액트 앱에 달력(react-calendar) 적용하기 react-calendar 라이브러리로 react 앱에 달력을 적용하는 방법 velog.io 위 블로그 글을 참고했다. CalenderPage.jsx import React, { useState } from.. 2022. 5. 29. [React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-2. 페이지 간 이동 구현 (a href와 Link to의 차이점) 페이지 만들기 우선 대시보드에 연결할 페이지를 여러 개 만들어 준다. CalendarPage.jsx import React from "react"; import styled from "styled-components"; export default function CalendarPage() { return 캘린더; } const Section = styled.section` margin-left: 18vw; padding: 2rem; height: 100%; @media screen and (min-width: 280px) and (max-width: 1080px) { margin-left: 0; } `; 안의 내용은 대강 이 페이지가 어떤 페이지인지 인식만 가능할 정도로 채워준다. 태그를 이용해 내용만 .. 2022. 4. 9. [React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-1. 대시보드 만들기 대략적인 구상도 (구현 전) 완벽하게 똑같지 않더라도 대략 이런 식으로 구현하려고 생각 중이다. 구현 중에 많이 달라질 것 같기는 하다. (구현 후) 최종 구현 이미지는 초기와 완전히 달라졌다. 참고한 UI 소스가 마음에 들어서 거의 그대로 따라갔다. 색상 팔레트 출처: https://www.design-seeds.com/ Design Seeds for all who love color | inspiration & color palettes www.design-seeds.com 바이올렛 베이스의 웹 사이트를 만들고 싶어서 위 색상과 인터넷에서 서칭한 여러 색깔을 사용했다. 구현 UI의 기본 틀은 아래 동영상을 따라하며 구성했고, 바꾸고 싶은 부분은 따로 커스텀했다. styled-components 사용 .. 2022. 4. 8. 이전 1 2 다음 반응형
