[React] webpack을 이용하여 sourceMap 제거하기

안녕하세요. J4J입니다.

 

이번 포스팅은 webpack을 이용하여 sourceMap 제거하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

sourceMap이란?

 

sourceMap을 제거하기에 앞서 sourceMap이 무엇이기에 제거해야 되는지에 대해 먼저 알아보겠습니다.

 

sourceMap은 빌드된 파일과 실제 개발할 때 사용된 파일을 연결 시켜주기 위해 사용됩니다.

 

일반적으로 배포를 하기위해 빌드를 하면 최적화 작업을 위해 사용되고 있는 HTML, CSS, JS 등이 난독화가 이루어지며 압축이 이루어집니다.

 

그렇기 때문에 에러가 발생되었을 때 빌드가 이루어진 파일로 확인하기가 쉽지 않은데, 이를 쉽게 확인하기 위해 원본 파일과 매칭 하여 에러난 부분이 어딘지를 확인할 수 있도록 도와주는 것이 sourceMap입니다.

 

 

 

sourceMap은 다음과 같이 개발자 도구에서 확인할 수 있습니다.

 

개발자 도구에서  Sources탭에 들어가면 아래와 같이 현재 번들링이 이루어진 항목들에 대한 파일들을 볼 수 있습니다.

 

component sourceMap

 

 

 

그리고 실제 component.tsx 파일은 다음과 같이 작성되어 있습니다.

 

import React, { useState } from 'react';

const Component = () => {
    const [value] = useState<string>('내용');

    return (
        <div>
            <h2>이런 {value}들이 sourceMap에 보인다면?</h2>
        </div>
    );
};

export default Component;

 

 

반응형

 

 

또한 다음과 같이 코드가 작성되어 있는 constant.ts 파일이 있습니다.

 

export const useConstant = 'useuseuse!!!';
export const notUseConstant = 'notuse!!!!!!';

 

 

 

해당 파일에서 useConstant값만 실제 파일에서 가져와 사용하고 있는데 sourceMap에서 다음과 같이 사용되지 않는 notUseConstant 도 확인이 가능합니다.

 

constant sourceMap

 

 

 

sourceMap의 문제점

 

위에서 확인한 것처럼 sourceMap은 browser 단계에서 에러가 발생되었을 때 어떤 부분이 문제인지 빠르게 확인할 수 있도록 도와줄 수 있습니다.

 

하지만 이 말을 달리 말하자면 누구나 개발자 도구를 이용하여 우리가 개발한 소스코드를 확인할 수 있다는 겁니다.

 

즉, 보안에 취약해질 수 있습니다.

 

 

 

디버깅을 보다 쉽게 할 수 있도록 도와주지만 보안적인 이슈가 발생된다면 결과적으로 치명적인 문제를 발생시킬 수 있습니다.

 

그렇기 때문에 보통 서비스가 이루어지는 서버에 배포를 할 땐 위와 같은 sourceMap이 보이지 않도록 하여 보안 이슈가 발생되지 않도록 하는 것이 보다 올바른 방법이라고 할 수 있습니다.

 

 

 

webpack으로 sourceMap 제거 방법

 

sourceMap이 보이지 않도록 하는 방법은 간단합니다.

 

webpack 설정 파일인 webpack.config.js에 다음의 코드를 추가해주시면 됩니다.

 

module.exports = {
    // sourceMap 제거
    devtool: false,
};

 

 

728x90

 

 

테스트

 

webpack을 위와 같이 설정하고 browser를 확인해보면 다음과 같은 결과를 볼 수 있습니다.

 

sourceMap 제거 후 결과

 

 

 

처음과 달리 sourceMap이 개발자 도구에서 확인되지 않을 것을 확인하실 수 있습니다.

 

 

 

 

 

 

 

이상으로 webpack을 이용하여 sourceMap 제거하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.