[원티드 프리온보딩] TIL - (17)

5월 23일

🔗react-datepicker

Date picker를 구현하기 위해 사용한 라이브러리이다.
구글에 ‘react date picker’라고 검색했을 때 가장 먼저 나온 라이브러리이기도 하고 다운로드 수도 적지 않아 사용을 하였는데, 다른 더 나은 라이브러리가 있으면 그것으로 갈아타야 할지도 모르겠다는 생각이 들었다.
우선, 🔗공식 문서가 굉장히 부실하다. 부실하다 못해 심지어 컴포넌트가 어떤 props를 받을 수 있는지 조차도 써있지 않다. 이에 대한 정보를 찾으려면 직접 Github 레포지토리의 docs 폴더에 들어가서 마크다운 파일을 읽어봐야 하는데, 이 마크다운 파일마저도 어떤 props를 받을 수 있으며 이것은 어떤 타입인지에 대해서만 적혀있을 뿐 상세한 사용법은 나와있지 않다. 설령 어찌어찌 공식문서를 따라서 필요한 데이트 피커를 골라 화면에 띄웠다 하더라도 더 큰 문제가 앞을 막는다. 바로 스타일링이다.
만약 패키지에서 제공하는 CSS파일을 import하지 않았다면 모양 자체가 갖춰지지 않고 내용물들이 중구난방으로 퍼져있게 된다. 여기에선 두 가지 선택을 할 수 있는데, 첫번째는 패키지에서 제공하는 기본 CSS파일을 패키지로부터 import하는 방법이고, 두번째는 직접 CSS파일을 작성하는 방법이다. 첫 번째 선택지의 경우, CSS파일을 import한 뒤 데이트 피커를 확인해 보면 피커를 토글하는 버튼 자체의 width 값이 잘못된 것인지 컨테이너가 길쭉하게 혼자 삐져나가있을 뿐만 아니라, 데이트 피커 자체도 그리 이쁘진 않다. 그렇다면 두 번째 선택지인 직접 스타일링을 선택할 수 밖에 없는데, 상술했듯이 부실한 공식 문서에는 이에 대한 설명이 일절 나와있지 않다. 즉, 내가 직접 CSS파일을 뜯어보고 개발자 도구에서 클래스 이름을 확인하며 어떤 코드가 어떤 스타일링에 영향을 미치는지 확인을 하며 수정을 해나가야 한다는 뜻이다. 물론 구글링을 통해 다른 사람들이 해둔 스타일링을 참고하며 수정해 나가는 방법도 있지만, 나만의 데이트 피커를 만들기에는 굉장히 고된 여정일 수 밖에 없음이 틀림없다.
그저 데이트 피커가 필요해서 구글에 ‘react date picker’라고 검색했을 뿐이고, 그저 최상단에 있어서 사용했을 뿐인데, 부실한 공식 문서의 무서움을 깨달았을 뿐더러 라이브러리를 하나하나 뜯어보는 경험까지 해보게 되었다. 분명 생각보다 많은 시간을 투자해버린 것은 맞지만, 적당히 열 받고, 적지 않게 배울 수 있었기에 꽤 값진 시간이었다.