많은 파일을 안전하게, 효율적으로 관리하기 위해 업로드된 파일을 특정 폴더에 저장하고 파일 이름을 변경해서 저장파일명 충돌 방지보안 및 추적성 확보➡️ 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..

OpenWeatherMap(오픈 웨더 맵)https://openweathermap.org/ Current weather and forecast - OpenWeatherMapAccess current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions wopenweathermap.org 1️⃣ 로그인 및 API Key 발급 2️⃣ VS..

✨ 프로젝트: 용돈 기입장"용돈 기입장"은 간단히 수입과 지출을 관리할 수 있는 React 기반 웹 어플리케이션입니다.거래 내역 추가, 삭제 기능과 함께 잔액, 총 수입, 총 지출을 한눈에 확인할 수 있습니다.https://nue-os.github.io/allowance-book/ 용돈 기입장 nue-os.github.io 🛠️ 사용 기술React v19 (Vite)Redux Toolkit (상태 관리)CSS Module (스타일 관리)localStorage (데이터 저장)gp-pages (배포) 👩🏻‍💻 개발 사항1️⃣ 거래 내역 입력 폼 구현텍스트, 금액, 거래 유형(수입/지출) 입력 {errorText && {errorText}} ..

Redux자바스크립트 앱에서 상태(state)를 예측 가능하게 관리할 수 있도록 도와주는 상태 관리 라이브러리애플리케이션의 상태를 하나의 스토어(store)에서 관리하고, 상태 변경은 액션(action)이라는 이벤트를 통해서만 이루어짐 사용 이유여러 컴포넌트가 같은 데이터를 써야 할 때, 상태 공유가 복잡해짐Props drilling(깊은 자식에게 props 전달)이 심해짐상태 흐름이 예측되지 않음 ➡️ 디버깅 어려움 핵심 원칙단일 스토어(Single Source of Truth): 애플리케이션의 모든 상태는 하나의 스토어에 저장됨상태는 읽기 전용(State is Read-Only): 상태를 직접 변경할 수 없고, 액션을 통해서만 변경할 수 있음변경은 순수 함수로만(Changes are made with..

React HookuseStatehttps://nueos.tistory.com/204#useState-1 [#50] React - useStateuseState- 컴포넌트에 상태를 추가하는 Hook- 화면에 보여주는 데이터를 저장하고 변경할 수 있게 해주는 기능기본 사용법const [상태, 상태변경함수] = useState(초기값);const [state, setState] = useState(초기nueos.tistory.com useEffect컴포넌트의 렌더링 외에 발생하는 부수 효과(side effects)를 처리하기 위한 훅더보기부수 효과데이터 가져오기 (API 호출)타이머 설정 (setTimeout)이벤트 리스너 등록외부 시스템과 연동useEffect(() => { // 마운트될 때 실행할 코드..