[FE] 사용하지 않는 npm 모듈 정리하기

🧐 문제 발견

개인 프로젝트를 진행하던 중, emotion과 storybook을 연결하는 과정에서 css 오류를 해결하려고 여러 방법을 사용했더니 너무 많은 패키지들을 설치하게 되었다. 불필요한 패키지들을 그대로 두면 용량도 잡아먹고 속도에도 영향을 줄 것 같아서 정리하고 싶었다.

😉 문제 해결

package.json 의 의존성과 사용하지 않는 것을 분석해주는 툴이 있다.
먼저 글로벌하게 depcheck을 설치한다.

npm install -g depcheck

자세한 설명은 여기에 👉🏼 depcheck

그 다음 프로젝트의 루트 디렉토리(package.json 이 있는 폴더)로 이동하고 depcheck을 실행시킨다

입력하면 아래 사진처럼 분석한 결과를 보여준다.

무작정 여기 있는 모든 패키지들을 삭제하면 안된다. 잘 보고 babel이나 prettier 같이 사용할 것들은 두고 신중하게 삭제해야한다.

나는 @emotion/styled를 사용하지 않을 예정이어서

npm uninstall @emotion/styled

의 형식으로 하나씩 삭제했다.

🐥 배운 점

그동안은 패키지를 설치해보고 사용하지 않는다 싶으면 바로바로 uninstall 했어서 이렇게 한번에 사용과 의존을 체크 할 일이 없었는데, 장기간 프로젝트를 진행하거나 중간에 큰 변동이 있는 경우에 depcheck 를 활용해서 사용하지 않는 패키지들을 관리할 수 있다는 사실을 알게되었다.