IT 회사에서 즐겁게 지내기!

Angular CLI를 통해 Angular 프로젝트를 생성하는 것까지 진행했습니다.

그럼 이제 Angular 첫 페이지가 어떻게 만들어 지는가에 대해 알아보겠습니다.

자동으로 생성되는 많은 파일들이 있습니다.

그 중 지금 우리가 집중해서 볼 것은 3개의 파일과 1개의 Set입니다.

1. main.ts

2. app.module.ts

3. index.html

4. app.component. files (Set)

1. main.ts

Angular는 스크립트 언어인 JavaScript로 작성이 되지만, Compile되어 사용됩니다.

설정에 따라 JIT(Just-In-Time), 또는 AOT(Ahead-Of-Time) Compiler를 사용할 수 있습니다.

Compiler에 대해서는 자세히 다루지 않구요. (자세히 모르기도 합니다.)

이러한 빌드 작업의 시작점이 main.ts입니다.

마치 C의 main.c, C++의 main.cpp와 같은 느낌이죠?

main.ts는 Application의 진입점으로 사용할 시작 Module을 설정(AppModule)해줍니다.

main.ts

앞으로 수정할 일은 거의 없어보여요.

2. app.module.ts

가장 중요한 파일이라고 볼 수 있는데요.

main.ts에서 시작 Module로 설정한 그 Module입니다.

Angular Application을 어떻게 조립할지 결정하는 파일입니다.

어떤 Component들이 들어가고 어떤 Module들을 참조할지에 대한 정보를 담고 있어요.

app.module.ts

3. index.html

이 파일이 브라우저로 접속했을 때 보이는 화면입니다.

화면에서 봤던 것 만큼 많은 코드가 들어있지 않죠?

사실 <app-root></app-root>라는 자리에 Component가 들어가서 보여지기 때문입니다.

index.html

이 파일 또한 직접 편집할 일은 거의 없습니다.

Angular가 빌드시 필요한 js와 css파일들을 알아서 추가해주기 때문입니다.

필요한 js와 css파일들은 사실 Component에 담겨져 있습니다.

4. app.component.{ ts, html, css, spec.ts }

우리가 만들어 갈 Application의 root(뿌리)가 되는 Component입니다.

Application이 개발되어가면서 많은 Component들이 추가됩니다.

이 Component들을 사용하여 Application을 구성하는 Main Component라고 보시면 됩니다.

app.component.ts

전체 적으로 요약하면 아래와 같은 구조입니다.

전체 소스 구조