Angular essentials
(https://book.naver.com/bookdb/book_detail.nhn?bid=13761643)
06. Angular의 파일 구조와 처리 흐름
6.1 Angular 어플리케이션의 파일 구조
angular는 프레임워크 이므로 웹 애플리케이션 구축에 기본적으로 필요한 기능의 구현체를 정형화된 구조로 제공한다. 이를 바탕으로 우리의 애플리케이션에 요구되는 기능을 추가하는 방식으로 애플리케이션을 완성해 간다. 따라서 프레임워크의 학습은 정형화된 프레임 워크의 구조에 익숙해지는 것으로 시작한다.
6.1.1 src 폴더
src 폴더는 Angular의 모든 구성요소, 공통 CSS, 이미지나 폰트와 같은정적 파일, 설정 파일등 애플리케이션의 필수 파일을 담고 있다. 개발자가 작성하는 대부분의 파일이 이곳에 포함된다.
- app/app.component.(ts, html, css, spec.ts) : 모든 컴포넌트의 부모 컴포넌트인 루트 컴포넌트를 구성하는 컴포넌트 클래스, 템플릿, CSS, 유닛 테스트용 스펙 파일
- app/app.module.ts : Angular의 모든 구성요소를 등록하는 루트 모듈
- assets/ : 이미지, 폰트와 같은 정적 파일을 위한 폴더
- environments/ : 프로젝트 빌드 시에 사용될 프로덕션/개발용 환경 설정 파일이 담겨있는 폴더
- browserslist/ : autoprefixer, babel과 같은 프런트엔드 도구 간의 적용 대상 브라우저를 공유하는 browserslist 의 설정 파일
- favicon.ico : 파비콘 파일
- index.html : 웹 어플리케이션에 방문 시 처음으로 로딩되는 디폴트 페이지, 루트 컴포넌트(app.component.*)의 셀렉터(\<app-root>)에 의해 루트 컴포넌트의 뷰가 로드되어 브라우저에 표시된다. (빌드 시에는 번들링된 자바스크립트 파일이 자동 추가된 index.html이 dist 폴더에 생성 됨)
- karma.conf : karma test runner 를 위한 설정 파일로 ng test 명령어 실행 시 참조 됨
- main.ts : 프로젝트의 메인 진입점, 루트 모듈(AppModule)을 사용하여 애플리케이션의 부트스트랩(기동) 한다.
- polyfills.ts : 크로스 브라우징을 위한 폴리필) 들을 임포트하는 역활을 한다.
- styles.css : 애플리케이션 전역에 적용되는 글로벌 CSS파일
- test.ts : 유닛 테스트를 위한 메인 진입점
- tsconfig.(app|spec).json : TypeScript 컴파일 옵션 설정 파일
- typings.d.ts : TypeScript를 위한 타입 선언 파일
6.1.2 기타 설정 파일
- e2e/ : e2e(end-to-end) 테스트 관련 파일을 위한 폴더
- node_modules/ : package.json에 등록된 의존 모듈이 패키지 매니저에 의해 설치되는 의존 모듈 저장소
- .editorconfig : 코드 에디터 기본 설정 파일 (https://editorconfig.org/)
- .gitignore : git 소스 관리 제외 대상을 위한 설정 파일
- angular.json : Angular CLI를 위한 설정 파일
- package.json : 의존 모듈 관리를 위해 패키지 매니저(npm, yarn등)가 사용하는 모듈 관리 파일
- README.md : 프로젝트의 개요를 기술한 README 파일, Angular CLI가 기본적인 내용을 자동 생성
- tsconfig.json : TypeScript 컴파일 옵션 설정 파일
- tslint.json : TSLint가 사용하는 linting(구문 체크) 설정 파일로 ng init 명령어 실행 시 참조
6.2 Angular 애플리케이션의 처리 흐름
index.html
웹 브라우저가 가장 먼저 로딩하는 프로젝트 파일로 경로는 /my-app/dist/index.html 이지만 이 것은 /my-app/src/index.html이 ng build 명령어로 자바스크립트 파일이 추가 되어 자동 생성된 파일이다.
Angular 애플리케이션을 기동하기 위해서는 수 많은 의존성 모듈(@angular/*, core-js, zone.js, Rxjs.js 등등)과 TypeScript 파일의 컴파일 결과물인 자바스크립트 파일을 로드할 필요가 있는데 Angular는 모듈 번들러 webpack을 사용하여 의존성 모듈과 자바스크립트 파일을 번들링한 후, 수작업 없이 간편하게 로드할 수 있도록 자동화 기능을 제공한다.
번들링의 결과물로 생성된 JS파일들이 로드되어 실행되면서 Angular 애플리케이션은 동작하기 시작한다. 번들링된 JS파일은 아래와 같다.
- main.js
- polyfills.js
- styles.js
- vendor.js
- runtime.js
main.ts
main.ts는 프로젝트의 메인 진입점(main entry point)로 루트 모듈(/src/app/app.modules.ts)을 사용하여 애플리케이션을 기동(부트스트랩) 한다.
(main.ts는 angular.json의 main프로퍼티의 설정에 의해 로드 된다.)
app.modules.ts
@NgModule 데코레이터의 인자로 전달되는 메타데이터에 애플리케이션 전체의 설정 정보를 기술한 루트 모듈, 루트 모듈은 루트 컴포넌트 (/src/app/app.component.ts)를 기동(부트스트랩)한다.
app.component.ts
모든 컴포넌트의 부모 역활을 담당하는 루트 컴포넌트로 my-app 프로젝트의 경우 /dist/index.html 의 \<app-root>에 의해 루트 컴포넌트의 뷰가 로드 되어 콘텐츠(\<app-root>의 콘텐츠)로 브라우저에 표시된다.
6.3 Angular의 구성요소
Angular 애플리케이션의 아래의 구성요소를 조합하여 구축한다.
컴포넌트(component)
컴포넌트는 켐플릿과 메타 데이터, 컴포넌트 클래스로 구성되며 데이터 바인딩에 의해 연결된다.
컴포넌트는 화면을 구성하는 뷰(view)를 생성하고 관리하는 것이 주된 역활이며 화면은 1개 이상의 컴포넌트를 조립하여 구성한다.
디렉티브(Directive)
애플리케이션 전역에서 사용할 수 있는 뷰에 관련한 공통 관심사를 컴포넌트에서 분리하여 구현한 것으로 컴포넌트의 복잡도를 낮추고 가독성을 높인다.
구조 디렉티브(structual directive), 어트리뷰트 디렉티브(attribute directive)로 구분할 수 있으며 큰 틀에서 컴포넌트 또한 디렉티브로 구분할 수 있다.
서비스(Service))
다양한 목적의 애플리케이션 공통 로직을 담당한다. 컴포넌트에서 애플리케이션 전역 관심사를 분리하기 위해 사용되며 의존성 주입(dependency injection)이 가능한 클래스로 작성
라우터(Router)
컴포넌트를 교체하는 방법으로 뷰를 전환하여 화면 간 이동을 구현
모듈(NgModule)
기능적으로 관련된 구성 요소를 하나의 단위로 묶는 메커니즘을 말한다. 모듈은 관련이 있는 기능들이 응집된 기능 블록으로 애플리케이션을 구성하는 하나의 단위를 만들며 모듈은 다른 모듈과 결합할 수 있으며 Angular는 여러 모듈을 조합하여 애플리케이션을 구성한다.
컴포넌트, 디렉티브, 파이프, 서비스등의 Angular 구성요소는 모듈에 등록되어야 사용할 수 있다.
Angular는 컴포넌트를 중심으로 Angular 구성요소를 조합하여 애플리케이션을 구축한다.
- 뷰를 담당하는 컴포넌트를 중심으로 화면을 구성
- 디렉티브와 서비스를 사용하여 애플리케이션 전역의 관심사를 분리하고 컴포넌트는 필요 시 디렉티브와 서비스를 사용
- 라우터는 컴포넌트를 교체하는 방식으로 뷰를 전환하여 화면 간 이동을 구현
- 모듈은 관련된 구성요소를 하나로 묶어 애플리케이션을 구성하는 하나의 단위를 만드는 역활을 함