본문 바로가기

코드 기록

Javascript console.log 조심해야겠어요

728x90

Preview

현재 제가 운영 중인 앱 서비스는 Javascript와 Html, Css로 개발하는 웹앱입니다.

최근에 성능 최적화를 고민하다가 Production (운영) 환경에서도 console.log 가 실행되고 있는 걸 발견했습니다.

물론 네이티브 애플리케이션 apk 를 빌드할 때 release 모드로 빌드를 하기 때문에 Production 앱은 디버깅이 되진 않지만 내부적으로 console.log 함수가 호출되긴 합니다.

개발 환경에서 5분 정도 사용해보니 console.log로 찍히는 메시지가 천 줄이 넘더군요..

지금까지 이 부분에 있어서 전혀 고려가 안되고 있었습니다.

과연 이 console.log 는 애플리케이션의 성능을 얼마나 저해시킬까요?

 

Methodology

https://ui.toast.com/posts/ko_20210611

 

당신이 모르는 자바스크립트의 메모리 누수의 비밀

크롬 개발자도구로 하는 디버깅과 해결책을 찾아서!

ui.toast.com

Javascript 메모리 누수와 관련된 블로그 글 중에 정말 잘 정리되어 있던 글을 소개해드립니다.

이 글에서는 console.log 의 메모리 누수와 관련되어서도 적혀있는데요,

 

요지는 console.log때문에 가바지 컬렉터가 불필요한 메모리를 수거하지 않아 메모리 누수가 발생한다고 합니다.

 

그렇다면 실행시간 관점에서 console.log 가 과연 얼마나 영향을 주는지

테스트를 해보기 위해 간단한 테스트 코드를 작성해봤는데요,

 

console.log 없이 배열(1000개의 원소)을 탐색하는 함수와

매 loop 마다console.log를 실행하는 함수의 실행시간을 비교해 봤습니다.

function for_test() {
    let start = performance.now();  
    let sum = 0;

    for (let i = 0; i <= 1000; i++) {
        sum += i;
    }
    let end = performance.now(); 
    console.log("for test : ", end - start);
    return;
}
function for_console_test() {
    let start = performance.now();  
    let sum = 0;

    for (let i = 0; i <= 1000; i++) {
        console.log("test");
        sum += i;
    }
    let end = performance.now(); 
  console.log("for console test : ", end - start); // 경과시간(밀리초)

    return;
}

 

for test :  0.07509994506835938
for console test :  144.21599984169006

 

실행시간 차이는 대략 2000배 차이가 났습니다. 상당했습니다(개발자 관점에서). 물론 사용자는 전혀 느끼지 못할 수준의 시간 차이지만 이런 작은 요소들이 모여 사용자로 하여금  "느린 애플리케이션"이라는 인식을 줄 수 있기 때문에 사소한 부분도 고쳐나가는 게 좋습니다.

 

모든 console.log 문을 지워야 할까요?

 

만약 그렇게 한다면 잘 돌아가고 있는 소스코드를 수정해야 한다는 리스크와 정작 개발환경에서 디버깅할 때는 로그를 확인하기 위해 다시 로깅 코드를 추가해야 될 수도 있습니다. 

이를 해결하기 위해 console.log 함수를 override 해줄 수 있습니다.

 

프로그램의 진입점 (예를 들어 index.js)에 아래 코드를 추가합니다.

if(운영환경){
	console.log = function(){};
}

 

운영환경일 경우 내장되어 있는 console.log 함수를 오버라이딩하여 아무것도 없는 빈 함수로 만들어주면 됩니다. 

 

비교적 간단한 방법으로 해결할 수 있습니다. 

 

처리시간을 지연시키는 것뿐만 아니라 개발자가 임의로 적어놓은 console.log로 인해 null 값인 객체에 접근하려다 에러가 발생할 수도 있는데요, 앞으로는 운영환경으로 배포되는 소스코드에는 로깅에 대한 검증도 진행되어야 할 것 같습니다.

 

'코드 기록' 카테고리의 다른 글

Why & What (is) Spidergen ?  (0) 2024.03.30
Restudy Series. Javascript (2)  (0) 2024.03.30
Restudy Series. Javascript (1)  (0) 2024.03.30
[개역개정 한글 성경] JSON 파일 다운로드  (0) 2023.11.29
Javascript 반복문 성능  (0) 2023.10.30