[TIL] 내일배움캠프 74일차 - 리액트 불필요한 의존성 제거

 

 

오늘의 학습 키워드📚

depcheck

리액트를 사용하다 보면 부트스트랩, mui, joyui, router, 폰트 등등 수많은 라이브러리를 설치하게 되는데 설치하면 package.json 파일에 라이브러리의 간단한 정보가 담기게 되고 package-lock.json에는 정확한 버전과 의존성 트리가 담기게 된다.

그래서 라이브러리를 설치하다 보면 의존성이 꼬여서 빌드가 안 될 때도 있고 Git에 있는 프로젝트를 가져왔을 경우에도 버전이 맞지 않아 충돌이 발생할 수도 있다.

무엇보다 가장 큰(?) 문제는 메모리 관련 문제인데 이번에 프로젝트를 배포하면서 ec2 프리티어 환경에 배포를 했는데 계속해서 빌드가 되지 않는 문제가 발생했다.
코드 상으론 문제가 없어서 리액트 관련 문제일 것이다 생각해서 npm run build를 실행해본 결과 heap memory 부족 관련 에러가 발생한 것을 확인했다.
찾아본 결과 node.js가 과하게 리소스를 차지해서 발생하는 문제라고 한다.
이에 대한 해결법으로는 스크립트로 해결하는 경우도 있고 ec2 ubuntu os에 swap 메모리를 할당한다거나 여러가지 방법이 있지만 우선 기본적으로 프로젝트에서 사용하고 사용하지 않는 라이브러리를 정리할 필요가 있다.

실제로 나도 여러 라이브러리를 설치하는 과정에서 중간에 사용하지 않게 되는 라이브러리들이 꽤 있었고 팀원들간 리액트 의존성 관련 충돌 때문에 정말 힘들었어서 매우 필요하다고 생각했다.

직접 찾아서 지울 수도 있겠지만... 솔직히 사람이 할 수 없는 일이라고 생각한다.
현재 팀 프로젝트도 큰 규모는 아닌데 package-lock.json 코드 길이가 18000줄이 넘어간다.
그래서 사용하지 않는 라이브러리를 찾아주는 라이브러리(!!)가 존재하는데 바로 depcheck이다.

npm install depcheck -g

depcheck

리액트 루트 폴더로 이동해서 depcheck를 설치한 다음 depcheck를 입력하면 알아서 사용되고 있지 않은 라이브러리를 찾아준다.

이렇게 현재 프로젝트에서 설치만 되고 사용되고 있지 않는 라이브러리들을 알려주기 때문에 npm uninstall 명령어로 지워주기만 하면 깔끔해진다.
한 가지 팁은 해당 라이브러리를 복사해서 메모장에 붙여넣기 한 다음 앞에 * 부분에 npm uninstall을 넣고 콘솔에 붙여넣기 하면 한줄한줄 입력할 필요 없이 자동으로 삭제된다!

npm uninstall @fontsource/roboto
npm uninstall @mui/x-data-grid
npm uninstall bootstrap
npm uninstall http-proxy-middleware
npm uninstall react-bootstrap

삭제하고 다시 depcheck 명령어를 실행하면 라이브러리들이 잘 삭제된 모습을 볼 수 있다.

---

오늘의 회고💬

배포 관련해서 계속 빌드 실패가 발생해서 시간을 많이 허비했던 것 같다. 그래도 배포가 됐고 프론트까지 잘 연동이 돼서 다행이다. 팀원 분들이 굉장히 고생을 많이 해주고 계신다😅

 

내일의 계획📜

프론트쪽 윤곽이 어느정도 많이 잡혀서 내일은 진짜진짜진짜최종파이널라스트 마무리할 수 있을 것 같다..........