앵귤러
앵귤러는 HTML과 타입스크립트로 프론트앤드 어플리케이션을 만들 수 있도록 기능을 제공하는 플랫폼이자 프레임워크다.
앵귤러의 구성요소중 가장 중요한 것은 컴포넌트 묶음인 NgModule이다.
@NgModule({
declarations: [
AppComponent,
T2Component,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }NgModule은 클래스 데코레이터이며 어플리케이션을 구성하는 컴포넌트들과 필요 라이브러리들을 메타데이터로 가진 모듈이다.
앵귤러 어플리케이션은 부트스트랩하기위한 최상위모듈을 갖는다.
컴포넌트는 화면에 보여지는 뷰를 정의하며 화면에 어떤 요소노드가 어떤 데이터를 어떻게 표시할지 결정한다.
뷰를 구성하는 데이터를 가공하는 기능은 별도 서비스로 정의하고 컴포넌트에 의존성주입해서 사용하면 코드를 모듈화하여 관리할 수 있기때문에 재사용이 가능하고 유연성이 좋아진다.
구조적으로보면 모듈, 컴포넌트, 서비스는 데코레이터를 사용하는 클래스일 뿐이지만 데코레이터 메타데이터로 클래스가 어떤 역활을 하는지 앵귤러는 알 수 있게 된다.
컴포넌트 데코레이터 메타데이터에는 컴포넌트를 식별하는 HTML TAG정보가 있고 뷰를 구성하는 HTML 템플릿정보, 뷰의 CSS정보등이 있다.
템플릿은 HTML문법과 앵귤러 디렉티브, 바인딩마크업으로 구성되며 화면에 랜더링되어 보여진다.
앵귤러 어플리케이션은 여러개의 뷰를 계층으로 구성한다. 그리고 라우터서비스를 사용하여 이 뷰들을 전환해서 페이지를 이동할 수 있다.
라우터서비스는 브라우저의 페이지 전환로직을 활용하면서 정교하게 작동한다.
NgMoudle은 클래스데코레이터일뿐이며 제공된 메타데이터로 구성 컴포넌트들, 구성 라이브러리들, 프로바이더, 부트스트랩등의 정보를 가진다.
최상위모듈의 이름은 AppModule로 정한다.
모듈
앵플은 자바스크립 모듈과 앵플 모듈 2가지 모듈을 사용한다.
자바스크립트 모듈은 클래스,함수,변수..등을 파일단위로 구분해서 import해서 사용하기위한 모듈이다.
앵플 모듈은 유사한 기능들의 컴포넌트들을 묶은 클래스다.
이 클래스는 데코레이팅되어 컴포넌틀과 라이브러리들의 메타데이터를 가지고 있어 프레임워크가 뷰를 구성할때 사용한다.
기본적으로 뷰를 정의하는 컴포넌트는 필요한 템플릿에 고유식별자태그로 사용되어야 한다. 예) < app-login>< /app-login>
app-login은 컴포넌트 selector로서 앵플모듈에 등록되지않고 최상위 템플릿에 사용되어도 화면에 보이지 않는다.
최소한 앵플모듈에 등록되어야 하고 최상위모듈이 아닌 앵플모듈에 등록되면 export되어야 사용가능하고 최상위모듈에 등록하고 템플릿에 사용되면 화면에 보인다.
컴포넌트를 앵플모듈에 등록하는 과정이 불편요하다고 생각할 수 있다.
그러나 앵플모듈이 없으면 많은 컴포넌트들이 루트디렉토리에서 혼재되어 가독성이 안좋아진다.
모듈을 만들면 폴더가 만들어지기 때문에 유사한 기능의 컴포넌트들을 묶음으로서 프로젝트가 구조화가능하다.
컴포넌트
앵플에는 최상위모듈이 있고 메타데이터에는 첫번째로 로딩하는 컴포넌트가 명시되어있다.
이 컴포넌트는 DOM에서 앵플트 최상위요소노드가 된다.
컴포넌트도 데코레이팅된 클래스이며 메타데이터로 셀렉터, 뷰를 구성하는 HTML템플릿, CSS의 정보를 가지며 프레임워크가 이정보들을 이용해서 랜더링한다.
템플릿, 디렉티브, 데이터 바인딩
템플릿은 HTML마크업과 디렉티브와 데이터바인딩 마크업으로 구성된다.
디렉티브를 사용하면 요소노드를 확장할 수 있고 바인딩마크업을 사용하면 클래스프로퍼티와 동기화되고 화면은 랜더링된다.
데이터바인딩에는 2가지가 있다.
- 이벤트바인딩은 사용자동작에따라 클래스프로퍼티와 동기화된다.
- 프로퍼티바인딩은 프로퍼티가 변경되면 뷰도갱신된다.
앵귤러는 랜더링하기전에 디렉티브와 바인딩문법들을 확인해서 HTML요소노드와 DOM을 변형한후 랜더링한다.
서비스, 의존성 주입(Dependency injection, DI)
뷰에 보여지는 데이터는 사용하기전에 가공되는데 이 기능은 뷰와 직접적인 관련이 없을뿐아니라 다른 뷰에도 사용될수 있기 때문에 뷰를 소유한 컴포넌트의 구성이 될 필요가 없다.
별도의 서비스클래스로 만들어 여러 컴포넌트에서 재사용할 수 있도록 하는 것이 좋다.
서비스클래스는 @Inejctable 데코레이팅되어 컴포넌트나 다른 서비스에 의존성주입한다.
서버에서 데이터를 받아오거나 사용자입력을 검증한다던지 콘솔에 로그를 출력하는 로직은 뷰와 직접적인 관련이 없기때문에 서비스클래스로 구현하는 것이 좋다.
라우팅
앵귤러가 제공하는 Router NgModule을 사용하면 네비게이션주소를 전환하면서 어플리케이션의 상태를 변경할 수 있다.
페이지이동도 어플리케이션 상태가 변경되는 것으로 앵귤러의 페이지 전환방식은 브라우저의 페이지 전환방식을 바탕으로 구현되어있다.
- 주소표시줄에 url을 입력하면 브라우저가 해당 페이지로 전환된다.
- 페이지내 링크를 클릭하면 브라우저가 해당 페이지로 전환된다.
- 브라우저의 뒤로가기/앞으로가기 버튼을 클릭하면 브라우저 히스토리에따라 뒤로/앞으로 페이지를 전환한다.
앵귤러 라우터서비스는 페이지대신 뷰를 url과 맵핑한다.
사용자가 링크를 클릭하면 브라우저는 새로운 페이지로 전환하려고 하겠지만 라우터는 이 동작을 중지시키고 페이지 이동없이 뷰로 전환한다.
아직 로드되지 않은 모듈에있는 뷰로 전환하려고 하면 라우터가 지연로딩을 사용해서 모듈이 로드된후 뷰로 전환한다.
라우터는 미리 정의된 네비게이션룰과 데이터의 상태에따라 해당되는 뷰로 전환된다.
라우터 서비스는 브라우저의 히스토리에 로그를 저장하며 이 로그를 이용해서 뒤로가기 / 앞으로가기 버튼에도 반응하도록 한다.
