웹 앱 프레임워크 앵귤러(Angular) 기본 개념

앵귤러(Angular) 개념

 

앵귤러(Angular) 아키텍처 구현

앵귤러(Angular)는 HTML과 TypeScript로 클라이언트 애플리케이션을 개발할 때 사용하는 플랫폼이자 프레임워크이다.

앵귤러(Angular)는 TypeScript로 개발되었고 기본 제공되는 프레임워크의 기능은 라이브러리를 참조해 애플리케이션에 활용할 수 있다. 앵귤러(Angular) 애플리케이션을 설계하고 구축하는 데 사용하는 패턴과 기술 즉 아키텍처도 이 환경을 기반으로 구현한다.

 

 

 

 

최상위 모듈 AppModule

앵귤러(Angular) 애플리케이션은 NgModule를 초기화하고 실행하는 즉 부트스트랩하면서 시작된다. 모든 앵귤러(Angular) 애플리케이션에는 부트스트랩을 하기 위해 최상위 모듈을 꼭 갖는다.

 

이 모듈은 app.module.ts파일에 AppModule라고 정의하고 AppModule을 최상위 모듈이라 한다. AppModule 아래 자식 계층으로 구성된 NgModule있고, 애플리케이션의 규모가 작다면 NgModule은 하나만 있을 수도 있지만, 대부분은 좀 더 많은 기능 모듈로 구성된다.

 

 

 

 

컴포넌트(Comonent)의 묶음 NgModule

앵귤러(Angular) 애플리케이션의 구성 요소 중 가장 중요한 것은 컴포넌트(Comonent)의 묶음인 NgModule이며, 이 모듈은 비슷한 기능을 하나로 묶어 관리하기 위한 모듈이다.

앵귤러(Angular) 컴포넌트(Comonent)의 묶음 NgModule

위 이미지를 보고 조금 더 알아보자

예를 들어  A1, A2, A3, B1, B2, B3 기능들이 있다면, 이렇게 조각 난 기능들을 관리하기 위해선 비슷한 기능끼리 연결하고 묶어 사용하는 편이 관리하기 효율적 일 것이다. 효율 있게 관리하기 위해 컴포넌트(Comonent)로 비슷한 기능 A1, A2, A3 그리고 B1, B2, B3를 위 이미지처럼  Root Comp A, Root Comp B로 연결하고 연결한 컴포넌트(Comonent)를 각각 NgModule A, NgModule B로 묶어 사용한다.

 

 

 

 

컴포넌트(Comonent)와 뷰(View)

컴포넌트에는 뷰와 직접 관련 있는 기능만 정의한다. 컴포넌트에 뷰를 정의하는 목적은 화면에 어떤 엘리먼트가 어떤 데이터를 표시할지 지정하기 위함이다.

 

뷰와 직접관련이 없는 기능은 컴포넌트에 정의할 필요가 없다. 이런 로직은 서비스에 정의하고 컴포넌트에 의존성으로 주입해 사용한다. 이렇게 하면 코드를 모듈 단위로 관리할 수 있기 때문에 재사용하기 편하고 훨씬 효율적이다.

 

 

 

 

서비스(Service)와 의존성으로 주입(Dependency injection, DI)

서비스는 공통으로 사용하는 상수나 함수, 기능을 모아놓은 단위이다. 앵귤러(Angular)는 컴포넌트와 서비스를 확실하게 구분해, 모듈화하고 재사용 효율성을 높이는 것을 권장하고 있다.

 

이유는 컴포넌트에서 뷰와 관련된 로직을 다른 로직과 분리하면 컴포넌트 클래스를 간결하게 구성할 수 있고, 결과 적으로 컴포넌트 클래스를 유연하고 효율적으로 유지할 수 있다.

 

분리한 서비스와 같은 객체를 앵귤러(Angular) 프레임워크와 묶어 의존성 객체로 만들고 이렇게 프레임워크에 추가된 객체는 컴포넌트가 생성될 때 자유롭게 주입할 수 있다. 

 

 

 

 

데코레이터(Decorator)와 메타데이터(Matadata)

앵귤러(Angular)에 정의하는 서비스 클래스는 @데코레이터를 사용해 메타데이터를 지정하고 이 메타데이터는 앵귤러(Angular)가 서비스를 컴포넌트에 의존성으로 주입할 때 활용한다.

 

모듈, 컴포넌트, 서비스는 단순하게 @데코레이터가 붙은 클래스일 뿐이지만 이 @데코레이터를 지정했기 때문에 이 클래스가 어떤 역할을 하는지 앵귤러(Angular)가 알 수 있다.

 

 

 

 

메타데이터(Matadata) 사용 목적

컴포넌트 클래스에 메타데이터를 지정하면 템플릿을 뷰로 지정할 수 있으며, 일반적인 HTML 문법을 바탕으로 앵귤러(Angular)가 제공하는 디렉티브로 컴포넌트 데이터를 조작하거나 또는 바인딩으로 변수나 프로퍼티 값을 할당하거나 마크업 문법을 사용해 HTML형태로 사용할 수도 있다.

 

 

 

 

라우터(Router) 서비스

앵귤러(Angular) 애플리케이션에서는 여러 가지 뷰를 계층으로 구성, Router 서비스를 사용해 이 뷰들을 전환하면서 페이지를 이동할 수 있다. 이 Router 서비스 브라우저의 페이지 전환 로직을 활용하면서 정교하게 동작한다.