TD;DR

• 코딩하며 생각하지 말고 생각하며 코딩하자
• 콘솔로그는 비싼 명령이다 (실서버 배포시 다 삭제할 것)
• 매번 지우기 귀찮으니 자동으로 지워지는 환경세팅을 하자

Background

회사 내부에서 사용하기 위해 피그마 Plugin을 개발했었다.
당연히 내부에서만 쓸거니, 커서와 함께 빠르게 빠르게 개발을 진행하였다
문제가 발생했던 부분은 파일을 읽어오는 부분에서 제대로 읽어오는지 확인차 콘솔에 File을 Base64로 인코딩해서 찍어보았다.
(요즘 개발자 답게 AI가 추천해준 코드를 그대로 사용했다)

const reader = new FileReader();
reader.onload = function(event) {
    const base64String = event.target.result;
    console.log("Base64 Encoded File:", base64String);

    // 서버로 보내기 코드가 있다고 가정하자
};
reader.onerror = function(error) {
    console.error("파일 읽기 실패:", error);
};
reader.readAsDataURL(file);

내부툴 특1, QA 없이 배포하기

문제 발생

몇일간 잘 쓰고 있다가 문제는 대표님의 PC에서 발생했다
플러그인을 실행하면 그냥 피그마가 죽어버렸다

코드를 다시 봤는데 정말 간단한 코드들이라 문제가 될만한 요소가 안보였다. (뭐지)

내부툴 특2, 고객 PC를 뺏어올 수 있음 바로 대표님 맥북으로 가서 디버거를 꼽고 문제를 확인했다
어이 없게도 문제는 Console.log()에서 out of memory가 발생했다.

Web에서 Console.log의 동작 원리

요즘 개발자특, 잼미니(Gemini)에게 물어봄

옛날 개발자특, 직접 해봐야 속이 풀림

// 1. 메모리를 차지하는 큰 객체를 만들고 console.log로 출력하는 함수
function createAndLogLargeObject() {
  // 테스트를 위해 약 5MB 크기의 배열 객체 생성
  const largeData = new Array(5 * 1024 * 1024).fill('MEMORY-LEAK-TEST');
  
  // 이 순간, 콘솔은 largeData 객체에 대한 참조를 갖게 됩니다.
  // 이 참조 때문에 가비지 컬렉터가 메모리를 수거하지 못합니다.
  console.log(largeData);
  console.log(`객체 생성 및 로깅 완료. 현재 시간: ${new Date().toLocaleTimeString()}`);
}

// 2. 위 함수를 1초에 10번 (100ms 마다) 실행
// intervalId를 저장해두어야 나중에 멈출 수 있습니다.
const intervalId = setInterval(createAndLogLargeObject, 100);

console.log("메모리 누수 테스트를 시작합니다. 100ms 마다 큰 객체를 생성하고 로그를 남깁니다.");
console.log("개발자 도구의 Memory 탭에서 메모리 사용량이 계속 증가하는 것을 확인하세요.");
console.warn("테스트를 멈추려면 아래 명령어를 실행하세요:");
console.log("clearInterval(intervalId);");

대충 이런 코드를 콘솔에서 돌리고,
Chrome 개발자 도구 > Memory 탭에서 사실인지 말이 사실인지 확인할 수 있다.
음.. 사실이구만

내부툴 특3, 최대한 간단하게 해결하기
코드를 그냥 주석처리 해버렸다.

실수를 줄이기 위한 환경 세팅

vite.config.ts에

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    // 프로덕션 빌드 시 esbuild를 통해 console, debugger 구문 제거
    esbuild: {
      drop: ['console', 'debugger'],
    },
  },
});

이런 코드를 추가해서 빌드 시 콘솔로그가 삭제된다고 한다. (안해봤음 믿지 마삼)
다음부터는 적용해서 해봐야겠다.

끝.