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

React

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

ik.js 2024. 4. 8. 14:48

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 해주어야한다.

이제 아래와 같이 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를 할 때를 빌드하여 성능 차이를 보자