React에는 아주 많은 달력 라이브러리가 있지만 가장 기본적이면서도 심플한 react-datepicker 라이브러리를 활용해봤다 !사용 방법이 간단하고 제공하는 기능이 꽤나 많다는 점이 좋았다. 라이브러리 설치 및 사용Install$ npm i react-datepicker$ npm i --save-dev @types/react-datepicker Importimport DatePicker from "react-datepicker";import "react-datepicker/dist/react-datepicker.css"; 커스텀 참고 React Datepicker crafted by HackerOne reactdatepicker.com Date PickerDefault selected는 필수..
react-icons 라이브러리가 하나의 라이브러리 만으로 다양한 아이콘을 쉽고 빠르게 import 해올 수 있다는 장점이 있지만 라이브러리 전체를 추가할 경우 번들 크기가 커진다는 단점이 있다고 한다. 그래서 react-icons를 보다 더 효율적으로 사용할 수 있는 방법을 찾아보았다.(과연 그 결과는..?) 모듈 크기 측정은 vscode의 Import Cost 라는 익스텐션을 사용했다. react-icons 모듈 크기비교를 위해 우선 기본적인 react-icons의 모듈 크기를 확인했다. react-icons는 한 파일 안에 모든 아이콘이 담겨있다. @react-icons/all-files 모듈 크기모든 아이콘을 담고 있는 파일 대신 개별 파일을 사용하기 위해 @react-icons/al..
React Iconsreact에서 아이콘을 사용하는 방법은 대표적으로 아래 2가지가 있다.아이콘 파일(svg, img, png 등)을 번들 안에 저장해두고 컴포넌트에서 import 해서 사용font-awesome 등의 아이콘 라이브러리 사용 그 중에서도 사용하려는 아이콘이 많아지고 출처가 다양해지면 1번도 2번도 비효율적이게 된다.그때 유용하게 사용할 수 있는 라이브러리가 바로 react-icons이다. React Icons react-icons.github.io react-icons는 다양한 아이콘을 프로젝트에서 편리하게 import 해 사용할 수 있게 해주는 라이브러리다.Ant-Design, Bootstrap, Font Awesome 등 유용한 아이콘 라이브러리들을 따로 설치할 필요없이 react-..
