이번 포스팅에서는 Webpack 기반의 프로젝트를 Vite로 전환한 이유와 그로 인해 얼마나 개선되었는지를 다뤄보겠습니다. 제가 담당하는 관리자 프로젝트는 MUI 템플릿을 기반으로 하고 있어, 파일 수가 많아 프로젝트가 무겁습니다. 현재 이 프로젝트는 CRA 환경인 Webpack을 사용 중인데, Webpack은 개발 서버의 구동 속도가 너무 느려 Cold Start Time이 10초나 걸리고, HMR(Hot Module Replacement)도 저장할 때마다 오래 걸립니다. 심지어 가끔은 저장이 되지 않아 VSCode를 껐다 켜야 하는 상황도 발생했습니다. 그러던 중 눈에 뛴것이 바로 Vite라는 빌드 툴입니다. Vite는 프랑스어로 "빠르다"라는 의미라고 합니다. 본인들이 차세대 빌드 툴이라고 소개한 ..

이번 포스팅에서는 React Hook Form 라이브러리를 활용해 폼(Form)을 효율적으로 개선하는 방법에 대해 다뤄보려고 합니다. 제가 회사에 입사하고 처음 맡았던 업무는 관리자 페이지를 만드는 것이었습니다. 관리자 페이지는 다양한 폼 기능을 포함하고 있어, 로직을 구현하는 과정에서 여러 가지 고민을 하게 되었습니다. 그러던 중 눈에 띈 라이브러리가 바로 React Hook Form이었습니다. 이 라이브러리를 실제 프로젝트에 적용해 보니, 이전에 제가 겪었던 문제들을 해결하는 데 큰 도움이 되었습니다. 이 글을 통해 React Hook Form을 어떻게 활용해 폼을 개선하고, 상태 관리를 효율적으로 할 수 있는지 알아보겠습니다. 일반적으로 React에서 폼을 사용한다면 어떤 형태로 구현하는지부터 시작..

useRef에서 필요한 상황에 대해서 알아봅시다. useRef의 특징 두가지가 있습니다. 첫 번째는 리렌더링 하지 않습니다. 두 번째로는 컴포넌트의 속성만 조회&수정 합니다. react에서 useRef를 사용하는 경우는 다음과 같습니다. 1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우. - 예를 들어, 값을 여러개를 입력하고 첫 번째 칸으로 이동해야 하는 경우에 필요합니다. 로그인이 실패하고 첫 번째 아이디 칸으로 이동 시키는 경우가 있습니다. import { useState, useRef } from "react" export default function Test() { const [loginForm, setLoginForm] = useState({ username: "", password: ..

useRef란? useRef를 간략하게 말하면 특정 Dom을 직접 건드릴 수 있게 해주는 것이다. 다들 프로젝트를 해보면서 그러한 경우가 있을 것이다. 이미지 업로드를 하는데 나는 아바타 모양을 클릭 시 이미지 업로드를 하고 싶을 때 useRef를 사용하여 input type=file의 Dom을 건드려 아바타 모양에 기능을 넣어준 경우가 있을 것이다. 아 위에 말하는 Dom은 HTML과 JavaScript를 이어주는 공간이다. 작성한 HTML을 JavaScript가 이해할 수 있도록 Object로 변환하는 것이다. 이제 위에서 말한 예시를 코드로 한번 실행시켜 보면서 어떻게 사용하는지 알아보자! import { useRef } from "react" const Profile = () => { const ..