작심삼일 개발이야기

front-end 하면 빠질 수 없는 것이 Form이다. 하나하나 만들어서 관리하려니 코드도 길어지고 너무 힘들어서 라이브러리를 통해 관리해보려고 찾아봤다. 대표적인 라이브러리로 Formik과 React-hook-form이 있다. 이번에는 form라이브러리인 Formik과 유효성 검사 라이브러리 Yup을 사용해보려 한다. 제일 처음 formik과 yup을 설치하자 npm i formik npm i yup form에 사용 할 상태의 초기 값을 initialValues을 통해서 설정한다. const formik = useFormik({ initialValues: { firstName: "", lastName: "", channel: "", }, }); 초기 값을 사용 할 곳에서 value의 속성 값으로 초기..

동적으로 메타데이터를 변경하기 위해서 React-Helmet을 사용한다. //설치 npm install --save react-helmet import { Helmet } from "react-helmet"; function App() { return ( choisuhyeok ); } index.html 에서 head태그의 내용들을 모두 지우고 App.js에서 간단하게 title을 수정해보았다. 사진과 같이 웹페이지의 title이 변경된 것을 확인할 수 있다. 아래의 사진 처럼 favicon 이미지도 변경할 수 있다. function App() { return ( choisuhyeok ); } 기존의 태그에 link태그를 이용해서 favicon을 설정해주었다. 나머지는 나중에 더 공부해야지...