Datcha(다챠)개인 간 데이터를 사고팔 수 있는 데이터 거래 플랫폼 https://github.com/nue-os/front-module GitHub - nue-os/front-module: ✨LG U+ 유레카 부트캠프 2기 프론트엔드 비대면 최종 융합 프로젝트 [무선✨LG U+ 유레카 부트캠프 2기 프론트엔드 비대면 최종 융합 프로젝트 [무선 인터넷 거래 플랫폼]✨ - nue-os/front-modulegithub.com

요플랜 🦩AI 기반 챗봇을 통해 사용자의 통신 사용 패턴을 분석하고, 개인에게 최적화된 요금제를 추천하는 React 기반 웹 서비스 https://github.com/ureca-chatbot-team3/Ureca-Chatbot-Team3-Frontend GitHub - ureca-chatbot-team3/Ureca-Chatbot-Team3-FrontendContribute to ureca-chatbot-team3/Ureca-Chatbot-Team3-Frontend development by creating an account on GitHub.github.com

본 프로젝트는 React, Express, MongoDB를 사용한 블로그 웹 애플리케이션입니다. 🪄 백엔드 배포Cloudtype 배포1️⃣ 링크 접속https://app.cloudtype.io/ https://app.cloudtype.io/ app.cloudtype.io2️⃣ GitHub 저장소로 배포3️⃣ 언어/프레임웤, 애플리케이션 설정, 버전, 환경 변수, 포트 번호 입력4️⃣ 프리티어로 배포5️⃣ 배포 정상 동작 확인Cloudtype 로그&터미널과 배포한 주소 접속하여 확인 MongoDB IP 주소 설정1️⃣ Cloudtype [설정] 탭에서 아웃바운드 IP 확인2️⃣ MongoDB의 [Network Access] 탭에서 해당 IP 주소 모두 추가 카카오 로그인 설정 변경 💥 BE 트러블 슈팅..

먹었냥 🐾사랑하는 반려동물의 건강하고 행복한 식생활을 위해, 반려인들이 직접 만드는 특별한 레시피를 공유하고 '반려동물 집밥원료 API'를 통해 정확한 영양 정보까지 확인할 수 있는 React 기반 웹 서비스 https://github.com/zeromin41/YumNyang GitHub - zeromin41/YumNyang: 먹었냥 프로젝트 프론트엔드먹었냥 프로젝트 프론트엔드. Contribute to zeromin41/YumNyang development by creating an account on GitHub.github.com

많은 파일을 안전하게, 효율적으로 관리하기 위해 업로드된 파일을 특정 폴더에 저장하고 파일 이름을 변경해서 저장파일명 충돌 방지보안 및 추적성 확보➡️ multer 사용 MulterExpress에서 multipart/form-data 형식을 처리하기 위한 미들웨어multipart/form-data는 일반적인 body-parser나 express.json()으로 파싱되지 않음multer는 파일을 읽어서 서버 디렉토리에 저장하거나 메모리에 올려줌저장 경로, 파일 이름, 확장자 검사, 파일 크기 제한 등 커스터마이징이 쉬움 설치npm install multer 업로드할 디렉토리가 없다면 생성import multer from "multer";import path from "path";import fs from ..

bcryptjs비밀번호를 안전하게 암호화(해시화) 하기 위해 사용하는 JavaScript 라이브러리비밀번호 해시 생성 (Hashing)비밀번호 검증 (Compare) – 입력된 평문 비밀번호와 저장된 해시가 일치하는지 확인Salt 사용 – 동일한 비밀번호라도 매번 다른 해시 결과를 만듬 (보안 강화)설치npm i bcryptjs회원가입 시, 비밀번호 암호화import bcrypt from "bcryptjs";const saltRounds = 10; // salt 길이app.post("/register", async (req, res) => { const { userName, password } = req.body; // userModel 에서 이미 존재하는 사용자인지 확인 const existing..

React 회원가입 구현회원가입 폼 회원가입 페이지 {errUserName} {errPassword} {errPasswordConfirm} 가입하기 상태 관리 const [userName, setUserName] = useState('') const [password, setPassWord] = useState('') const [passwordConfirm, setPasswordConfirm] = useState('') const [errUserName, setErrUserName] = useState('') const [errPassword, setErrPassword] = useState('') const [errPasswordConfi..

🚀 Tanstack Query서버 상태(server state)를 관리해주는 라이브러리데이터를 가져오고, 캐싱하고, 동기화하고, 갱신하는 것을 쉽게 만들어주는 도구Tanstack Query를 쓰면 직접 useState, useEffect, axios 등을 조합해서 관리할 필요가 없이, 자동으로 데이터 패칭 / 캐싱 / 로딩 처리 / 에러 핸들링을 다 해줌 📍 주요 기능API 요청(fetching) 관리로딩 상태, 에러 상태 자동 관리데이터 캐싱 (네트워크 요청 최소화)refetch (데이터 자동 새로고침)background fetching (화면은 유지, 데이터만 갱신)pagination, infinite scroll 지원쿼리 무효화(invalidate)로 갱신 설치npm install @tansta..