발단은 다음과 같다. 
Figma MCP 도입해서 한참 디자인 v3에 맞춰 UI를 세팅하고 있었는데...
분명 브랜치 파고 뭐하고 하기전에 멀쩡히 이웃달로 잘만 넘어가던 캘린더 기능이 안 돌아가는 거 아닌가?
어느 달로 접근하든, 죄다 날짜와 요일이 realtime과 전혀 매치가 되지 않았다. 어느 달로 넘어가든 일요일이 1일이고, 31일로 끝나는 문제가 있었다.
심지어 내년 2월은 28일로 끝나는 등 시작일/종료일 이런 세부적인 디테일은 여전히 괜찮았고, 개발자 도구 키고 로드했을때도 각 요일에 정상적으로 해당 월/일이 잘 보였다. 딱 UI만 깨졌을 뿐.
앞서 비즈니스 로직을 훅, 유틸로 좀더 쪼개서 분리해보는 등 타 작업도 같이 진행했었기에 당연히 그쪽 문제인 줄 알았다.
물론 당연한 건 없었다
useEffect 의존성 배열 설정이 잘못돼서 리렌더링이 트리거되지 않은 건가, 아 혹시 CSS 문제인가, 강제로 7열 그리드 멕여놓은 게 문제가 된건가? 등등 이런 고민을 약 3일간 하면서 (물론 다른 거 하느라 바쁜 것도 있었지만 아무튼 3일) 계속 고민했었는데, 문제는 그게 아니었다.
각설, 문제의 원인은 바로
display: none;
이 문제였다.
사람 눈에는 그저 요소가 눈에 보이고 vs 안 보이고 지만,
웹에서 컨텐츠를 보여줄 때는
1. DOM에 렌더링 되고 눈에도 보이는 것
vs
2. DOM에 렌더링 되지 않고 눈에도 안 보이는 것
vs
3. (대망의) DOM에 렌더링은 되는 데 눈에는 안 보이는 것이렇게 나눌 수 있다.
문제의 원인은, 앞서
.react-calendar__month-view__days__day--neighboringMonth {
display: none;
}
(react Calendar라이브러리의 css 끌어와서 쓰느라 기본 CSS쓴거임)
특정 달의 이웃 달의 날짜가 안 보이게 하기 위해 위와 같이 CSS를 짰었는데, 이렇게 하면 2번 케이스에 당첨이다.
그런데 실제 현실의 달력은, 설령 이웃달의 날짜를 같이 병기하지 않더라도 그 자리 자체는 차지한다.
그런데 2번을 채택하게 되면 DOM에도 렌더링이 안되어 버리니까, 결과적으로 이웃달 날짜가 차지해서 해당 달의 날짜가 시작해야하는 날짜가 그만큼 뒤에 밀려야하는데 그렇지 못했던 것이다.
그래서 모든 달의 날짜가 죄다 일요일부터 시작해버렸다.
따라서, 결과적으론 시시하게 visibility: hidden;로 해결했다.
추신.
- 사실 불필요하게 DOM에 많은 요소가 렌더링되면 그만큼 성능을 떨어트린다. 하지만 은총알은 없는 법. 상황에 맞게 적절한 솔루션을 찾고 적용하는 게 중요하겠다.
- CSS가 문제였다! 고 시작했지만 결과적으로는 DOM 개념까지 연결된 문제 상황이었다. 역시 모든 개념은 연결되어있나보다.
- 기술 블로그 잘 안쓰는 고질병이 있으나 굳이 왜 이렇게 빠르게 기록을 남겼나 하면 이거 v2 디자인 적용시킬 때도 겪었던 문제였다. 당시에 기술블로그에 기록을 해놨으면, 어 이거 설마! 하고 바로 알아서 고쳤을 텐데. 하아... 트러블슈팅은 간단하게라도 기록하는 습관을 들이겠다. 같은 실수 2번은 안 해야지.
