[Angular] 08. 번들링과 배포

교재 : [Angular Development with TypeScript]

링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159

*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다.

Chapter08. 번들링과 배포

학습목표 : 

1. 배포 달성을 위한 목적과 Webpack의 개념에 대해 설명할 수 있다.

→배포를 달성하기 위한 목적은 다음과 같다.

- 배포되는 웹 애플리케이션의 용량이 작아야 한다.

- 브라우저에서 서버에 요청하는 HTTP 횟수가 적어야 한다. 

Webpack은 애플리케이션에서 사용하는 CSS 스타일이나 이미지를 모두 모아 한 파일로 번들링하며, 설정 방법도 간단하다. Webpack은 브라우저에서 실행되는 웹 애플리케이션에 특화되어 만들어졌으며, 별다른 플러그인 없이도 간단한 설정으로 웹 애플리케이션 빌드 작업을 자동화할 수 있다.

2. Angular CLI 커맨드에 대해 설명할 수 있다.

→ng serve: 번들링 결과물을 메모리에 생성하고 이 애플리케이션을 제공하는 서버를 실행한다.

ng build: 애플리케이션을 JavaScript 코드로 변환하고 의존성 패키지를 모두 번들링한다. 번들링 결과물은 dist 폴더에 생성된다.

학습내용  : 

이번 차시에서는 번들링과 배포에 대해 학습합니다.

8차시 학습에서 중요한 키워드는 [Grunt와 Gulp], [Webpack], [Angular CLI]입니다.

각 키워드에 대한 설명은 다음과 같습니다.

[Grunt와 Gulp]

Grunt와 Gulp는 널리 알려진 범용 태스크 러너다. 

[Webpack]

Webpack은 브라우저에서 실행되는 웹 애플리케이션에 특화되어 만들어졌으며, 별다른 플러그인 없이도 간단한 설정으로 웹 애플리케이션 빌드 작업을 자동화할 수 있다.

[Angular CLI]

Angular CLI는 커맨드라인 툴이며 Angular 애플리케이션의 기본 툴을 만드는 것부터 시작해서 컴포넌트나 모듈, 서비스를 커맨드라인 명령을 생성하고, 테스트나 빌드도 실행하며, 배포까지 자동화해서 Angular 애플리케이션 전체 개발 단계에 적용할 수 있다.

학습요약 : 

 

• 프로그래밍 언어나 프레임워크에 관계없이, 배포는 다음 목적을 달성하기 위해 수행한다. 두 가지 모두 애플리케이션을 빠르게 실행하기 위한 것이다.

 배포되는 웹 애플리케이션의 용량이 작아야 한다.

 브라우저에서 서버에 요청하는 HTTP 횟수가 적어야 한다. 

• JavaScript 웹 애플리케이션을 배포하는 툴은 여러 개가 있으며, 기본적으로 Node 환경을 사용하고 패키지 매니저로 설치할 수 있다. 배포 툴은 다음 두 종류로 나눌 수 있다.

 태스크 러너

 모듈 로더와 번들러

• Grunt와 Gulp는 널리 알려진 범용 태스크 러너다. 하지만 이 툴들은 JavaScript 애플리케이션에 특화된 것은 아니며, Node.js 환경에서 실행되는 작업을 정의하고 실행하기만 한다. 

• Webpack은 애플리케이션에서 사용하는 CSS 스타일이나 이미지를 모두 모아 한 파일로 번들링하며, 설정 방법도 간단하다. Webpack은 브라우저에서 실행되는 웹 애플리케이션에 특화되어 만들어졌으며, 별다른 플러그인 없이도 간단한 설정으로 웹 애플리케이션 빌드 작업을 자동화할 수 있다.

• 일반적으로 빌드 자동화 도구는 빌드 과정을 커스터마이징할 수 있는 기능을 제공하는데, Webpack에서는 이때 로더와 플러그인을 사용한다.

• 로더는 어떤 파일을 다른 형식으로 변환할 때 사용한다. 

