[Angular] Application Structure

Angular 프레임워크 애플리케이션 파일 구조

글로벌로 angular-cli를 설치하고 ng new <app-name>을 실행하면 angular 스타일 가이드의 기본 애플리케이션 구조, 네이밍 룰, 코딩 컨벤션 등을 준수하고 생성된다.

 

1. src 폴더

- Angular 프로젝트는 컴포넌트, 디렉티브, 서비스, 모듈 등 Angluar 구성요소와 각종 설정 파일로 구성된다. src 폴더에서는 Angular의 모든 구성요소, 공통 CSS, 이미지와 폰트와 같은 정적 파일, 설정 파일 등 애플리케이션의 필수 파일을 담고 있다.

• app/app.component.{ts, html, css, sepc.ts}: 모든 컴포넌트의 부모 컴포넌트인 루트 컴포넌트를 구성하는 컴포넌트 클래스, 템플릿, CSS, 유닛 테스트용 스펙 파일이다.
• app/app.module.ts: Angular 구성요소를 등록하는 루트 모듈이다.
• assets/: 이미지나 폰트와 같은 정적 파일을 위한 폴더이다.
• environmets/: 프로젝트 빌드 시에 사용될 production/development 환경 설정 파일이 담겨있는 파일이다.
• browserslist: Autoprefixer, babel과 같은 frontend 도구 간에 적용 대상 브라우저를 공유하는 browserslist 라이브러리 설정 파일이다.
• favicon.ico: 파비콘 파일
• index.html: 처음으로 로딩되는 디폴트 페이지이고 루트 컴포넌트(/src/app/app.component.*)의 셀렉터인 <app-root>에 의해 루트 컴포넌트의 뷰가 로드되어 브라우저에 표시된다. 빌드 시에는 bundle처리된 자바스크립트 파일이 자동 추가된 index.html이 /dist폴더에 저장된다.
• karma.conf.js: Karma tset runner를 위한 설정 파일.
• main.ts: 프로젝트의 메인 진입점. 루트 모듈을 사용하여 애플리케이션을 부트스트랩한다.
• polyfills.ts: 크로스 브라우징을 위한 폴리필들을 임포트하는 역할을 한다.
• style.css: 애플리케이션 전역에 적용되는 글로벌 CSS이다.
• test.ts: 유닛 테스트를 위한 진입점 파일이다.
• tsconfig.{app|spec}.json: 타입스크립트 컴파일 옵션 설정 파일이다.
• typings.d.ts: 타입스크립트를 위한 타입 선언 파일이다. 

2. 기타 폴더

- src 폴더 밖의 테스트, 빌드, 배포 등을 위한 설정 파일 및 폴더.

• e2e/: End-to-End 테스트 관련 파일을 위한 폴더이다. e2e테스트를 위해 Protractor가 사용하는 설정 파일인 protractor.conf.js가 담겨있다.
• node_modules/: package에 등록된 의존 모듈이 패키지 매니저에 의해 설치되는 의존 모듈 저장소이다.
• .editorconfig: 코드 에디터 기본 설정 파일이다.
• .gitignore: Git 소스 관리 제외 대상 관리 파일이다.
• angular.json: Angualr CLI를 위한 설정 파일이다.
• package.json: 의존 모듈 관리를 위해 패키지 매니저가 사용하는 모듈 관리 파일이다.
• README.md: 프로젝트 설명을 위한 파일이다.
• tsconfig.json: 타입스크립트 컴파일 옵션 설정 파일이다.
• tslint.json: TSLint가 사용하는 구문 체크 설정 파일이다.