앵귤러 프로젝트 기본 구조 및 핵심 파일 살펴보기

Frontend/Angular

앵귤러 프로젝트 기본 구조 및 핵심 파일 살펴보기

컴슈터 2024. 3. 21. 07:01

앵귤러 16 버전 기준으로 프로젝트 파일 구조를 알아보려고 한다. 앵귤러 버전별로 파일 구조가 다를 수 있으며, 타버전은 버전별 file-structure 문서를 참고하자.

앵귤러 프로젝트 구조

중요한 파일들 하나씩 살펴보기

angular.json 파일

이 파일은 워크스페이스에 있는 모든 프로젝트에 적용되는 Angular CLI 환경설정 파일이다. Angular CLI를 이용해서 빌드, 실행, 테스트할 때 사용하는 설정도 이 파일에서 구성한다.

이 파일에서 대표적인 중요한 키워드를 살펴보자.

"sourceRoot": "src" : 프로젝트의 루트 폴더는 src 폴더인 것을 알 수 있음
"outputPath": "dist/first-app" : 프로젝트 빌드시 dist 폴더가 만들어짐
"index": "src/index.html" : 인덱스 파일은 index.html 파일임
"browser": "src/main.ts" : 시작 지점이자 메인 파일은 main.ts 파일임

index.html 파일

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FirstApp</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>

✅ 웹사이트에 접근한 사용자가 보게 되는 메인 HTML 파일이다.
✅ 앱에 사용되는 JavaScript 파일과 CSS 파일은 Angular CLI가 빌드시점에 자동으로 index.html 파일에 추가하기 때문에 <script> 태그나 <link> 태그를 수동 작성할 필요가 없다. (좀 더 덧붙이자면 Angular CLI는 Webpack을 통해 번들링해서 실제 서버 실행시 관련 자원들을 동적으로 추가해준다. 빌드를 하면 dist 폴더가 만들어지고, JavaScript나 CSS 파일이 포함된 배포용 index.html 파일이 생기게 된다.)
✅ <body> 부분에는 <app-root>셀렉터가 들어가 있다.

main.ts 파일

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

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

✅ 애플리케이션의 메인 진입점으로, 우리가 만든 코드들의 컴파일을 브라우저에서 담당한다.
✅ JIT (Just-In-Time) 컴파일러를 사용하면 이 파일을 기준으로 애플리케이션의 최상위 모듈(AppModule)이 부트스트랩된다. (참고로 --aot 플래그를 사용하면 AOT 컴파일러가 사용된다)
✅ 소스에서 AppModule 변수는 app.module.ts 파일을 참고하고 있다.

app.module.ts 파일

import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [ // 컴포넌트, 지시자, 파이프 등이 들어옴
    AppComponent
  ],
  imports: [ // 다른 모듈들이 들어옴
    BrowserModule,
    AppRoutingModule
  ],
  providers: [ // View가 없는 서비스 로직들이 들어옴
    provideClientHydration()
  ],
  bootstrap: [AppComponent] // 처음 실행할 컴포넌트를 지정함
})
export class AppModule { }

✅ 애플리케이션 구성이 시작될 최상위 모듈 AppModule을 정의한다. 프로젝트 최초 생성시 AppComponent 컴포넌트만 존재하지만, 앱이 커질수록 컴포넌트도 늘어나게 된다.
✅ @NgModule 데코레이터를 사용했으며 AppComponet 컴포넌트를 부트스트랩 한다고 정의되어 있다.
✅ 맨 하단의 import, export 문법은 ES6에서 제공하는 모듈 시스템이다.

AppComponent 컴포넌트 관련 파일

AppComponent는 최상위 컴포넌트에 해당하며, 하나의 컴포넌트가 각자 역할에 따라 분리되어 있다.

app.component.ts : 최상위 컴포넌트 AppComponent 정의
app.component.html : 최상위 컴포넌트 AppComponent의 HTML 템플릿 정의
app.component.css : 최상위 컴포넌트 AppComponent의 CSS 스타일 정의
app.component.spec.ts : 최상위 컴포넌트 AppComponent의 유닛 테스트 스펙을 정의

또한 ng generate 명령어를 이용하여 컴포넌트를 만들 수 있다, 컴포넌트 생성시 위처럼 4개 파일이 세트로 만들어진다. 즉 4가지 파일이 하나로 뭉쳐진 레고 조각이라고 보면 된다.

app.component.ts 파일

import { Component } from '@angular/core';

@Component({
  selector: 'app-root', // CSS 셀렉터 같은 선택자
  templateUrl: './app.component.html', // 뷰에 대한 정의
  styleUrl: './app.component.css' // 스타일에 대한 정의
})
export class AppComponent {
  title = '개발새발';
}

✅ 사용자가 보는 화면은 최상위 컴포넌트인 AppComponent를 기준으로 구성된 뷰 계층이다. 개발자가 구현한 컴포넌트와 서비스도 AppComponent 안에서 동작한다.
✅ @의 의미는 TypeScript에서 제공하고 있는 데코레이터를 의미하며 @Component는 단순 클래스가 아니라 ngAngular Component 이라는 것을 정의한 클래스가 된다.
✅ 컴포넌트의 셀렉터가 app-root로 설정되어 있기 때문에 index.html 파일의 <app-root>에 해당 컴포넌트가 들어가진다. 셀렉터는 #app-todos 또는 .app-todos 처럼 특정 엘리먼트를 선택 가능하고 또는 엘레먼트 이름이 <app-root>인 DOM을 가르킬 수도 있다.
✅ templateUrl 은 app.component.html 파일로 설정되어있고 styleUrl은 app.component.css 파일로 설정되어 있다. AppComponent 클래스의 title 속성은 아래 html 파일과 바인딩되어 아래 템플릿에 표현이 된다.

app.component.html 파일

<div>
  {{ title }}
</div>

티스토리