human error를 줄여 동료 개발자의 경험을 개선해보자! with console.log()

 

JavaScript를 사용하는 개발자라면 개발을 하면서 디버깅을 하기 위해 console.log()를 많이 사용 할 것이다.

 

협업을 하는 과정에서 디버깅을 위해 작성했던 console.log()를 코드리뷰를 통해 발견하여 제거 할 수도 있지만, 이 또한 사람이 하는 일이라 못 보고 지나쳐 console 로직이 그대로 main에 push되어 배포 사이트에서 console이 찍히는 일이 조금씩은 있을 것이다.

 

지금부터 배포 단계에서 자동으로 console이 제거되어 개발자들이 마음 놓고 console을 찍어 디버깅 해볼 수 있도록 설정해보자!

 

하지만 이 설정은 동료 개발자들의 human error를 줄여주기 위한 수단 일 뿐, console이 main 브랜치에 남아있으면 보기 좋지 않으니 무조건 console은 제거하는 습관을 가지자.

 

우선 vite 공식문서를 들여다보자.

vite 공식문서의 build.minify / terserOptions 부분

build.minify을 terser로 설정해줘야하는데, 이때 terser 설정에 앞서 terser를 install 해주어야한다.

drop_console에 관한 내용

 

이제 아래와 같이 vite.config.ts의 build 설정을 바꿔주면 배포 단계에서 자동으로 console을 지워주어 콘솔이 찍히지 않게 된다.

import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
      { find: '@', replacement: resolve(__dirname, 'src') },
      { find: '@components', replacement: resolve(__dirname, 'src/components') }
    ]
  },
  plugins: [react(), tsconfigPaths()],
  // 이 부분이 console을 배포 단계에서 지워주는 부분
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
});

 

하지만 위 방법은 옳은 방법이 아니다. terser는 치명적인 문제가 있다. 아래 사진에서 볼 수 있듯이 terser를 사용하면 esbuild보다 20~40배 정도 느려진다는 단점이 있다.

 

그래서 이를 해결하기 위해 terser를 모두 걷어내고, build minify 방식은 기본 값인 esbuild 그대로 가져가고, https://github.com/vitejs/vite/discussions/7920 를 참고하여 defineConfig에 esbuild 키를 정의하고 내부에 drop: ['console']을 통해 배포 단계에서 console을 모두 일괄 제거해주는 로직을 새로 작성했다.

 

import react from '@vitejs/plugin-react';
import { resolve } from 'path';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
      { find: '@', replacement: resolve(__dirname, 'src') },
      { find: '@components', replacement: resolve(__dirname, 'src/components') }
    ]
  },
  plugins: [react(), tsconfigPaths()],
  // 개선된 부분
  esbuild: {
    drop: ['console']
  }
});

 

이를 확인 하려면 배포가 되어야 확인 할 수 가 있는데, vite에서는 배포 되기 전 배포 환경과 비슷한 환경을 제공하여 테스트 해 볼 수 있다.

 

우선 각각 terser를 쓸 때와 esbuild를 할 때를 빌드하여 성능 차이를 보자

 

terser를 이용했을 때 빌드 시간 / esbuild를 이용했을 때 빌드 시간

 

 

확실히 terser를 사용했을 때 보다 esbuild를 사용한 개선된 코드가 빌드 시간이 월등히 빠른 걸 볼 수 있다. 

이제는 콘솔이 완벽히 잘 지워져 console창에 나타나지 않는지 확인해보자.

npm run build -> npm run preview

 

위 순서로 진행하여 실행을 시키면 4173 포트로 서버가 열릴텐데 여기서 확인해보면 된다.

아래는 위 내용을 수행한 결과이다.

배포 사이트 / 개발 환경의 preview 서버

 

말끔하게 콘솔이 사라진 것을 볼 수 있다 ㅎ

 

이를 통해 동료 개발자들은 console을 미쳐 지우지 못했더라도 배포 단계에서 console이 모두 지워지기에 불필요한 javascript가 제거되어 human error를 줄일 수 있다는 효과를 누릴 수 있다.