Dev/Nextjs

서론🔍 목표프론트엔드에서 다음과 같은 필터 UI를 구성하고:브랜드 선택 (복수 가능)카테고리 선택가격 범위 (최소/최대)정렬 기준 (가격순, 최신순 등)페이지 이동선택된 필터에 따라 FastAPI 백엔드로 query string을 만들어 API 요청을 보내는 구조를 구현한다.🔗 엮인글[🚀 Dev/Python] - [FastAPI] Swagger UI에서 POST 요청 시 JSON 입력창으로 바뀌는 이유 [🚀 Dev/Python] - [FastAPI] DELETE 요청 시 JSON이 아닌 Path Param으로 값 전달하는 방법[🚀 Dev/Python] - [FastAPI] DELETE 요청 시 path param 여러 개 받는 방법 [🚀 Dev/Python] - [FastAPI] 쿼리 파라미터..

React Hook Form의 Controller를 감싸서 반복되는 설정을 줄이고 재사용성을 높이는 ControllerWrapper 컴포넌트를 소개합니다. 이 컴포넌트를 사용하면 다양한 입력 필드를 통합적으로 관리하고 유효성 검사도 쉽게 적용할 수 있습니다.1.1. ControllerWrapper란?ControllerWrapper는 react-hook-form의 Controller를 감싸서 보다 편리하게 사용할 수 있도록 만들어진 재사용 가능한 Form 컨트롤러 컴포넌트입니다. 🔹 주요 기능Controller의 공통 설정을 한 곳에 모아 관리다양한 입력 필드(input, select, textarea, DatePicker 등) 지원rules를 활용한 유효성 검사 적용 가능React.forwardRef를..

🚨 React DatePicker의 Range 선택 문제 해결하기React 프로젝트에서 DatePicker를 사용할 때, range 선택 시 첫 번째 날짜 선택 후 즉시 반영되지 않는 문제가 발생했다.이는 React의 useState 비동기 업데이트 특성 때문인데이 글에서는 이 문제를 해결하는 최적의 방법을 소개합니다.1. 문제 상황🔹 개발 조건DatePickerType="range" 또는 "single" (기본값은 "single")달력은 하나만 사용하여 시작일과 종료일을 선택첫 번째 선택한 날짜는 시작/종료일 구분 없음두 번째 클릭한 날짜와 비교하여 범위를 자동 설정두 번째 날짜가 더 작으면 → 첫 번째 날짜를 endDate, 두 번째 날짜를 startDate로 설정두 번째 날짜가 더 크면 → 첫 ..

react-hook-form 에서 control 을 안쓰겠다고 고집스럽게 힘들게 register 작업을 다해놓고 커스덤 컴포넌트들을 만들다보니 짜즈응이 나서 결국 를 쓰는 방식으로 리팩토링 하는 중인데왜죠..? 이해는 안가는데 그냥..그런갑다 해야지 1. 반복문을 사용한 코드 (예제에서 사용한 방식)반복문을 사용하면 코드가 더 동적으로 변할 수 있으며, 여러 개의 체크박스를 간단하게 렌더링const interestsCheckOptions = [ { id: 'sports', label: 'Sports', value: 'sports' }, { id: 'music', label: 'Music', value: 'music' }, { id: 'art', label: 'Art', value: 'art' },..

1. 이슈1.1. 발생 환경 : Task App - Task, Label add, edit Dialog popup 으로  구성- 대부분의 경고메시지는 Toast 를 Layout 에 선언해 전역적으로 사용 중1.2. 발생 상황 Task Edit Dialog 에서 Submit 버튼을 클릭시 변경된 컨텐츠가 없어서 Toast 메세지를 띄우고 로직 중단되었는데 바닥Page 에서 rerendering 이 불필요하게 일어나는 상황1.3. 해결방안 useMemo 및 React.memo 를 활용하여 ToastProvider 최적화useMemo를 사용하여 ToastProvider에서 showToast 함수가 메모이제이션되도록 처리하면, ToastProvider 컴포넌트가 리렌더링될 때마다 새로운 함수가 생성되는 것을 방..

에러 메세지ReferenceError: Cannot access 'User' before initialization at Module.User (webpack-internal:///(api)/./src/models/user.ts:3:51) at eval (webpack-internal:///(api)/./src/models/user-info.ts:24:129) import { Entity, PrimaryGeneratedColumn, Column, OneToOne, OneToMany, CreateDateColumn, UpdateDateColumn } from 'typeorm';import { UserInfo } from '@/models/user-info';import { Task } from '@/mod..

서론Next.js에서 페이지 로딩 시 ProgressBar를 구현하는 방법은 몇 가지가 있지만, 가장 일반적인 방법은 클라이언트 측에서 라우팅이 변경될 때 이를 감지하고 ProgressBar를 보여주는 방식입니다. 이를 위해 Next.js의 Router 이벤트를 활용할 수 있다. 본문1. nprogress 설치먼저, nprogress 라이브러리를 설치합니다. nprogress는 경량화된 progress bar 라이브러리로, 쉽게 페이지 로딩에 적용할 수 있다.npm install nprogress https://www.npmjs.com/package/nprogress nprogressSimple slim progress bars. Latest version: 0.2.0, last published: 10..

두 방법은 React 컴포넌트에서 타입을 정의하는 방식에 있어 약간의 차이가 있지만, 기능적인 차이는 매우 적습니다. 다만, 두 가지 접근 방식이 제공하는 유연성과 명시성의 차이를 이해하는 것이 중요합니다.1. React.FC vs React.ButtonHTMLAttributes1.1 React.FC (Functional Component):React.FC는 기본적으로 Functional Component를 위한 타입을 정의하는 도구입니다. **children**이 자동으로 포함되고, defaultProps 및 **propTypes**를 사용할 수 있는 장점이 있습니다. 하지만 일부 제약이 있으며, 더 명시적인 타입을 정의하려고 할 때 사용되지 않는 경우도 있습니다.1.2 React.ButtonHTMLA..

아이콘 Toggle 버튼이 아이콘만 다르고 구동방식이 동일하기때문에 리팩토링하여 공통 인터페이스와 로직을 공유하고 아이콘을 사용자 정의. 아이콘에 필요한 props(예: "켜짐" 및 "꺼짐" 상태의 아이콘 이름)를 허용하는 일반적인 ToggleButton 구성 요소를 만들면 코드 중복을 피하고 로직을 일관되게 유지할 수 있다.Step 1: 공유 인터페이스 및 구성 요소 만들기먼저 모든 공유 속성을 포함하는 공통 인터페이스 ToggleButtonProps를 정의하고 두 아이콘 이름(activeIcon 및 inactiveIcon)에 대한 props를 추가합니다.import { Icon } from "@/components/common/Icon";import { useEffect, useState } fro..

@svgr/webpack을 활용해 SVG 파일을 컴포넌트로 변환 1. @svgr/webpack 설정하기SVG 파일을 React 컴포넌트로 변환하기 위해 @svgr/webpack 패키지를 사용1.1. 패키지 설치npm install @svgr/webpack --save-dev​ 1.2. next.config.js에서 Webpack 설정// next.config.jsmodule.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/, // .svg 확장자를 가진 파일을 use: ["@svgr/webpack"], // svgr로 처리합니다. }); return config; },}; 2. SVG 파일..