😀 개요

• Select with a simple drag!
• 사용자가 드래그하여 요일별 또는 날짜별로 시간 범위를 쉽게 선택할 수 있는 컴포넌트 라이브러리입니다.
• 스타일링에는 @emotion을, 날짜 및 시간 관리에는 dayjs를 사용하고 있습니다.

📚 기술 스택

🏛️ 주요 모듈 구조

---

🖍 기술적인 이슈, 개발 과정을 겪으며 정리한 글 요약 및 링크

💡 관심사 분리를 위한 리팩토링

• 드래그 이벤트에 따른 슬롯 선택에 관련된 부분 / 사용자에게 전달할 데이터를 관리하는 부분 분리

  문제 상황

  • 모드가 day(요일 기준)냐, date(날짜 기준)냐에 따라서 하는 행동이 조금씩 다릅니다.
  • date 모드에서는 직관적으로 생각할 수 있듯이 마우스로 드래깅 되는 모든 셀들을 기록하고, 드래그 이벤트가 끝나면 기록된 셀들을 유저에게 전달되는 timeSlots 배열에 세팅하면 됩니다.
  • 그러나 day 모드에서는 일요일부터 ~ 토요일까지만 셀로 표현이 되어있고, 요일에 해당하는 셀들이 선택되면 유저가 선택한 날짜 중에 같은 요일과 시간을 가진 모든 슬롯들을 찾아 timeSlots 배열에 모두 업데이트 해줘야 합니다.
  • 기존에는 대부분의 곳에서 mode 정보를 받아서 모드에 따라 다른 행동을 할 수 있도록 했었는데, 거의 모든 곳에서 mode 정보를 받아 분기를 나눠야 했고, 비슷한데 조금 다른 로직만 두 번씩 중복해서 작성해야하는 문제가 있었습니다.

  원인 분석

  • 셀렉터가 셀을 선택하는 로직 + 사용자에게 전달할 데이터를 업데이트하는 로직을 모두 알고 있기 때문에 이런 문제가 발생한 것이라 생각했습니다.

  해결 방법

  • 따라서 드래그 이벤트에 따른 슬롯 선택에 집중하는 부분과 사용자에게 전달할 데이터를 관리하는 부분을 나눠 관심사를 분리하고자 했습니다.

  과정에서 깨달은 점

  • 여러 역할이 엉켜있는 코드보다 역할 별로 잘 분리되어 있는 코드가 재사용 및 유지 보수가 용이하다는 점을 깨닫게 되었습니다.
  • 😀 더욱 자세한 내용을 읽어보고 싶으시다면 아래 링크를 눌러주세요!
  • 셀렉터 라이브러리 v2.1.1 업데이트에 관한 글

---

💡 깜빡임 이슈 해결

• useLayoutEffect 훅을 통한 깜빡임 이슈 해결하기

  문제 상황

  • mode를 바꿀 때나, 날짜를 변경할 때, 선택된 timeSlots들이 초기화되어야하는 경우 렌더가 다시 일어나는데 그 때 깜빡임이 발생했습니다.

  원인 분석

  • 일단 값이 업데이트 되지 않은 상태에서 먼저 렌더 - 그 후 값이 업데이트되어 깜빡임 이슈가 발생했음을 알게 되었습니다.

  해결 방법

  • 화면이 업데이트 되기 전에 동기적으로 실행되고, DOM이 페인트 되기 직전 실행되는 useLayoutEffect 훅을 필요한 부분에 적용해 해결했습니다.

  과정에서 깨달은 점

  • React에서 상태 업데이트 로직을 처리하는 것은 여러 방법이 있지만, 각 상황에 따라 적절한 방법을 선택해야함을 깨달았습니다.
  • 예를 들어, useEffect와 useLayoutEffect는 비슷하지만 작동 시점이 다르기 때문에, 깜빡임과 같은 UI 이슈를 해결할 때는 useLayoutEffect가 더 적합하다는 것을 알게 되었습니다.
  • 😀 더욱 자세한 내용을 읽어보고 싶으시다면 아래 링크를 눌러주세요!
  • 셀렉터 라이브러리 v2.1.1 업데이트에 관한 글

---

그 외 정리한 글

• Draggable-time-selector 구현하기
• 셀렉터 라이브러리 제작하기 (1) - 개요 및 기능탐색
• 셀렉터 라이브러리 제작하기 (2) - 코드 톺아보기
• 셀렉터 라이브러리 제작하기 (3) - npm 배포하기