기타 라이브러리

react 개발자가 이러한 애니메이션과 같은 디자이너의 영역을 다루는 것이 과연 필수일까? 현대 웹 개발 환경에서는 사용자 경험(UX)의 중요성이 강조되며, 이 경험에는 사용자가 직접적으로 맞닥뜨리는 화면의 UI가 중점적으로 있다. 또한 프론트엔드 라이브러리와 도구의

UI 라이브러리처럼 예제를 통해 적용된 컴포넌트를 통해 예제로 살펴보고 싶지만...시각적 효과에 대한 설명의 어려움과, 코드 예제의 복잡성 등의 진행과정의 어려움이 있기에 간단하게만 살펴보겠다.

react 애플리케이션에서 폼을 관리하기 위한 간편하고 유연한 라이브러리이다. 이 라이브러리는 react hooks를 기반으로 구축되었으며, 복잡한 폼 로직을 간결하게 처리할 수 있도록 도와준다. 이를 통해 폼 유효성 검사, 상태 관리, 사용자의 입력 값 수집 등을 효

React Hook Form의 핵심 개념 중 하나는 컴포넌트를 react-hook-form의 useForm() 훅에 연결하는 것이다. useFormreact-hook-form의 핵심 함수 중 하나로, 폼 관련 로직을 초기화하고 관리하는 데 사용된다. 다양한 옵션을 받아

useForm()에는 다양한 옵션을 전달하여 폼의 동작을 커스터마이즈할 수 있다.watch는 폼 입력 요소의 값 변화를 감지하고 해당 값을 실시간으로 가져올 수 있는 기능을 제공한다. 이를 통해 특정 입력 필드의 값이나 여러 필드의 값을 모니터링하고, 필요한 동작을 수

chance 개발자들은 로직들을 구현할 때, 어떤 개발 프로젝트든 초기 단계에는 더미 데이터를 이용하여 테스트를 진행해야하는 단계가 있다. 이럴 때 더미 데이터는 개발자가 직접 다른 파일에 작성거나하기도 한다. 이러한 더미 데이터의 종류에는 유저의 이름 / 아이디

Envalid? envalid는 환경 변수를 검증하고 관리하는 데 도움을 주는 라이브러리이다. 주로 환경 변수에 대한 유효성 검사와 필수 변수의 존재 여부를 확인하는 데 사용된다. 주요 기능 및 특징 환경 변수 유효성 검사 envalid는 환경 변수의 유효성을 검사

react-toastify는 React 애플리케이션에서 사용자에게 간단한 알림을 제공하는 데 사용되는 라이브러리이다. 이 라이브러리를 사용하면 토스트 스타일의 메시지를 표시하고 사용자 경험을 향상시킬 수 있다. 아래에서 react-toastify의 주요 기능과 사용법에

모킹(Mocking)이란? Mock(모의, 더미데이터)를 만들어서 서버 연동 사전 테스트 작업을 뜻한다. 통상적으로 프론트에서 data fetch를 해야하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다. 만약 서버가 없는 경우, api 요청으로 내려올 데이

설치 npm i msw -D npx msw init public/ public 폴더 안에 mockServiceWorker.js 파일을 작성해주는 명령어이다. Service Worker API에 필요한 파일이다. browser.js와 server.js 파일을 작성한다.

또한 이 response resolver는 데이터를 주고 받는 기능 외에도 cookie, query parameter, error handling 등의 동적인 데이터를 처리할 수 있는 다재다능한 기능도 갖고 있다.msw에서는 브라우저 단에 저장된 쿠키를 활용할 수 있다

개요 흔하게 react hook form을 이용해 폼을 개발하던 중... 이상한 현상을 포착했다. useForm 의 리턴값인 form을 props로 넘겨 받고, form.formState.isDirty 값을 update submit 함수 제출 전에 조건을 걸어서, 폼을