개요
백준 문제를 풀면서 한줄씩 출력하게끔 유도하는 예제 출력을 많이 보게 되었다. 프로그래머스의 익숙해진 나는 console.log()로 한줄씩 출력하게 유도했고 결과는 시간초과라는 결과를 받게되었다.
구글링을 하면서 로직은 같은데 왜 내 코드만 시간초과가 뜨는걸까 하면서 고민하다가 출력할 데이터들을 모두 배열에 넣은다음에 join('\n')로 배열을 문자열로 합쳐주고 출력하면서 해결했다.
'로직은 같은데 그 사이에 콘솔 출력문 하나 더 넣는다고 이렇게 시간이 느려진다고??' 너무 억울했다. 너무 억울한 나머지 이번 포스트를 작성하게 되었고, 왜 내 생각지 안일했는지 정리해보겠다.
Console.log()가 느린 이유
console.log 함수에 객체가 전달될 때, 이는 먼저 직렬화(serialization) 과정을 통해 문자열로 변환되어 콘솔에 표시된다. 이 직렬화 과정은 특히 크거나 복잡한 객체와 관련하여 상당한 양의 메모리를 소비할 수 있다.
직렬화 과정은 객체를 콘솔에 출력할 수 있는 문자열 표현으로 변환하는 것을 포함한다. 이는 일반적으로 메모리에 새로운 문자열을 생성하고 객체에서 데이터를 문자열로 복사하는 것을 포함한다. 크거나 복잡한 객체의 경우, 이는 상당한 양의 메모리를 필요로 할 수 있다.
즉, console.log()를 실행하는 과정에서
새로운 메모리 접근 => 새로운 문자열 생성 => 객체의 데이터를 문자열로 변경 => 문자열을 복사하여 메모리에 저장
하는 과정을 거치기 때문에 생각보다 그리 간단치 않다는 말이다. 만약 백준 문제에서 출력을 15줄 100줄 그 이상을 출력해야 한다하면 매번 그 해당하는 숫자만큼 이 작업들을 반복한다.
실제로, 참고한 문서를 살펴보면 직접 테스트한 코드에서 성능차이를 살펴볼 수 있다.
function performanceTest() {
let counter = 0;
for (let i = 0; i <= 100000; i++) {
counter += 1;
// console.log(counter)
}
return counter;
}
// 콜 이전의 메모리 사용량 기록
const startMemory = performance.memory.usedJSHeapSize;
// 큰 수의 객체를 console.log로 호출
performanceTest();
// 콜 이후의 메모리 사용량 기록
const endMemory = performance.memory.usedJSHeapSize;
// console.log 호출에 의해 사용된 메모리 계산
const logMemory = endMemory - startMemory;
console.log(logMemory);위의 코드를 실행한 결과, console.log를 사용하지 않은 함수는 0 바이트의 메모리를 소비하고, console.log를 사용한 함수는 1818704 바이트의 메모리를 소비한다.
console.log() 꼭 지우세요
console.log()를 로컬환경에서 디버깅하거나 작업할때는 사용할 수 있지만, 직접적인 라이브 서버나 배포과정에서는 반드시 지워야 한다는 것을 깨달았다. 근데, console.log()지우려면 좀 귀찮은게 사실이다. 혹은 미처 발견하지 못하고 배포될 수도 있는것이다. 그럴 때 자동적으로 console.log()를 빈 함수로 만들어주면 되지 않을까?
if (env === 'production') {
console.log = function () {};
}루트 폴더에 .env파일에 다음과 같이 코드를 작성하면 cosnole.log()를 그냥 비어있는 함수로 바꿔서 해당 로직에서 메모리를 절약할 수 있다. 또한, 프로덕션 환경이 아니라면 console.log()는 계속 동작하기 때문에 로컬에서는 다시 콘솔로 디버깅을 시도할 수 있다.
참고문서
