Angular 앱을 실행하기 위한 기능
앱을 실행하기 위한 기능을 알아보자. 아래 모든 기능은 app폴더 내에서 관리된다.
1. Index.html
프로젝트를 생성하면 src 폴더 안에 index.html 파일이 존재한다. index.html 파일을 보면 <app-root></app-root> 메타태그가 보이는데 여기에 루트 컴포넌트( app.componet.ts )가 임베드 된다.
참고 : 여기에서 '임베드 된다' 라는 의미는 컴포넌트에 의해 생성된 최종 마크업 소스로 대체 된다는 의미이다.
src > index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <app-root></app-root> </body> </html>
2. 컴포넌트( View Model )
뷰( 템플릿 )와 모델( 데이터 )를 관리한다. 컴포넌트가 실행되려면 생성 후 반드시 모듈 클래스에 등록해야 한다. 모듈 클래스에 대해서는 이후 별도로 설명하기로 한다. 먼저 컴포넌트의 몇가지 필수 메타 속성에 대해 알아보도록 하자.
아래는 프로젝트를 생성하면 app 폴더 내에 존재하는 루트 컴포넌트이다.
src > app > app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {}selector( 입력 타입 : 문자열 ) - 컴포넌트가 출력될 메타태그 이름을 입력 받는다. 현재 selector 값으로 index.html에 정의되어 있는 메타태그 이름이 설정되어 있다.
templateUrl( 입력 타입 : 문자열 ) - 템플릿 파일 주소를 입력 받는다.
- styleUrls( 입력 타입 : 배열 ) - CSS 주소를 입력받는다.
- providers( 입력 타입 : 배열 ) - 의존성 주입 클래스를 입력 받는다. 해당 컴포넌트에만 적용된다.
- animations( 입력 타입 : 배열 ) - trigger를 입력 받는다.
- 기타 ...
추가 설명 : 컴포넌트의 역활이 뷰, 모델이지만 angular에서 로직을 담당하는 Directive 클래스를 상속 받고 있기 때문에 실제 대부분의 로직을 처리할 수 있다.
3. 템플릿( View )
마크업으로 구성된 템플릿은 뷰를 담당한다. 컴포넌트는 반드시 하나의 템플릿을 갖는데 협업을 위해서 외부에 별도의 html 파일로 관리할 수 있다. 물론 templateUrl 속성 대신 templates 속성을 이용하면 인라인 마크업을 사용할 수도 있다. 이때 문자열 지정 기호로 따옴표( " ), 홀따옴표( ' ) 백틱(₩)을 사용할 수 있는데 백틱을 사용하면 멀티라인을 + 연산자 없이 입력할 수 있다.
src > app > app.component.html
<h1>My name is AppComponent</h1>
4. 모듈
모듈 클래스는 앱 실행 시작 컴포넌트 지정 및 모든 사용자 정의 컴포넌트, 디렉티브, 파이브는 모듈 클래스의 declarations 메타 속성에 등록되야 앱 실행 결과에 포함된다.
src > app > app.modules.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }declarations - 모든 컴포넌트, 디렉티브, 파이프 클래스를 입력 받는다.
imports - 모듈 관련 클래스를 입력 받는다.
providers - 서비스( 의존성 주입 )과련 클래스를 입력 받는다.
bootstrap - 앱 최초 실행 컴포넌트를 입력 받는다.
5. 빌드하기
작업이 끝났다면 실제 웹사이트에서 시연할 수 있는 최종 파일로 컴파일 해보자.
터미널 입력창에 아래와 같이 입력하면 프로젝트 폴더 내에 dist 폴더가 생성되고 최종 결과물이 출력된다.
> my-project npm run build
팁 : dist 폴더 내 index.html 파일을 열어보면 최종 결과 파일 경로가 모두 절대경로로 설정되어 있는데 경로를 바꾸고 싶다면 프로젝트 폴더 내 config > index.js 파일을 열어서 보자.
use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// 생략...
},
build: {
// 생략...
assetsPublicPath: '/',
build 속성의 assetsPublicPath 경로를 수정해주면 된다. 상대경로로 바꿀 경우의 예시 ) './'
6. 마무리
프로젝트를 생성하면 src 폴더에 index.html 파일과 app파일이 존재한다. app.component.ts 클래스는 app.module.ts 클래스의 bootstrap 속성에 등록되어 앱 최초 실행 지점으로 등록된다. 또한 모든 컴포넌트 클래스는 declarations 속성에 등록되야 앱 실행 결과에 포함된다. 컴포넌트만 정의해 놓고, 모듈에 등록하지 않는다면 화면에 반영이 되지 않는다는 걸 명심하자.
참고 : 그 밖에 index.html 파일과 app 내 모듈 클래스와 연결시켜주는 환경 파일이 존재하지만 그 부분은 실제 개발에 거의 들여다볼 필요가 없기 때문에 건너뛰기로 한다.