node_modules 관련 궁금증 (기술 부채)

문제 상황

• 서비스 코드에서 다른 코드들의 형식과 다를 것 없고, 외부 샘플 코드를 봐도 다를 것 없는데 useFieldArray 사용 시, remove 후 append 했을 때, 2개가 아닌 배열이 3개가 되는 형태

해결 과정

• 내부 코드를 보고 싶다! → 현재 사용되고 있는 react-hook-form을 clone 받은 react-hook-form 소스 디렉토리로 보게 하자

라이브러리에서 이슈가 발생했을 때 디버깅 방법 (Ex. react-hook-form)

• react-hook-form 레퍼지토리 clone

• clone 받은 react-hook-form에서 build
• pnpm 혹은 다른 의존성이 없는 경우, npx로 실행할 수 있도록 script 수정

• react-hook-form에서 import 해오는 것을 clone받은 react-hook-form의 dist 디렉토리에서 불러올 수 있도록 수정
• 현재 ESM환경이니 index.esm.js로 연결

디버깅 중 새로 생긴 궁금증

• ‘react-hook-form’을 import하는 경우, node_modules에서 참조하는 것 확인하였다.

• node_modules의 react-hook-form을 지워보았다.
• 정상 동작한다.. (?) → 어디에 있는 react-hook-form을 가져오는 걸까??

• package.json에 의존성이 모노레포처럼 잘 나뉘어있지는 않은 상태