Angular

[Angular] 1. 앵귤러(Angular) 시작

엄정식 2024. 11. 12. 17:41

1. Angular 소개

Angular는 SPA 개발을 위한 구글의 오픈소스 프레임워크이다.

정적 타입을 제공하는 TypeScript를 주력 언어로 채택하여,
대규모 애플리케이션 개발에 보다 적합한 환경을 제공한다

Angular의 장점

1) 컴포넌트 기반 개발
컴포넌트 기반 개발(CBD)은 개발 생산성을 높이며 대규모 애플리케이션에 적합한 구조이다.

 

2) TypeScript 채택
Angular가 기본언어로 채택하고 있는 TypeScript의 명시적 타입 지정은
코드의 가독성을 높이고 예측할 수 있게 하며, 컴파일 단계에서 오류를 포착할 수 있는 장점이 있음

 

3) 개발도구의 통합 및 개발 환경 구축 자동화
Angular CLI를 통해 간편한 개발 환경 구축을 지원함
프레임워크를 도입할 때 장벽으로 손꼽히는 것 중 하나가 개발 환경 구축임을 미루어보면 이는 큰 장점임
간단한 명령어를 사용하여 프로젝트 생성에서 빌드, 테스트, 구성요소 추가 등을 간편하게 할 수 있으며,
개발용 서버를 내장하고 있어 실행 또한 가능

 

4) 성능의 향상

  • AoT 컴파일
    AoT 컴파일(Ahead of Time compilation)은 사전 컴파일 방식을 의미함
    예를 들어, ngIf, ngFor와 같은 구조 디렉티브를 브라우저가 실행 가능한 코드로 변환해야 하는데
    이러한 과정을 런타임에서 실시하지 않고, 사전에 컴파일하여 실행 속도를 향상시키는 기법임
  • Lazy Loading
    SPA의 단점을 극복하기 위한 대안으로, 애플리케이션 실행시점에
    모든 모듈을 한꺼번에 로딩하지 않고 필요한 시점에 필요한 모듈만을 로딩하는 방식
    현재 페이지에서 불필요한 모듈까지 로딩하는 낭비를 방지함으로써 페이지 로딩 속도를 높임
  • 코드 최적화
    'Mobile First'를 지향하는 고성능 프레임워크를 표방하는 만큼
    Angular 코드는 지속적으로 최적화되고 있음



2. Angular CLI

Angular CLI는 Angular 프로젝트 스캐폴딩을 생성, 실행, 빌드할수 있으며,
Angular의 다양한 구성요소를 선별적으로 추가할 수 있는 강력한 커맨드-라인 인터페이스
개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜서 동작을 확인할 수 있음

지원기능

  • Angular 프로젝트 생성
  • Angular 프로젝트에 컴포넌트, 디렉티브, 서비스, 파이프, 클래스, 인터페이스 등의 구성요소 추가
  • LiveReload를 지원하는 내장 개발 서버를 이용한 Angular 프로젝트 실행
  • Unit/E2E 테스트 환경 지원
  • 배포를 위한 Angular 프로젝트 패키징

기본 사용 방법

npm 패키지 매니저를 사용하여 간단하게 Angular CLI를 설치할 수 있음

$ npm install -g @angular/cli

@angular/cli는 퍼스트 파티 패키지로, SPA개발에 필요한 모든 도구를 포함하고 있음
컴포넌트, 서비스, 모듈 등 모든 파일들을 명령어로 쉽게 추가할 수 있고 기존 코드를 읽어 import문도 작성해줌
새로운 앵귤러 프로젝트를 생성하고, 빌드한 뒤에 실행하려면 다음과 같이 명령어를 실행하면 됨

 

$ ng new <프로젝트 이름> 
# 프로젝트 실행
$ cd <프로젝트 이름>
$ ng serve (--open, --port ..)

ng serve는 로컬 개발환경에서 애플리케이션을 빌드한 후에 서버를 실행하는 명령어
소스 코드가 변경되면 자동으로 재빌드하고 환경을 갱신

앵귤러에서 기본 포트는 4200번
브라우저에서 http://localhost:4200 으로 접근하면 애플리케이션이 실행되는 것을 확인할 수 있음

프로젝트 구성요소 생성

$ ng generate (ng g)

컴포넌트, 디렉티브, 서비스, 파이프, 모듈, 가드, 클래스, 인터페이스, Enum 등을 생성할 수 있음



3. Angular의 파일 구조와 처리 흐름

3-1. Angular 애플리케이션의 파일 구조

1) src 폴더

Angular 프로젝트는 컴포넌트, 디렉티브, 서비스, 모듈 등 Angular 구성 요소와 각종 설정 파일로 구성
src 폴더는 이러한 Angular의 모든 구성요소, 공통 CSS, 이미지나 폰트와 같은 정적파일, 설정 파일 등
애플리케이션 필수 파일을 담고 있음
src/app 폴더에는 Angular구성요소가 위치하며, 개발자가 작성하는 대부분의 파일은 이곳에 포함

