node_modules 재설치 후 에러가 발생했다!

현재 10월 중순부터 첫 개인프로젝트로 커뮤니티 사이트를 구현 중이다. React Quill 에디터를 사용해서 게시글을 포스팅이 가능하게 만들었고, quill-image-resize-module-react를 통해 이미지 리사이즈를 구현했는데, 갑자기 리사이즈가 제대로 작동하지 않았다. 여러 방법을 찾던 도중 의존성이나 캐시 관련 문제일 수도 있다고 해서 node_modules를 삭제 후 다시 npm install을 진행해 보기로 결정했다.

그런데!! npm install까지는 무사히 마쳤는데, import 경로 에러가 발생해버린 것이다!! 그 많은 파일들이 다 빨갛게 변해버린 모습을 보고 굉장히 당황을 해버렸다.

그래도 일단 문제가 생긴 패키지들을 다시 설치하면 되겠지 싶어 리포지토리에 올려둔 package.json 파일과 비교해 보면서 패키지 설치를 다시 진행 했다.

그런데, 아래 사진처럼 hook중 하나가 import되지 않거나, import 에러가 계속 뜨는 등 해결이 되지 않았다ㅠㅠ

또 찾아보니 package-lock.json 파일도 삭제 후 다시 npm install을 진행하는 사람들도 많이 있는 것 같았다.
하지만 이미 일은 벌어졌고, package-lock.json 파일까지 삭제하는 것이 맞을까 라는 큰 걱정이 앞서서, 일단 코드를 건드는 것을 멈추고 멘토님께 질문을 남겼다.

사실, npm install 후 파일들을 저장하지는 않은 상태였다. import 에러가 이렇게 많은 파일들을 저장하게 되면, 내가 지금까지 해온 프로젝트가 다 사라져 버릴 것 같았기 때문이다…ㅎㅎ 서버 재시작 도 해보았지만, 파일 저장을 하지 않고 터미널에서 바로 npm run dev를 진행했기 때문에 애플리케이션 화면은 문제없이 출력되었다는…

멘토님께 질문을 남긴 후에는, 지금 당장 할 수 있는 게 없어 어쩔 수 없이 파일들을 저장 후 VS Code를 재시작 했다. 그런데 웬걸!!! 에러들이 해결 돼버린 것이다!!! 이때까지의 걱정과 불안이 한꺼번에 날아간 순간이었다!! 잠시 행복을 만끽한 다음, 도대체 어떻게 에러가 사라진 건지, 어쩌다 이런 일이 일어난 것인지를 좀 찾아보았다.
많은 원인 중 나에게 일어났던 원인들을 정리해 보자면

1. VS Code의 파일 감시 기능이 node_modules 폴더의 변경을 즉각적으로 반영하지 못해서
2. 의존성이 올바르게 설치되지 않았거나 캐시가 완전히 반영되지 않아서

에러를 두려워하지 않으려고 항상 노력하지만, 이번에 유독 당황을 많이 했다. 그럴 필요 없었는데!
이런 일을 한번 겪어봤으니 다음부터는 당황하지 않고 해결할 수 있길 바라며 글을 마무리한다!