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를 편집하고 저장까지 할 수 있다.
(실제로 내가 써봐야한다. 오늘은 일단 넘어가고 써본 후에 글 다시 작성하기)
소스맵이 있어서 좋은점:
- 개발자들이 디버깅을 할때 브라우저에서 코드에 조금 더 쉽게 접근할 수 있다는 점.
(+update 2022.07.19↓)
개발자들이 보통 소스맵을 통해 디버깅 할 때에는 배포하지 않은 상태에서 디버깅을 하며, 소스맵으로 디버깅 하는 것이 쉽고 빠르다고 한다. 2번 단점과 연결되는데 현업에서는 남이 코드를 훔칠 수도 있고 보안상의 문제가 있기 때문에 배포할 때에 소스맵을 꼭 지우고 배포한다고 한다. 그래서 브라우저에서 디버깅 할 일은 별로 없다는 것... - 누군가가 내 웹사이트를 보고 쉽게 코드에 접근해서 공부할 수 있다는 점.
**하지만 단점으로:**
- 소스맵은 컴파일하는 시간이 조금 걸린다고 한다. 그래서 용량이 큰 사이트면 위험 할 수도...
- 사람들이 해당 사이트의 코드를 훔쳐갈 수 있다고 한다.
(참고:https://css-tricks.com/should-i-use-source-maps-in-production/)
결론
-
.map파일이 존재하는 이유는 브라우저에서 original source를 쉽게 접근할 수 있도록 만들기 위해서이다.
-
이러한 파일을 소스맵이라고 하는데 소스맵은 한마디로 압축된 파일과 원본코드를 연결해주는 연결고리이다. 비슷한 예로 Sass와 CSS 말고도 CoffeeScript와 JavaScript도 같은 맥락이다.
-
이 소스맵으로 개발자들은 디버깅도 할 수 있고 브라우저 즉석에서 수정도 가능하다. 하지만 용량이 크고 복잡한 파일들을 브라우저에서 수정하다 보면 꼬일 수도 있고 컴파일 시간도 걸리기 때문에 유의해야하는 점이 있다.
-
현업에서는 작업한 코드가 밖으로 유출되면 안되기 때문에 디버깅을 할 때에는 소스맵으로 한다고 해도 배포할 때에는 소스맵을 꼭 지우고 배포를 한다. 만약 브라우저에서 한 회사의 자산을 맘껏 볼 수 있다! 그러면 안되겠죠..?
-
개발을 접한지 오래 되지 않은 코린이/개린이는 사용할 일이 없기 때문에 false로 설정 하는게 대다수이다. 나처럼
