Gyejoong's Information

React Hook Form 시리즈 포스팅 가장 첫 번째, React Hook Form 시작하기입니다. 이번 포스팅은 아래 순서로 진행이 됩니다. 설치 기본 사용법 설명 DevTool 사용하기 UI 라이브러리와 함께 사용하기 에러 처리 설치 현재 진행 중인 프로젝트에 아래와 같은 명령어를 입력합니다. npm install react-hook-form yarn을 사용한다면 아래와 같이 입력합니다. yarn add react-hook-form 기본 사용법 설명 기본 예제 import React from 'react'; import { useForm, SubmitHandler } from 'react-hook-form'; type Inputs = { example: string; exampleRequired:..

React Hook Form은 Hooks 기능을 활용하여 쉽고 빠르고 간단하게 Form Validation을 처리하는데 최적화된 라이브러리입니다. 다른 많은 라이브러리도 있지만 성능, 업데이트 빈도수, 프로젝트 생성일자 등을 고려해봤을 때 가장 신뢰성 있는 프로젝트라고 생각됩니다. Formik vs React Hook Form vs Redux Form 트렌드 비교 Stars만 보면 formik이 조금 우세하긴 하지만, 이슈 개수와 마지막 Updated 날짜를 보면 react-hook-form이 관리를 더 잘한다고 보입니다. 번들 사이즈도 보게 되면 formik이 react-hook-form보다 60% 이상 높습니다. 이러한 기준으로 react-hook-form을 선정하게 되었으며, 시리즈물 포스팅을 작성..

안녕하세요. 최근에 Gatsby를 공부할겸 포트폴리오 사이트를 만들어보기 위해 해당 포스팅을 작성하게 되었습니다. Gatsby란? Gatsby는 React 기반의 오픈소스 프레임워크 이며, 정적 웹사이트를 만들때 빠르게 만들 수 있습니다. Gatsby를 사용하기 좋은 케이스 Gatsby는 React기반인데, 왜 별도의 툴이 존재할까 라는 생각이 들기도 합니다. 하지만, Gatsby는 다음과 같은 상황에서 확실하게 장점으로 작용됩니다. 별도의 서버 없이 운영하고 싶은 경우 React를 사용하여 정적 사이트를 만들고 싶지만, SEO (검색엔진 최적화)가 문제가 되는경우 아무래도 React 기반이기 때문에 React의 사전지식이 필요하며, GraphQL를 사용하므로 해당 관련 지식이 필요 할 수 있습니다. 해..