• 어떤 경우에는 로더가 실행되기 전에 미리 처리해야 하는 작업이 있을 수 있다. 예를 들면 TypeScript 파일을 JavaScript 파일로 변환하기 전에 TSLint 툴로 검사해서 코드의 가독성이나 유지보수 편의성, 코딩 스타일을 확인할 수 있는데, Webpack 설정 파일의 preLoaders 항목에 이 작업을 등록할 수 있다.

preLoaders : [

{

   test : /\.ts$/,

   exclude : /node_modules/,

   loader : “tslint”

}

]

• arn build 명령 대신 yarn start 명령을 실행하면 webpack-dev-server이 코드를 번들링하는데, 번들링 결과물을 dist 폴더에 만드는 대신 메모리에 올려서 서버로 제공한다. 

• Angular CLI는 커맨드라인 툴이며 Angular 애플리케이션의 기본 툴을 만드는 것부터 시작해서 컴포넌트나 모듈, 서비스를 커맨드라인 명령을 생성하고, 테스트나 빌드도 실행하며, 배포까지 자동화해서 Angular 애플리케이션 전체 개발 단계에 적용할 수 있다. 

• 다음 명령을 실행하면 Angular CLI를 전역에 설치한다.

npm install -g @angular/cli

• Angular CLI를 설치하면 커맨드라인데 ng 명령을 실행할 수 있다. 먼저, 새 프로젝트를 생성하려면 new 커맨드를 사용한다. 이때 프로젝트 이름을 밑줄(_)을 사용할 수 없고, 문자와 숫자, 대시 기호(-)만 사용할 수 있다.

• Angular CLI는 Angular 애플리케이션을 관리하는 커맨드를 제공한다.

 ng serve: 번들링 결과물을 메모리에 생성하고 이 애플리케이션을 제공하는 서버를 실행한다.

 ne generate: 프로젝트에 Angular 구성 요소를 추가한다. 커맨드를 축약해서 ng g로 사용할 수도 있다. 이 명령으로 생성할 수 있는 목록을 확인하려면 ng help generate를 실행해보자. 컴포넌트와 서비스는 다음과 같이 생성한다. 

 ng g c <컴포넌트 이름>: 컴포넌트를 추가한다. 이 명령을 실행하면 TypeScript 소스 파일과 TypeScript 유닛 테스트 파일, 템플릿용 HTML 파일, 스타일용 CSS 파일을 함께 만든다. 템플릿과 스타일을 인라인으로 구성하려면 ng g c <컴포넌트 이름> --inline-styles --inline-template 명령을 실행하면 된다. 테스트 파일을 만들지 않으려면 --spec=false 옵션을 사용한다. 

 ng g s <서비스 이름>: 서비스를 추가한다. 이 명령을 실행하면 TypeScript 소스 파일과 TypeScript 유닛 테스트 파일을 만든다.

 ng test: Karma 테스트 러너를 실행해서 유닛 테스트를 수행한다. 

 ng build: 애플리케이션을 JavaScript 코드로 변환하고 의존성 패키지를 모두 번들링한다. 번들링 결과물은 dist 폴더에 생성된다. 

• 애플리케이션 코드를 번들링하고 빌드하는 과정은 개발 초기부터 자동화되어야 한다. 

• 애플리케이션을 번들링하면 파일을 내려받는 서버 요청 횟수가 줄어들고, 불필요한 네트워크 사용량도 줄일 수 있다. 

• 소스맵을 생성하면 TypeScript 소스 코드를 보면서 디버깅할 수 있고, 브라우저에서 개발자도구를 열었을 때만 소스맵이 적용된다. 운영 모드로 빌드할 때도 소스맵은 생성하는 것이 좋다. 

• 빌드 작업과 배포 작업은 npm 스크립트를 사용하자. npm 스크립트는 아주 단순하며 Node 환경에서는 이미 설치되어있기 때문에 다른 툴을 추가로 설치할 필요도 없다.

• 개발 과정을 자동화하는 Angular CLI를 사용해서 프로젝트를 만들어 보는 것도 좋다.