Sass map 파일이 뭔데?

c:\Users\Aron\Documents\zerobase-markup\assets\scss\test.css.map
c:\Users\Aron\Documents\zerobase-markup\assets\scss\test.css

VScode에서 Live Sass Compiler 설치 후 watchSass를 하게 되면 css 파일이 생성이 되는데 강사님과 다르게 나는 위에 표시한 map이란 파일이 추가로 생성 되었다. 궁금해서 찾아보았다.

결론부터 이야기 하면 중요한 포인트였다. 이 부분은 보안과도 관련된 부분이기에 프론트엔드를 공부하면서 꼭 짚고 넘어가야할 부분이기 때문이다.

map 파일의 기능

이 .map파일은 소스맵(.map파일)의 정보를 브라우저에게 제공하기 위한 파일이다. css파일이 압축(compressed)되지 않고 .map파일이 생성된 이상 개발자들이 브라우저의 개발 툴을 통해 라이브로 이 .map파일을 디버깅 할 수 있는 것이다.
그리고 브라우저에서 바로 scss를 편집하고 저장까지 할 수 있다.

(실제로 내가 써봐야한다. 오늘은 일단 넘어가고 써본 후에 글 다시 작성하기)

소스맵이 있어서 좋은점:

1. 개발자들이 디버깅을 할때 브라우저에서 코드에 조금 더 쉽게 접근할 수 있다는 점.
   (+update 2022.07.19↓)
   개발자들이 보통 소스맵을 통해 디버깅 할 때에는 배포하지 않은 상태에서 디버깅을 하며, 소스맵으로 디버깅 하는 것이 쉽고 빠르다고 한다. 2번 단점과 연결되는데 현업에서는 남이 코드를 훔칠 수도 있고 보안상의 문제가 있기 때문에 배포할 때에 소스맵을 꼭 지우고 배포한다고 한다. 그래서 브라우저에서 디버깅 할 일은 별로 없다는 것...
2. 누군가가 내 웹사이트를 보고 쉽게 코드에 접근해서 공부할 수 있다는 점.

1. 소스맵은 컴파일하는 시간이 조금 걸린다고 한다. 그래서 용량이 큰 사이트면 위험 할 수도...
2. 사람들이 해당 사이트의 코드를 훔쳐갈 수 있다고 한다.
   (참고:https://css-tricks.com/should-i-use-source-maps-in-production/)
   
   
   

결론

1. .map파일이 존재하는 이유는 브라우저에서 original source를 쉽게 접근할 수 있도록 만들기 위해서이다.

2. 이러한 파일을 소스맵이라고 하는데 소스맵은 한마디로 압축된 파일과 원본코드를 연결해주는 연결고리이다. 비슷한 예로 Sass와 CSS 말고도 CoffeeScript와 JavaScript도 같은 맥락이다.

3. 이 소스맵으로 개발자들은 디버깅도 할 수 있고 브라우저 즉석에서 수정도 가능하다. 하지만 용량이 크고 복잡한 파일들을 브라우저에서 수정하다 보면 꼬일 수도 있고 컴파일 시간도 걸리기 때문에 유의해야하는 점이 있다.

4. 현업에서는 작업한 코드가 밖으로 유출되면 안되기 때문에 디버깅을 할 때에는 소스맵으로 한다고 해도 배포할 때에는 소스맵을 꼭 지우고 배포를 한다. 만약 브라우저에서 한 회사의 자산을 맘껏 볼 수 있다! 그러면 안되겠죠..?

5. 개발을 접한지 오래 되지 않은 코린이/개린이는 사용할 일이 없기 때문에 false로 설정 하는게 대다수이다. 나처럼

참고 블로그
https://velog.io/@a_in/Scss-map