
팀으로 프로젝트를 진행하게 되면 코드 리뷰 중 반복적으로 발생하는 리뷰 내용들이 존재합니다.
그중 코딩 컨벤션에 대한 리뷰는 리뷰어에게 불필요한 에너지와 시간을 소모하게 하고, 이는 충분히 시스템 적으로 개선이 가능한 부분입니다.
진행 중인 프로젝트에는 개발 중 디버그를 위해 작성하는 console 코드들을 PR 작성 전 직접 찾아서 제거해야 하는 반복 작업이 존재했는데, 이를 lint를 활용해 개선한 과정을 공유하고자 합니다.
해당 내용은 ESLint, husky와 lint-staged를 사용했으며 관련 내용은 공식 문서를 참고 바랍니다.
eslint를 사용 중 일 경우 아래처럼 eslint 설정을 통해 no-console 규칙을 적용할 수 있습니다.
{
"rules": {
"no-console": ["error"]
}
}
규칙을 적용하고 console을 사용할 경우 아래 이미지처럼 에러를 확인할 수 있습니다.
이를 husky, lint-staged와 같이 사용해 커밋 전 제거를 강제할 수도 있습니다.

no-console 규칙을 적용한 것만으로도 충분히 개선이 이뤄진 것 같습니다.
기존 프로젝트에는 Server 환경에서 console을 사용해 로그는 남기고 있었기 때문에 console.log 사용이 필요한 곳까지 에러가 발생하게 됩니다.

이를 해결하기 위해 아래의 해결 방법이 존재합니다.
주석을 이용해 해당 라인만 eslint 비활성화
// eslint-disable-next-line no-console
⇒ 가장 단순하지만 사용할 때마다 매번 주석을 작성해야 함
console을 다른 이름으로 선언해 사용
⇒ 로그가 필요할 경우 Log.log, Log.info 같은 인터페이스로 사용
console을 Log로 선언해 기존 console 사용을 막고, 운영 환경에서 로그가 필요할 경우 Log를 사용하도록 했습니다.
/**
* 실 서비스 환경에서 콘솔에 로그를 출력합니다.
*
* `console`의 직접 사용은 허용하지 않습니다.
*
* @example
* ```ts
* Log.info('info')
* Log.debug('debug')
* Log.warn('warn')
* Log.error('error')
* ```
*/
export const Log = console
추가로 console을 그대로 사용할 경우 에러와 함께 Log 사용을 안내하는 메시지를 제공하기 위해 no-console 규칙에서 no-restricted-syntax 규칙으로 변경했습니다.
{
"rules": {
"no-console": ["off"],
"no-restricted-syntax": [
"error",
{
"selector":
"CallExpression[callee.object.name='console'][callee.property.name=/^(log|warn|error|info|trace|debug)$/]",
"message":
"프로덕션 환경에서 로그 출력이 필요할 경우 Log 클래스를 사용하세요 `common/utils/log.ts`"
}
]
}
}
적용 후 console 객체를 직접 사용할 경우 아래처럼 에러 메시지를 확인할 수 있습니다.

필요할 경우 Log를 사용

반복적으로 발생하는 이슈의 경우 그 빈도와 중요도가 높지 않더라도 개선 여지가 존재함
⇒ 시스템적으로 개선 필요
간단한 규칙들은 eslint 규칙을 활용해서 개선 가능
⇒ 코딩 컨벤션을 정할 때 관련된 lint 규칙도 함께 적용하면 도움이 됨