문제React + Vite 프로젝트를 Vercel로 배포하는데 다른 페이지로 이동시에 404뜨는 경우가 발생하였다구글링을 통해 알아보니 나와 같은 현상을 겪는 사람들이 많았고 결론적으로 이유는 Vite와 같은 클라이언트 측 라우팅 프레임워크에서는 페이지 전환이 클라이언트에서 이루어지기 때문에, 특정 URL로 접근하거나 새로고침을 할 때 서버가 해당 HTML 파일을 찾지 못해 나는 404 에러였다 vercel의 공식문서에도 Vite 사용시 나오는 에러를 다루는 부분이 있어서 참고를 했다! Vite on VercelLearn how to use Vercel's features with Vite.vercel.com해결프로젝트 파일 루트에 vercel.json 파일을 만들고 그 안에 아래와 같은 코드를 입력해준..

반복되는 컴포넌트들을 분리하며 react-hook-form의useForm와 Controller를 사용해보게 되었다 useFormuseForm은 주로 react-hook-form 라이브러리에서 제공하는 훅으로,React에서 폼을 효율적으로 관리하고 유효성 검사를 쉽게 할 수 있게 도와줌useForm을 사용하면 폼 상태와 입력값을 제어하고 검증하는 코드를 간결하게 작성할 수 있어, 특히 복잡한 폼을 다룰 때 유용함 주요 기능폼 상태 관리: useForm은 각 필드의 값과 폼 전체의 상태를 관리유효성 검사: 기본적인 HTML5 유효성 검사는 물론, 커스텀 검증을 설정하여 폼 입력값을 검증할 수 있음react-hook-form의 resolver를 사용하면 Zod, Yup 등 다른 검증 라이브러리와 쉽게 연동할 ..

프로젝트를 진행하면서 페이지간 경로를 이동시켜줄 때어떤상황에 각각을 써줘야하는지 헷갈리고 모르겠어서 찾아보고 정리하게 되었다 Link 사용Link 컴포넌트는 보통 정적 네비게이션(클릭으로 페이지 이동)을 위해 사용된다 장점HTML 표준 준수 : Link는 태그로 렌더링되며, 검색 엔진과 접근성 도구가 링크를 올바르게 인식할 수 있다코드 가독성 : JSX 내에서 라우트 목적지와 함께 컴포넌트 구조를 명확하게 유지할 수 있다간단한 클릭 이벤트 : 단순한 라우트 이동만 필요할 때 사용하기 좋다 추천 사용 사례네비게이션 메뉴 : 상단 메뉴나 사이드바 메뉴처럼 간단한 경로 이동이 필요한 경우페이지 내부 링크 : 사용자가 UI상에서 클릭하여 다른 페이지로 이동해야 할 때 예시로그인 useNavigate 사용use..

Debounce와 Throttle은 심화적인 개념이기도 하고 꼭 적용해야하는 개념은 아니어서 알아두면 좋고 사용할 수 있으면 좋은 정도다 라고 생각하고 내용을 보면 된다연속적으로 발생하는 함수나 이벤트를 묶어서 처리하는 방식-> 최적화를 통한 성능 향상 목적  자바스크립트에서 이벤트를 제어하여, 빈번하게 발생하는 이벤트를 효율적으로 처리하기 위한 두 가지 기법스크롤, 리사이즈, 입력 등 사용자 상호작용이 잦은 이벤트에서 성능 최적화에 유용함 Debounce (디바운스)특정 시간이 지난 후에 이벤트를 실행하도록 지연시키는 방식 (마지막에 한 번에 묶어서 처리해도 상관 없을 때)이벤트가 연속해서 발생하면 마지막 이벤트만 실행사용자가 멈춘 후 일정 시간이 지나야 작업을 수행하므로, 마지막 동작 이후 일정 시간..

번들링프로젝트에 필요한 여러 파일(JS, CSS, Image 등)을 하나의 파일로 묶어, 사용자가 웹 애플리케이션에 접근할 때 브라우저에 필요한 리소스를 효율적으로 로드할 수 있도록 하는 과정리액트 애플리케이션은 여러 컴포넌트와 모듈로 구성되기 때문에, 이를 번들링하지 않으면 많은 개별 파일을 요청해야 하고, 이로 인해 불필요한 네트워크 지연이 발생할 수 있음 리액트에서는 주로 Webpack(CRA)이나 Rollup(Vite) 같은 번들러를 사용해 이러한 파일을 하나의 번들로 묶음이렇게 하면 모든 리소스를 한 번에 전달할 수 있어 초기 로딩 성능이 향상되며, 코드의 의존성 관리도 간편해짐장점성능 최적화 : 개별 파일을 하나로 묶어 네트워크 요청 횟수를 줄여 초기 로딩 시간 단축코드 의존성 관리 : 모든 ..

함수형 컴포넌트함수형 컴포넌트는 기존 클래스형 컴포넌트와 달리 React Hooks를 통해 생명주기를 관리함함수형 컴포넌트는 생명주기 메서드 대신 useEffect, useState 등의 훅을 사용해 상태 관리 부수 효과 (side effect)를 처리함 마운트(Mount) 단계컴포넌트가 처음 DOM에 삽입될 때 발생이때 주로 초기 데이터를 설정하거나, 네트워크 요청 수행 useEffect (마운트 시 실행)useEffect(() => { // 마운트될 때 한 번 실행되는 로직 console.log("Component mounted"); // 클린업 함수는 마운트가 해제될 때 실행 return () => { console.log("Component unmounted"); };}, []); ..