AngularJS vs Angular: 소스 맵 연결 방식 비교

웹 개발에서 소스 맵(Source Map)은 디버깅을 쉽게 만들어주는 필수 요소입니다. 컴파일된 JavaScript 파일을 원본 코드와 연결해 브라우저 개발자 도구에서 원본 소스를 볼 수 있게 해주죠. 이번 포스트에서는 AngularJS와 Angular 2+(이하 Angular)의 소스 맵 생성 및 연결 방식의 차이를 알아보겠습니다.

소스 맵이란?

소스 맵은 압축되거나 트랜스파일된 JavaScript 파일을 원본 코드(TypeScript, ES6+ 등)와 매핑해주는 파일입니다. 이를 통해 디버깅 시 원본 코드를 쉽게 확인할 수 있습니다. AngularJS와 Angular는 소스 맵을 지원하지만, 사용하는 언어와 빌드 도구에 따라 방식이 다릅니다.

---

1. AngularJS의 소스 맵 연결 방식

AngularJS는 JavaScript 기반의 프레임워크로, 현대적인 빌드 도구가 없던 시절에 주로 사용되었습니다. 소스 맵 생성과 연결은 다음과 같이 이루어집니다:

• 빌드 도구: UglifyJS, Grunt, Gulp 같은 도구를 사용해 소스 맵을 생성합니다.
• 소스 맵 생성: JavaScript 파일을 압축할 때 UglifyJS 같은 도구에 --source-map 옵션을 추가합니다. 예:
  bash

   

  uglifyjs app.js -o app.min.js --source-map "filename=app.min.js.map"

  이 명령은 app.min.js와 app.min.js.map 파일을 생성합니다.
• 연결: 컴파일된 파일 끝에 소스 맵 파일을 연결하는 주석이 추가됩니다:
  javascript

   

  //# sourceMappingURL=app.min.js.map

• 특징:
  • JavaScript → 압축된 JavaScript 간 매핑.
  • TypeScript를 사용하지 않으므로 단순한 JavaScript 디버깅에 초점.
  • 대규모 프로젝트에서는 수동 설정이 필요해 관리가 복잡할 수 있음.

---

2. Angular의 소스 맵 연결 방식

Angular는 TypeScript 기반의 현대적인 프레임워크로, Angular CLI와 Webpack을 사용해 소스 맵 관리가 훨씬 간편합니다.

• 빌드 도구: Angular CLI가 Webpack 기반으로 빌드와 소스 맵 생성을 자동화합니다.
• 소스 맵 생성: Angular CLI 명령어로 소스 맵을 생성합니다. 예:
  bash

   

  ng build --prod --source-map

  이 명령은 main.js와 함께 main.js.map 파일을 생성합니다.
• 연결: 컴파일된 파일에 자동으로 소스 맵 연결 주석이 추가됩니다:
  javascript

   

  //# sourceMappingURL=main.js.map

• 특징:
  • TypeScript → JavaScript → 압축된 JavaScript 간 매핑을 지원해 디버깅이 정교함.
  • Angular CLI가 소스 맵 생성을 자동화해 편리.
  • AOT(Ahead-of-Time) 컴파일에서도 소스 맵 생성 가능.
  • source-map-explorer 같은 도구로 번들 분석 가능.

---

3. AngularJS와 Angular의 주요 차이

 

항목AngularJSAngular

언어	JavaScript	TypeScript
빌드 도구	UglifyJS, Grunt, Gulp (수동 설정)	Angular CLI (Webpack 기반, 자동화)
소스 맵 대상	JavaScript → 압축된 JavaScript	TypeScript → JavaScript → 압축된 JavaScript
디버깅	기본적인 JavaScript 디버깅	TypeScript 기반 정교한 디버깅
편의성	수동 설정 필요, 복잡할 수 있음	자동화로 간편, 대규모 프로젝트에 적합

---

4. 어떤 방식이 더 나을까?

• AngularJS: 소규모 프로젝트나 레거시 코드에서 적합하지만, 소스 맵 관리가 수동적이어서 대규모 프로젝트에서는 불편할 수 있습니다.
• Angular: TypeScript와 Angular CLI를 활용해 소스 맵 생성이 간편하고, 디버깅이 효율적입니다. 현대적인 웹 개발에 최적화되어 있습니다.

Angular로 마이그레이션하면 소스 맵 관리뿐만 아니라 전체 개발 경험도 크게 향상될 가능성이 높습니다!

---

마무리

AngularJS와 Angular는 소스 맵 생성 및 연결 방식에서 빌드 도구와 언어의 차이로 인해 큰 차이를 보입니다. Angular의 자동화된 빌드 프로세스는 디버깅을 더 쉽게 만들어주며, 대규모 프로젝트에 적합합니다.