앵귤러 컴포넌트는 웹에서 어떻게 시작되어 동작 하는 걸까요?
앵귤러 컴포넌트의 부트스트랩에 대해 알아보겠습니다.
이번 포스트에서는 아래 내용을 다루고 있습니다.
- Angular Bootstrap 과정
- Angular module이란
Bootstrap이란 무엇일까요?
기술적으로 프로그래밍 분야에서는 로드 및 시작 프로세스를 의미 합니다.
동명의 bootstrap이란 프레임워크도 있지만 잠시 잊어주세요:)
우리는 Angular에게 bootstraping이라고 불리는 프로세스를 통해 루트 컴포넌트를 로드하라고 지시해야 합니다.
간단히 부트스트랩 하기 위해 해야할 일은 다음과 같습니다.
- Index.html 파일을 설정한 후 애플리케이션을 호스팅 하기
- 컴포넌트를 부트스트랩 하기 위해 루트 Angular 모듈에 정의하기
이제 하나하나 알아보도록 하겠습니다.
우선 웹 애플리케이션이 어떻게 동작하는지 알아봅시다.
웹 애플리케이션의 작동
클라이언트 측 웹 애플리케이션 은 종종 아래 같이 작동합니다.
- 사용자가 특정 url에 액세스 합니다.
- 서버가 요청을 받은후, 기본 웹 페이지인 index.html을 반환하여 응답합니다. 응답을 받은 클라이언트(브라우저)는 해당 index.html를 수신 후 처리합니다. Angular의 경우 index.html 파일에는 여러 javascript파일로 트랜스파일 되어 번들(묶인)된 파일을 참조하는 스크립트 태그가 포함되어있습니다.
- 클라이언트(브라우저)는 해당 자바스크립트 파일을 다운해 처리하고 기본 페이지가 화면에 표시되게 됩니다.
트랜스파일이란
한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환하는 것을 의미합니다.
앵귤러의 코딩의 경우 일반적으로 Typescript를 브라우저가 알아들을 수 있는 ES6이전의 버전으로 변환 하게 됩니다.
index.html 파일에는 웹 애플리케이션의 메인 페이지가 포함되어 있습니다.
앵귤러와 같이 index.html 하나 만으로 모든 화면을 나타내는 응용프로그램을 single page application 줄여서 SPA라고 합니다.
걱정하지 않아도 됩니다. 단일 페이지라고 해서 페이지 하나만 보여지는건 아닙니다.
실제론 사용자에게 페이지가 많은 것처럼 보여지게됩니다.
이제 코드에서 살펴 보겠습니다.
Html에서 컴포넌트에 정의되어있는 selector의 이름을 이용하면 html에서는 템플릿에서 정의하고 있는 내용을 표시하게 됩니다.
템플릿에서는 이것(selector의 이름)을 directive(디렉티브)라고 합니다.
Directive는 기본적으로 div나 h태그와는 다른 Custom Element입니다.
디렉티브의 로드가 완료되면 컴포넌트의 템플릿에 정의된 html이 selector element tag (예제 코드의 <app-root></app-root>)사이에 삽입되어 페이지에 나타납니다.
하지만 Angular 컴파일러는 어떻게 custom element에 대해 알 수 있을까요?
답은 Angular모듈에 있습니다
Angular module이란
앵귤러 모듈은 애플리케이션을 기능 블록으로 구성하고 애플리케이션 내의 구역을 구분하는데 도움을 줍니다. 예를 들어 우리가 만드는 기능별로 모듈을 만들어서 관리 할 수가 있습니다.
또한 템플릿 환경도 제공합니다.
템플릿 환경을 제공한다라는 뜻은 Angular 컴파일러가 directive와 템플릿을 접하면 그것의 정의를 위해 Angular 모듈에서 찾아 잘 동작하게 해준다고 생각하시면 됩니다.
따라서 우리는 우리가 만든 컴포넌트를 컴파일러가 찾을 수 있도록 Angular 모듈에 component를 선언 해야합니다.
또한 브라우저에서 작동하는 앵귤러 애플리케이션을 만들기 위해서 앵귤러의 "BrowserModule"도 추가해야 합니다.
코드에서 살펴보겠습니다.
위의 코드는 앱의 루트 Angular 모듈입니다.
1.Class
Angular모듈 역시 클래스를 사용하여 정의합니다.
2.Decorator(메타데이터)
NgModule이라는 Decorator를 부착함으로써 Angular 모듈의 세부 정보를 정의하는 메타데이터를 전달하여 AppModule이라는 클래스를 Angular 모듈로 식별하게 하게 됩니다.
NgModule의 Decorator의 속성의 값은 배열입니다.
3.declarations
컴포넌트 중 어느 것이 이 모듈에 속하는지 정의하게 됩니다.
관례적으로 우리의 루트 애플리케이션 컴포넌트인 AppComponent는 애플리케이션 루트 Angular 모듈인 AppModule에 속하게 됩니다. 물론 이곳에 다른 Component도 추가 할 수 있습니다.
애플리케이션을 Angular 모듈로 구성하는 사례에 다른 포스트에서 이야기 해보겠습니다.
4.imports
Import Array에서는 Angular 모듈에 속해있는 모든 Component에 사용할 수 있는 외부 모듈을 정의합니다. 외부 모듈은 Angular에서 제공하는 모듈이나 타사 Angular 모듈이 될 수 있습니다.
예제에서는 BrowserModule과 AppRoutingMoudle를 가져오고 있습니다.
BrowserModule은 오류 처리와 같은 중요한 처리를 서비스프로바이더로 공급합니다. AppRoutingModule은 AppModule내의 라우팅에 관한 처리를 담당하는 모듈 입니다.
5.bootstrap
부트스트랩 배열은 애플리케이션의 시작 컴포넌트, 즉 AppComponent를 정의합니다. 시작 컴포넌트는 Index.html 파일에서 사용하는 selector를 포함해야 합니다.
위의 예제에서 구성된 프로젝트 폴더 구조는 다음과 같습니다.
여기까지 수고하셨습니다.
이상으로 앵귤러 부트스트랩 되는 과정을 살펴 보았습니다.
부트스트랩 과정을 이해 하고 나니 앵귤러와 가까워진 듯한 느낌이 드네요.
설명이 부족한 내용이나 궁금한 점이 있으면 댓글 작성해주세요.
함께 읽기
[프로그래밍/Angular] - 앵귤러 기초(Angular basic) 1.앵귤러 시작하기
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 6.바인딩, Interpolation(보간) (0) | 2022.01.16 |
|---|---|
| 앵귤러 기초(Angular basic) 5.템플릿, 컴포넌트 만들기 (0) | 2022.01.16 |
| 앵귤러 기초(Angular basic) 3.angular component (0) | 2022.01.13 |
| 앵귤러 기초(Angular basic) 2.앵귤러 개발 환경 구축 (4) | 2022.01.13 |
| 앵귤러 기초(Angular basic) 1.앵귤러 시작하기 (1) | 2022.01.12 |
댓글