- app/app.components.(ts, html, css, spec.ts) : 모든 컴포넌트의 부모 컴포넌트인 루트 컴포넌트를 구성하는 컴포넌트 클래스, 템플릿, CSS 유닛 테스트용 스펙 파일
- app/app.module.ts : Angular 구성요소를 등록하는 루트 모듈
- assets/ : 이미지나 폰트와 같은 정적 파일을 위한 폴더
- environments/ : 프로젝트 빌드 시에 사용될 프로덕션용/개발용 환경설정 파일이 담겨있는 폴더
- browserslist: Autoprefixer, babel과 같은 프론트엔드 도구 간에 적용 대상 브라우저를 공유하는 browserslist 라이브러리 설정 파일
- favicon.ico: 파비콘 파일
- index.html : 웹 애플리케이션 방문 시 처음으로 로딩되는 디폴트 페이지.
    루트 컴포넌트의 셀렉터인 <app-root>에 의해 루트 컴포넌트의 뷰가 로드되어 브라우저에 표시됩니다.
    빌드 시에는 번들링된 자바스크립트 파일이 자동 추가된 index.html이 /dist 폴더에 생성됩니다
- karma.conf.js : Karma test runner를 위한 설정 파일로. ng test 명령어 실행 시 참조됩니다
- main.ts : 프로젝트의 메인 진입점. 루트 모듈을 사용하여 애플리케이션을 부트스트랩(기동)합니다
- polyfills.ts: 크로스 브라우징을 위한 폴리필들을 임포트하는 역할을 합니다.(browser support 참고)
- styles.css: 애플리케이션 전역에 적용되는 글로벌 css 파일
- test.ts : 유닛 테스트를 위한 메인 진입점
- tsconfig.(app|spec).json: TypeScript 컴파일 옵션 설정 파일
- typings.d.ts : TypeScript를 위한 타입 선언 파일

 

2) 기타 설정 파일
src 폴더 밖의 파일들은 테스트, 빌드, 배포 등을 위한 각종 설정 파일

- e2e/: e2e(end-to-end) 테스트 관련 파일을 위한 폴더. e2e 테스트를 위해 Protractor가 사용하는 설정 파일인 protractor.conf.js가 담겨있습니다. ng e2e 명령어 실행 시 참조됩니다.
- node_modules/ : package.json에 등록된 의존 모듈이 패키지 매니저에 의해 설치되는 의존 모듈 저장소
- .editorconfig: 코드 에디터 기본 설정 파일
- .gitignore : Git 소스 관리 제외 대상을 위한 설정 파일
- angular.json : Angular CLI를 위한 설정 파일
- package.json : 의존 모듈 관리를 위해 패키지 매니저가 사용하는 모듈 관리 파일
- README.md : 프로젝트의 개요를 기술한 README 파일. Angular CLI가 기본적인 내용을 자동 생성합니다
- tsconfig.json : TypeScript 컴파일 옵션 설정 파일
- tslint.json : TSLint가 사용하는 linting(구문 체크) 설정 파일. ng lint 명령어 실행 시 참조됩니다.

 

3-2. Angular 애플리케이션의 처리 흐름

index.html

웹 브라우저가 가장 먼저 로딩하는 프로젝트 파일은 /my-app/dist/index.html
이것은 ng build 명령어로 프로젝트를 빌드했을 때 /my-app/dist/index.html에 번들링된 자바스크립트 파일이 추가되어 자동으로 생성되는 파일

🚀 index.html은 빌드의 결과물로 실제 배포시에는 서버로 이관됩니다.

ng serve 명령어에 의해 내장 개발 서버를 이용하여 로컬 환경에서 프로젝트를 실행(preview)하는 경우,
Angular CLI 내부적으로 빌드를 자동 수행하므로 빌드를 별도 실행하여 index.html를 생성할 필요는 없습니다.
자동으로 빌드되어 가상 드라이브에 저장되어있는 index.html을 내장 개발 서버가 로드한다고 이해하면 됩니다.

Angular 애플리케이션을 가동하기 위해서는 수많은 의존성 모듈(@angular/*, core-js, zone.js, RxJs 등)과
TypeScript 파일의 컴파일 결과물인 자바스크립트 파일을 로드할 필요가 있음
Angular는 모듈 번들러 Webpack을 사용하여 의존성 모듈과 자바스크립트 파일을 번들링 한 후,
수작업 없이 간편하게 로드할 수 있도록 자동화 기능을 제공

번들링의 결과물로 생성된 자바스크립트 파일들이 로드되어 실행되면서
Angular 애플리케이션은 동작하기 시작합니다. 번들링된 자바스크립트 파일은 아래와 같다.

  • main.js
  • polifills.js
  • styles.js
  • vendor.js
  • runtime.js

 

main.ts

main.ts는 프로젝트의 메인 진입점 입니다.
루트 모듈을 사용하여 애플리케이션을 부트스트랩(기동)함

// src/main.ts

...
platformBrowserDynamic().bootstrapModule(AppModule)
	.catch(err => console.log(err));

main.ts는 angular.json의 main 프로퍼티의 설정에 의해 로드

// angular.json
{
	...
	"architect": {
		"build" : {
			"builder" : "@angular-devkit/build-angular:browser",
			"options" : {
				"outputPath" : "dist/my-app",
				"index" : "src/index.html",
				"main" : "src/main.ts",
	...

 

app.module.ts

@NgModule 데코레이터의 인자로 전달되는 메타데이터에 애플리케이션 전체의 설정정보를 기술한 루트 모듈.
루트 모듈은 (/src/app/app.component.ts)를 부트스트랩 함

app.component.ts

모든 컴포넌트의 부모 역할을 담당하는 루트 컴포넌트
my-app 프로젝트의 경우 /dist/index.html의 app-root에 의해 루트 컴포넌트의 뷰가 로드되어
app-root의 콘텐츠로 브라우저에 표시