개발을 하다보면 예전에는 사용을 했지만 지금은 더이상 사용하지 않는 dead code ( 죽은 코드 ) 들이 쌓이게 되요.

여기서 말한 dead code ( 죽은 코드 ) 는 뭘까요?

예를 들어 useIsDesktop.ts 이라는 hook 이 들어있는 파일이 있다고 가정해봐요.

예전에는 이 코드를 활용해서 데스크탑 환경인지 모바일 환경인지를 구분하고 있었는데 시간이 지나면서 더 나은 코드로 개선한 useIsDesktopV2.ts 파일을 새로 작성했어요. 그래서 데스크탑, 모바일 환경을 구분하는 부분에서는 모두 이 새 코드로 교체를 했어요.

그렇다면 이전의 useIsDesktop.ts 파일은 더이상 아무데서도 사용하지 않게 되요. 이런걸 dead code라고 부르기로 했어요

dead code 를 왜 삭제해야 되나요?

코드량이 많아지면 프로젝트가 무거워지고 자동완성을 할 때 불필요하게 많은 목록들이 떠서 개발 생산성을 떨어뜨려요. 특정 키워드를 통해 파일 전체검색을 할 때도 불필요한 파일까지 같이 검색이 되면서 혼동이 생겨요. 그리고 어떤 파일이 현재 사용되는 코드이고 어떤 파일이 현재 사용되지 않는 코드인지를 매번 팀원들끼리 커뮤니케이션 해야하는 비용도 발생해요.

dead code 들 삭제해주는 라이브러리들을 사용하면 되지 않나요?

찾아보기는 했지만 지금 회사 서비스의 프로젝트는 운영한지 3년이 넘은 프로젝트 이다보니 프로젝트만의 복잡한 기술적 맥락들이 쌓여있는 상태였어요. 그래서 정확히 우리의 목적을 달성해줄만한 것을 찾기 힘들어서 직접 구현하기로 했어요.

그러면 뭐부터 해야할까?

먼저 무엇이 dead code 일까 를 정의해야 했어요

현재 저희는 nextjs 를 사용하고 있고 모든 페이지들은 src/pages 하위에 존재해요.

즉 src/pages 하위의 파일들과 의존성 관계가 없는 파일들은 dead code들이다. 라고 정의해봤어요.

그림으로 보면 다음과 같아요