Vercel CLI를 사용하여 빌드하던 중
npm ERR! ERESOLVE unable to resolve dependency tree와 같이 의존성 트리를 해결할 수 없다는 메시지를 보냈다.
오류를 살펴보면, "@reach/rect" 패키지와 "react" 패키지 버전 간의 충돌 때문이다. "@reach/rect" 패키지는 "react" 패키지의 버전을 "^16.8.0 || 17.x"로 요구하고 있고, 프로젝트 루트 패키지에 설치된 "react" 패키지 버전은 "18.2.0"으로 되어 있다.
해결하는 방법은 크게 두가지인데, React의 버전을 맞추거나, rect의 버전을 올리는 것이다.
그렇지만 React는 next.js를 사용하기 때문에 버전을 맞출수 없었고 rect를 맞추려고 하였지만 rect도 최신 버전이었다.
그래서 고민 끝에 rect를 제거하기로 하였다.
수정 전에 혹시 모를 사고에 대비하여 브랜치를 작성하였다.
Rect의 역할은 useRef의 거리를 측정하는 것이었다.
DropDown의 크기변화를 컨트롤 하기 위해 작성하였는데,
1번째 메뉴와 2번째 메뉴의 길이가 달라서 변경 범위를 측정하기 위해 작성하였다.
이를 scaleY로 받아서 조절하는 방식이었다.
이 라이브러리가 어려웠던 점은 CSR로 만들지 않아서, Server에서는 해당값이 null 잡혀서 optional chaining으로 이를 대비하여야했고, 여러 경우의 수를 고려하면서 작성해서 굉장히 노력을 많이 들였다.
로직을 열심히 짰기때문에, 해당 값을 넣어주는 방식으로 해결하기로 하였다.
Framer-motion을 사용하여 해결할 수도 있었지만, 남기고 싶었다.
관련 부분을 삭제하니 드롭다운이 내려오지 않았다.
그래서 checking이 되었을 때 변화하는 값을 이용하여
고정 값을 넘겨주었다.
겉으로 보여지는 것에는 큰 차이가 없었지만, rect 활용하여서 메뉴 갯수만큼 계산하는 것이아니라, 직접 DropDown div의 크기를 측정하고 반영하도록 만드는 것은 좋은 도전이었다. 종속성 문제로 실패하였지만, 다양한 방법을 도전한 것은 만족스럽고, 종속성 문제를 겪어본 것은 좋은 경험이었다.
배포에 더 시간을 쏟고 싶어서 여기까지 하고 마무리하려고한다 끗!
버전 충돌 참 열받습니다 ㅋㅋ ㅠ 그래도 현명하게 대치하시니 멋집니다 !! 고생하셨어요