[Svelte] Production에서 콘솔 출력 방지

안녕하세요. J4J입니다.

 

이번 포스팅은 production 모드일 때 콘솔 출력 방지하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

프론트 개발을 하면서 데이터들을 확인하기 위해 콘솔 창에 관련 값들을 출력하는 것은 자주 하는 행동입니다.

 

하지만 이런 데이터들 중 사용자들에게 노출되면 안되는 데이터들도 들어있기 마련입니다.

 

노출되면 안된다는 생각을 가지고 있기에 배포할 때는 관련 코드들을 제거하기는 하지만 항상 완벽하게 할 수는 없는 일이고 매번 배포할 때마다 콘솔 창에 출력시켜주는 코드들을 찾아 제거하거나 주석처리하는 것도 번거로운 작업 중에 하나가 됩니다.

 

이런 문제를 해결하기 위해 development 모드일 때만 콘솔 창에 데이터를 출력하는 코드가 정상적으로 동작하고 production 모드일 때는 동작되지 않도록 설정해 줄 수 있습니다.

 

rollup설정을 통해 기능을 적용시켜보겠습니다.

 

 

반응형

 

 

콘솔 출력 방지 설정

 

[ 1. 패키지 설치 ]

 

$ npm install -D @rollup/plugin-strip

 

 

 

[ 2. rollup 설정파일 수정 ]

 

import strip from '@rollup/plugin-strip';

const production = !process.env.ROLLUP_WATCH;

export default {
    plugins: [
        // production 일때만 strip 적용
        production && strip({
            include: '**/*.(svelte|js)', // svelte, js로 끝나는 확장자에 적용, 기본 값: '**/*.js'
            functions: ['console.*'] // 적용 될 함수 설정, 기본 값: ['console.*', 'assert.*']
        }),
    ],
};

 

 

 

예시 코드

 

예시 코드를 작성하기에 앞서 코드를 실행해봐야 되기 때문에 package.json을 공유해드리면 저는 다음과 같이 설정되어 있습니다.

 

{
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear"
  },
}

 

 

 

그리고 출력 방지 설정을 한 뒤 간단한 테스트를 위해 App.svelte파일에 다음과 같이 작성해보겠습니다.

 

<script>
	console.log('console 1 ...');
	console.log('console 2 ...');
</script>

<main>
	<h2>console 방지 테스트 ...</h2>
</main>

 

 

 

그리고 다음 명령어를 이용하여 development 모드로 실행해보겠습니다.

 

$ npm run dev

 

 

 

다음과 같이 콘솔이 정상적으로 출력되는 것을 확인할 수 있습니다.

 

development 모드

 

 

 

728x90

 

 

 

이번엔 production 모드로 실행되기 위해 다음과 같이 명령어를 입력해보겠습니다.

 

$ npm run build
$ npm run start

 

 

 

실행이 되면 다음과 같이 콘솔이 출력되지 않는 결과를 확인할 수 있습니다.

 

production 모드

 

 

 

 

 

 

 

 

이상으로 production 모드일 때 콘솔 출력 방지하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.