소스맵? 웹펙? 바벨?

소스맵

typeScript 소스는 JavaScript로 컴파일되어 실행되는데,

 

원래의 TypeScript 소스와 실행되는 JavaScript 사이의 매핑 정보를 가지고 있는

파일을 소스맵 이라고 한다

• Visual Studio 또는 Chrome의 개발 도구가 이파일을 사용한다
• Node.js는 TypeScript를 이해하지 못하기 때문에 TypeScript를 JavaScript로 컴파일 해주어야한다

**TypeScript디버깅시 source map을 사용하여 
실행되는 JavaScript에 상응하는 TypeScript 소스 정보를 얻게 된다.**

웹브라우저 , 자바스크립트 엔진에서는 자바스크립트가 동작하기 떄문에

타입스크립트 코드를 컴파일 해야한다

**- 컴파일 : 빌드 과정중 하나 ,코드를 기계어로 번역
- 빌드   : 코드 -> 컴파일 -> 링킹 -> 실행파일 시키는 과정
- 링킹   : 프로그래머가 직접만든 코드들 연결 , 제공되는 라이브러리 연결 (ex java - Scanner 를 쓰면 링킹 과정에서 자동으로 라이브러리에 연결 )
- 디버깅  : 오류를 제거하는 과정**

 

소스맵 파일을 사용하면 타입스크립트 코드를 디버깅 할수 있다

소스맵 파일은 .map 확장자로 자바스크립트 코드 조각을 원래언어에 매핑하는 JSON 형식의

데이터를 포함하고 있다.

 

디버깅 하기 :

IDE디버깅보다 크롬(웹) 에서 하는 디버깅을 추천한다

 

---

웹팩 과 바벨

번들링 

실제 애플리케이션은 수백, 수천 개의 파일로 구성되어 있다 만약 모든 파일을 각각 배포한다면

사용자는 웹 사이트 하나를 보기 위해 요청을 수백 번 이상 보내야 한다 이런 과정을 번들링 , 즉

많은 파일들을 최소화, 최적화 하는 방식을 사용하여 효율적으로 배포한다

 

웹팩 

• 빌드도구중 하나
• 자바스크립트 생태계 내 가장 유명한 번들러
• 타입스크립트 웹팩 통합하기 (공식) :https://webpack.kr/guides/typescript/

*빌드 : 코드 -> 컴파일 -> 링킹 -> 실행파일 시키는 과정

 

바벨 :

모든 브라우저가 ecma 스크립트의 모든 기능을 지원하지 않는다 이런 발생하는

크로스 브라우징 이슈 를 해결해주는 것이 바벨이다

바벨은 최신 자바스크립트 코드를 이전 버전을 바꾸어준다

---

참조 : https://starrecode.tistory.com/8

[JAVA/자바] 빌드와 컴파일러, 컴파일, 링크, 디버그

참조 : https://minhyeong-jang.github.io/2019/05/24/sourcemap