[TIL] 소스맵(Source Map)

  # 배경  

웹 프론트엔드 개발자로 일하고 있는 회사 동료 분이 현재 운영계에서 소스맵을 통해 우리의 코드가 오픈되는 것을 이야기하면서 소스맵을 비활성화 하는 방법을 제안하였다. 

 

  # 소스맵(Source Map)이란?  

- 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 리소들을 압축하는데 이 빌드, 배포된 파일을 원본 파일과 서로 연결시켜주는 기능을 한다. 
- 원본의 파일을 볼 수 있기 때문에 소스맵이 빌드,배포한 파일에서 에러가 날 때 디버깅이 가능할 수 있도록 도와주는 기능을 한다. 이런 디버깅은 편의성을 제공하지만 결국 코드가 노출이 되기 때문에 보안의 이슈가 발생할 수 있다.

- 원본파일과 연결을 시켜주는 역할을 하기 때문에 소스맵이 활성화가 되면 메모리를 많이 쓰게 되면 빌드 시간이 오래걸리게 된다. 비활성화하면 메모리를 덜 써 빌드를 빨리 해준다는 장점이 있다.

 

  ## 소스맵 비활성화  
- package.json의 "scripts"에 GENERATE_SOURCEMAP=false를 적용한다. 

  "scripts" : {
        "build": "GENERATE_SOURCEMAP=false react-scripts build"
    }

- 회사에서는 배포된 코드에 대한 디버깅이 가능하다는 편의성을 위해서 개발계는 소스맵을 활성화하고 운영계는 비활성화하는 것으로 논의를 마쳤다.

 

  ## 소스맵을 활용한 디버깅 방법  

 

 https://ichi.pro/ko/soseu-maeb-eul-sayonghayeo-ninjacheoleom-react-aeb-dibeogeu-217909740938983

소스 맵을 사용하여 닌자처럼 React 앱 디버그

 

- 참고하면 좋을 내용(보안 이슈 관련)

https://owasp.org/