[Next] Production에서 Console 출력 제거하기

안녕하세요. J4J입니다.

 

이번 포스팅은 production에서 console 출력 제거하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

console 출력 제거 방법

 

[ 1. 패키지 설치 ]

 

$ npm install babel-plugin-transform-remove-console

 

 

반응형

 

 

[ 2. babel 설정 ]

 

root경로에 .babelrc 파일을 생성한 뒤 다음 내용을 입력해주면 됩니다.

 

{
    "presets": ["next/babel"],
    "env": {
        "production": {
            "plugins": ["transform-remove-console"] // console 출력 제거
        }
    }
}

 

 

 

테스트

 

테스트를 위해 index.tsx 파일을 다음과 같이 간단하게 작성해봤습니다.

 

import * as React from 'react';

const Index = () => {

    React.useEffect(() => {
        console.log('console test...');
    }, [])

    return (
        <div>
            <h2>Console Test...</h2>
        </div>
    );
};

export default Index;

 

 

 

그리고 development 모드로 실행시켜 보면 다음과 같이 console이 출력되고 있습니다.

 

개발모드 console 출력

 

 

728x90

 

 

이번엔 production 모드 테스트를 위해 먼저 build를 해주고, build가 완료된 뒤 실행시켜 console을 확인해보니 아무것도 찍혀있지 않은 것을 확인할 수 있었습니다.

 

운영모드 console 출력

 

 

 

 

 

 

 

이상으로 production에서 console 출력 제거하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.