Angular 파일 구조와 처리 흐름
Angular 프로젝트의 파일 구조와 처리 흐름에 대해 알아보겠습니다.
1. Angular CLI
Angular CLI는 간단한 명령어를 사용하여 Angular 프로젝트의 스캐폴딩(Scaffolding, 프레임워크의 기본 골격)을 생성, 실행, 빌드 할 수 있도록 지원해주는 Command Line Interface 입니다. Angular CLI는 Angular 프로젝트의 스캐폴딩을 간단한 명령어로 생성해주어 개발환경 구축에 소요되는 시간을 최소화해줍니다.
Angular CLI가 지원하는 기능은 다음과 같습니다.
- Angular 프로젝트 스캐폴딩(Scaffolding) 생성
- Angular 프로젝트에 component, directive, service, class, interface 등의 구성요소 추가
- 내장 개발 서버를 사용한 Angular 프로젝트 실행 (LiveReload 지원)
- Unit/E2E(End-to-End) 테스트 환경 지원
- 배포를 위한 Angular 프로젝트 패키징 지원
아래의 Angular CLI 사이트에서 각종 명령어와 옵션 및 angular.json 설정 파일에 대한 상세한 내용을 확인할 수 있습니다.
1.1. Angular CLI 설치
Angular CLI는 npm 으로 아래 명령어를 실행하여 설치해줍니다.
angular-cli 설치
1 | npm install -g @angular/cli | cs |
angular-cli 최신 버전 설치
1 | npm install -g @angular/cli@latest | cs |
angular-cli 삭제
1 | npm uninstall -g @angular/cli | cs |
Angular CLI를 설치하면 다음과 같이 진행됩니다.
설치 완료 후 ng version 명령어로 정상적으로 설치되었는지 확인해줍니다.
1 | ng version | cs |
1.2. Angular 프로젝트 생성
ng new 명령어를 이용하여 Angular 프로젝트를 생성해줍니다.
1 | ng new [PROJECT_NAME] | cs |
Angular 프로젝트가 생성되면 아래와 같은 구조의 스캐폴딩이 생성됩니다.
1.3. Angular 프로젝트 실행
생성한 프로젝트를 local 환경에서 실행하기 위해 ng serve 명령어를 생성한 프로젝트의 root 디렉터리에서 사용해줍니다. 명령어를 실행하면 Angular CLI 가 내장하고 있는 개발용 서버를 실행합니다. 기본 포트로 4200번을 사용하는데 포트번호를 변경해 실행하려면 --port 옵션을 추가해줍니다.
Angular 프로젝트 실행
1 | ng serve | cs |
Angular 프로젝트 실행 (port 옵션 사용)
1 | ng serve --port 4300 | cs |
Angular 프로젝트 실행 후 브라우저에서 localhost:[PORT] 로 접속하여 확인할 수 있습니다.
Angular CLI 가 내장하고 있는 개발용 서버는 코드의 변경을 감지하여 자동으로 브라우저를 reload 하는 LiveReload 기능을 제공합니다. 코드 수정 후 파일을 저장하면 브라우저가 자동으로 reload 되어 변경 결과를 바로 확인할 수 있습니다.
2. Angular 애플리케이션의 파일 구조
Angular 프레임워크는 프로젝트 생성시 웹 애플리케이션 구축에 필요한 구조를 기본적으로 제공합니다. Angular 프로젝트의 기본 구조와 각 파일의 기능에 대해 알아보도록 하겠습니다.
2.1. src 폴더
Angular 프로젝트의 src 폴더는 모든 구성요소, css, image, font 와 같은 정적 파일 및 설정 파일 등 애플리케이션에 필수로 필요한 파일을 담고 있습니다. 개발자가 작성하는 대부분의 파일은 이 곳에 포함됩니다.
다음은 src 하위 폴더와 파일들에 대한 설명입니다.
- /app
Angular 구성요소가 위치 - /app/app.component(.ts, .html, .css, .spec.ts)
모든 component의 부모인 root component의 구성요소가 위치 - /app/app.module.ts
Angular 구성요소를 등록하는 root module - /assets
image, font와 같은 정적 파일이 위치 - /environments
빌드시 사용할 환경 설정 파일이 위치 - browserslist
Autoprefixer, babel 과 같은 frontend 적용 대상 브라우저를 공유하는 라이브러리 설정 파일 - favicon.ico
파비콘 파일 - index.html
웹 애플리케이션 실행시 처음으로 로딩되는 기본 페이지.
root component(/src/app/app.component.*) 의 셀렉터인 <app-root> 의 뷰가 로드되어 브라우저에 표시됨. - karma.conf.js
karma test runner 설정 파일. ng test 명령어 실행시 참조됨. - main.ts
프로젝트의 메인 파일.
root module(AppModule) 을 사용하여 애플리케이션을 실행함. - polyfills.ts
크로스 브라우징을 위한 polyfill 들을 import 하는 파일 - style.css
애플리케이션 전역에 사용되는 global css 파일 - test.ts
unit test 를 위한 메인 파일. - tsconfig(.app, .spec).json
TypeScript 컴파일 옵션 설정 파일 - typings.d.ts
TypeScript 타입 선언 파일
2.2. 기타 설정 파일
src 폴더 외에 다른 파일들은 테스트, 빌드, 배포 등을 위한 설정 파일입니다.
- /e2e
e2e(end-to-end) 테스트 관련 파일들이 위치. ng e2e 명령어 실행시 참조. - /node_modules
package.json 에 등록된 의존 모듈이 패키지 매니저에 의해 설치되는 저장소 - .editorconfig
코드 에디터 기본 설정 파일 - .gitignore
Git 소스 관리를 제외할 대상에 대한 설정 파일 - angular.json
Angular 및 Angular CLI를 위한 설정 파일. - package.json
의존 모듈 관리를 위한 패키지 매니저가 참조하는 파일 - README.md
프로젝트의 개요를 기술한 파일. Angular CLI가 기본 내용을 생성함. - tsconfig.json
TypeScript 트랜스파일 옵션 설정 파일 - tslint.json
TSlint가 사용하는 구문 체크 설정 파일. ng lint 명령어 실행시 참조.
- index.html
브라우저에서 웹 애플리케이션 실행시 가장 먼저 로딩하는 파일
angular.json 파일의 index 프로퍼티 설정에 의해 로드됨.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!-- index.html --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html> | cs |
- main.ts
프로젝트의 메인 진입 포인트로 root module(/src/app/app.module.ts) 을 부트스트랩하여 애플리케이션을 실행함.
angular.json 파일의 main 프로퍼티 설정에 의해 로드됨.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* main.ts */ import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); | cs |
- app.module.ts
@NgModule 데코레이터의 파라미터로 전달되는 메타데이터에 애플리케이션 전체 설정 정보를 저장한 root module
root component(/src/app/app.component.ts) 를 부트스트랩하여 실행함.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* app.module.ts */ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } | cs |
- app.component.ts
모든 component 들의 부모 역할을 담당하는 root component.
/src/index.html 의 <app-root> 에 component view 가 로드되어 브라우저에 출력됨.
(여기서는 @Component 데코레이터의 templateUrl 에 설정된 app.component.html 파일이 뷰로 로드되어 출력됨)
1 2 3 4 5 6 7 8 9 10 11 12 | /* app.component.ts */ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'my-app'; } | cs |
- 컴포넌트(Component)
템플릿과 메타데이터, 컴포넌트 클래스로 구성되며 데이터 바인딩에 의해 연결됨.
화면을 구성하는 뷰(View)를 생성하고 관리하는 것이 주된 역할. (화면은 1개 이상의 컴포넌트가 연동되어 구성) - 디렉티브(Directive)
애플리케이션 전역에서 사용할 수 있는 공통 관심사를 컴포넌트에서 분리하여 구현한 것.
컴포넌트의 복잡도를 낮추고 가독성을 높여줌.
Structural / Attribute Directive 로 구분하며, 넓은 관점에서 보면 컴포넌트 또한 디렉티브로 구분 할 수 있음. - 서비스(Service)
애플리케이션의 공통 로직을 담당.
애플리케이션 전역의 공통 관심사를 컴포넌트에서 분리하기 위해 사용
의존성 주입(Dependency Injection)이 가능한 클래스로 작성 - 라우터(Router)
컴포넌트를 교체하는 방법으로 뷰를 전환하여 화면 이동을 구현. - 모듈(NgModule)
기능적으로 관련된 구성 요소를 하나의 단위로 묶는 메커니즘.
모듈은 다른 모듈과 결합이 가능하고, Angular는 여러 모듈을 조합하여 애플리케이션을 구성함.
컴포넌트, 디렉티브, 파이프, 서비스 등의 Angular 구성요소는 모듈에 등록되어야 사용 가능함.
이상으로 Angular 파일 구조와 처리 흐름에 대해 알아봤습니다.
※ 참고 문헌
이웅모 지음, 『Angular Essentials』, 루비페이퍼(2018), p149 ~ p155. 05. Angular CLI
이웅모 지음, 『Angular Essentials』, 루비페이퍼(2018), p174 ~ p181. 06. Angular의 파일 구조와 처리 흐름
