자바스크립트 데드 코드 제거

왜 데드코드를 관리해야 하는가?

• 유지보수시 방해가 된다.
  • 불필요하게 export하는 변수가 많으면 IDE에서 자동 import할 때 속도도 느려지고, 비슷한 심볼들이 많아지면 개발자로 하여금 헷갈리게 하는 방해요소가 된다.
  • 신규 동료가 합류하게 되는 경우 인지해야할 요소들이 불필요하게 늘어난다.
• 소나큐브같은 정적 코드 분석 툴을 사용할 때 정말 개선이 필요한 부분이 아닌데 검사의 대상이 된다.

데드코드 정리 도구 활용

ts-prune

• 사용되지 않고 있는 export된 변수를 찾아준다.
• 2023-10-14 기준 maintanence mode가 되었기 때문에 비추

ts-prune -p tsconfig.json // tsconfig 설정파일 전달

사용후기

• 사용되고 있는 변수도 결과에 나오는 경우가 있다.
• export 됐지만, 파일 외부에서는 사용하지 않고 내부에서 사용하는 경우도 결과에 나온다. (해당 정보를 필터링하는 옵션이 최근 추가됐다.)
• index.ts에서 한번에 묶어서 export하는 경우 잡히지 않음

export { default as PositionDraftRequestDto } from './PositionDraftRequestDto';
export { default as PositionFindResponseDto } from './PositionFindResponseDto';

ts-remove-unused

• 명령어를 실행하면 사용되지 않는 코드를 찾아 제거해 준다.
• line에서 공개한 오픈소스이다

사용후기

• --skip 옵션으로 ignore할 파일을 지정할 수 있으나 하나하나 찾아 설정해줘야하는 점이 불편했다.
  • 예) 리액트 최상위 파일 App.tsx 라거나 schema.tsx 등..
• 실제로 사용하는 부분이 있음에도 지워지는 경우가 있었다.

knip

• ts-prune 메인테이너가 추천하는 도구이다.
• 사용되지 않는 파일, 변수, 타입, 의존성 등을 찾아주고 export된 것중에 이름이 겹치는 것도 알려줌
• 설정파일에 애플리케이션의 엔트리 파일들, 검사에 포함할 파일들에 대한 필터링을 할 수 있다.

import type { KnipConfig } from 'knip';

const config: KnipConfig = {
  entry: ['src/index.ts'], // 애플리케이션이 시작될 때 엔트리 포인트가 되는 부분 설정가능
  project: ['src/**/*.ts'],
};

export default config;

• 프레임워크별로 기본 설정 세팅을 제공해주고 있다.

이외 도구들

• https://www.npmjs.com/package/find-unused-exports
• https://www.npmjs.com/package/unimported
• https://github.com/sweepline/eslint-plugin-unused-imports

예방하기

개발하는 중간중간 정적분석 도구를 사용해 데드코드가 생기는걸 미리 방지하는것이 제일 좋다고 생각한다. eslint를 활용해 사용되지 않는 코드가 존재하는 경우 warning이나 error가 발생하도록 하자.

• https://eslint.org/docs/rules/no-constant-condition
• https://eslint.org/docs/rules/no-unused-vars
• https://eslint.org/docs/rules/no-unreachable