Zod란 뭘까?TypeScript 기반의 스키마(데이터 유형) 선언 및 유효성 검사 라이브러리 Zod 의 목표는 유형 선언의 중복을 제거하는 것이며, Zod 을 사용하면 한 번 유효성 검사기를 선언하고 Zod 이 정적 TypeScript 유형을 자동으로 추론한다 - Zod - [공식문서] Intro | Zod zod.dev Zod의 장점의존성 없음Node.js 및 모든 최신 브라우저에서 작동작음: 8kb 압축 후 크기불변성 유지: 메서드 (예: .optional())는 새 인스턴스를 반환합니다.기능적 접근: 구문 검사, 유효성 검사하지 않음일반 JavaScript에서도 작동합니다! TypeScript를 사용할 필요가 없습니다. Zod 사용방법설치npm install zodyarn add zod tscon..

🚀 useRefuseRef는 React에서 저장공간이나 DOM요소에 접근하기 위해 사용되는 Hook이다. JavaScript에서 DOM에 접근하기 위해 사용한 querySelector 등의 함수와 같은 역할이다. Ref는 reference를 뜻한다. useRef를 사용하면 함수형 컴포넌트에서도 이전에 클래스형 컴포넌트에서만 가능했던 DOM 조작이나 값의 유지가 가능하다. 이 Hook은 함수 컴포넌트 내에서 변수를 선언하고, 해당 변수가 컴포넌트의 생명 주기 동안 유지되도록 한다. useRef 의 첫 번째 매개변수인 initialValue는 ref 객체의 current 프로퍼티의 초기값으로 사용된다. initialValue에는 모든 타입으로 지정가능하다. 초기값이 설정되면 해당 ref 객체의 curren..

CRA(Create-React-App)에서 Vite로 마이그레이션 과정 1. 들어가며지금까지 협업 프로젝트와 토이 프로젝트를 진행하면서 항상 Webpack 번들러를 사용해왔다. 하지만 프로젝트 규모가 커질수록 개발 서버 구동 시간과 빌드 시간이 눈에 띄게 느려지는 것을 경험했었고 마음속에 답답함이 있었다. 이러한 성능 이슈를 해결하고자, 이번 토이 프로젝트에서는 더 빠른 번들러로 알려진 Vite로 마이그레이션을 진행해보고 싶었고 그 경험과 과정을 공유하고자 포스팅을 하게 되었다.   2. CRA(Webpack) VS Vite(rollup, esbuild) CRA는 Webpack을 기반으로 구성되어 있고, Vite는 rollup, esbuild를 기반으로 구성되어 있다. Webpack은 프론트엔드 공부를 ..

React Hook Flow - Mount 부터 Unmount까지  이번 포스팅에서는 React Hook Flow Diagram을 통해 리액트 컴포넌트의 생명주기동안 훅이 언제 실행되는지 공부한 내용을 포스팅 해보려고 한다.추가적으로 useEffect 와 useLayoutEffect를 비교하면서 언제 해당 훅을 사용하는게 좋을지도 같이 고민한 내용도 추가했다. Mount, Update, Unmount?- Mount: 컴포넌트가 페이지에 처음 렌더링 될 때를 의미- Update: 부모 컴포넌트가 리렌더링 or state, props가 변경되어 리렌더링 될 때를 의미- Unmount: 컴포넌트가 DOM에서 제거될 때를 의미 이제 React Hook Flow를 보면서 Mount, Update, Unmout 마..

RSC VS SSR 무슨 차이가 있을까?   포스팅 하게 된 계기 유튜브에서 프론트관련 영상을 보던중 RSC라는 단어를 처음 들어서 검색하던 중 React와 관련된 내용인데 React를 사용하는 입장에서 처음 들어보는 단어이기에 흥미가 생겨 찾아보기 시작했습니다. 필자는 Next.js App router를 사용해 프로젝트를 진행해본 경험이 있습니다.App router를 사용해본 사람은 'use client'를 무조건 보고 사용해 본 경험이 있을겁니다. 이러한 지시어가 RSC에서 온 개념 생기면서 나오면서 생긴 기능이라는 말이 흥미로웠습니다. React18에서 새롭게 등장한 가장 핫한 기능인 React Server Component(RSC)에 대해 작성해보겠습니다. React Server Component..

React Hook Form 공부 - 18 유효성 검증(Validation)의 심화 방식우리가 React-Hook-Form을 쓰는 이유는 클라이언트 상에서 유효성 검증을 쉽게 하기 위해서 인데요. 그래서 React-Hook-Form은 유효성 검증에서 다음과 같은 3가지의 심화된 방식도 제공합니다. 첫 번째, 비동기식 유효성 검증입니다. 간혹 커스텀 Validation할 때 외부 사이트에서 정보를 가져와서 비교할 때가 있는데요. 비동기식(async,await) 방식도 지원합니다. 이메일 부분에 지난 시간에 만든 커스텀 Validation이 2개가 있었는데요. 한 개를 추가해 보겠습니다. 이 Validation은 비동기식으로 통신해서 얻은 결과를 비교하게 됩니다. 코드의 간결성을 위해 username과 em..

React Hook Form 공부 - 17 폼 Submission 상태 값과 reset 함수React-Hook-Form의 formState에는 폼 Submission 상태 값이 4개가 있는데요.isSubmitting,isSubmitted,isSubmitSuccessful,submitCount isSubmitting 상태는 submit 버튼을 눌렀을 때고, isSubmitted 상태는 submit이 눌러져서 벌써 액션이 취해졌을 때입니다. isSubmitSuccessful은 submit이 성공적으로 작동했을 때를 나타내고,submitCount는 성공적인 submit의 갯수를 나타냅니다. 사용 방법은 formState에서 가져오면 됩니다.const { register, control, han..

React Hook Form 공부 - 16 폼 Submit disabled 시키기폼의 Submit 버튼을 조건에 따라 disabled 시키는 방법입니다. 필요한 함수는 isDirty 값과 isValid 값인데요. isDirty- isDirty는 폼이 한 번이라도 수정되었는지 여부를 나타내는 속성- 폼의 초기 상태와 비교하여 한 번이라도 변경이 발생하면 true를 반환하고, 변경이 없다면 false를 반환합니다.- 이 속성은 사용자가 입력을 시작했는지, 아니면 여전히 폼이 초기 상태인지 확인하는 데 유용합니다.isValid- isValid는 폼이 유효한지 여부를 나타내는 속성- 모든 필드가 유효성 검사를 통과하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.- 예를 들어, 특정 필드가 필수라..

React Hook Form 공부 - 15 handleSubmit 에러 발생시useForm() 함수가 리턴 하는 handleSubmit 함수를 이용해서 폼의 Submit 핸들링을 담당하는 함수를 지정했었습니다. 그런데, Submit이 실패했을 때도 핸들링할 수 있는 함수를 제공하는데요. handleSubmit 함수에 두 번째 인자가 폼 Submit이 실패했을 때 실행되는 콜백함수입니다 위 코드와 같이 onSubmit 함수는 우리가 Submit이 성공했을 때 작동되도록 만든 함수이고, onError 함수는 Submit이 실패했을 때 작동되도록 만들 예정인 함수입니다import { useForm, useFieldArray, FieldErrors } from "react-hook-form"; const on..