[Angular]Angular 개요

Jaeyoung Lee·2020년 3월 14일

Angular Metadata Module component dependency injection service

Angular 공식 가이드

목록 보기

1/2

*본 글은 앵귤러 공식 홈페이지(http://angular.io)의 Doc 항목을 한국어로 요약정리한 글임을 밝힙니다.

Angular 개요

Angular는 HTML과 TypeScript로 클라이언트 SPA(싱글 페이지 애플리케이션)를 개발할 때 사용되는 플랫폼이자 프레임워크입니다. Angular 자체도 TypeScript로 개발되었으며, 개발자가 앱으로 참조시키는 프레임워크의 기능들을 TypeScript 라이브러리처럼 사용할 수 있습니다.

다음은 Angular 애플리케이션 아키텍처는 다음의 기본 원칙을 기반으로 합니다.

기본 구성요소인 NgModules는 Component들의 묶음입니다.

NgModules는 프로젝트 내의 연관된 코드들을 기능적인 집합들로 합칩니다.

따라서, Angular 애플리케이션은 NgModules로 대표되는 하나의 집합으로 정의됩니다.

Angular 애플리케이션은 최소 한 개의 root module을 가지며, 이 root module은 bootstraping을 실현하며 대게 다수의 feature modules를 가집니다.

컴포넌트는 "뷰"를 정의하는데, 뷰는 스크린 엘리먼트들의 집합으로, 앵귤러는 이를 프로그램 로직과 데이터에 따라 수정할 수 있습니다.
컴포넌트들을 "서비스"를 사용하는데, 이는 뷰와 직접적으로 관련이 적은 특정한 기능을 제공합니다. "서비스 프로바이더"는 컴포넌트에 "의존성"으로 "주입"될 수 있는데, 이는 코드를 모듈화 하고, 재사용 가능하며, 효율적으로 만들어줍니다.

컴포넌트와 서비스는 클래스이며 "데코레이터"(@)가 이 클래스의 타입과 메타데이터(데이터를 설명하는 데이터)를 제공하며 Angular가 이 클래스를 어떻게 사용하는지 알려줍니다.

[컴포넌트] 클래스에 메타데이터를 사용하면 뷰를 정의하는 "템플릿"을 컴포넌트에 연결하여 사용할 수 있습니다. 템플릿은 일반 HTML에 Angular가 제공하는 directives와 binding markup을 더한 것으로, 이 둘을 활용하여 HTML이 화면에 렌더링 되기 전에 수정 작업을 진핼할 수 있습니다.

[서비스] 클래스에 메타데이터를 사용하면 Angular 컴포넌트가 필요한 정보를 "의존성 주입(DI: Dependency Injection)"을 통해 제공할 수 있습니다.

App의 컴포넌트들을 대게 계층적으로 정리된 여러 가지 뷰들을 정의합니다. 그리고 Angular는 Router 서비스를 통해 여러 뷰들의 주소를 이동할 수 있게 해 줍니다. Router는 브라우저 내의 페이지 전환 기능을 이용하여 정교하게 동작합니다.

모듈

Angular의 NgModules는 ES2015와 다르면서도 상호보완적입니다. NgModule 은 기능적으로, 작업흐름적으로 연관된 컴포넌트들의 집합을 선언합니다. NgModule은 컴포넌트들을 연관된 기능(컴포넌트에 정보를 제공하는 서비스 form 처리를 돕는 form functional units)들과 묶어주기도 합니다.

모든 Angular 앱은 보통 AppModule로 불리는 root module을 가지며, 이 root module은 앱을 실행시키는 bootstrap 방식을 제공합니다.

자바스크립트 모듈처럼, NgModules 또한 다른 NgModules로부터 기능을 참조할 수 있으며, 자신의 기능을 다른 NgModules이 사용하도록 할 수 있습니다. 예를 들어, 라우터 서비스를 이용하기 위해 Router NgModules을 참조할 수 있습니다.

코드를 기능적으로 분리된 모듈로 작성하는 것은 복합한 애플리케이션을 관리하고 재사용성을 높이는 설계를 구축하는 데에 큰 도움이 됩니다. 추가적으로, 이러한 코딩 방식은 필요한 코드만 로딩함으로써 초기 실행 단계에서 로딩되는 코드의 양을 줄이는 "지연 로딩(lazyloading)"을 가능하게 합니다.

컴포넌트

모든 앵귤러 앱은 적어도 하나 이상의 컴포넌트를 가집니다 - 바로 컴포넌트 계층과 "DOM(Document Object Model)"을 연결하는 root component입니다. 각각의 컴포넌트는 앱 데이터와 로직을 가지는 클래스로 정의되며 타겟 실행 환경에서 표시되는 템플릿과 연결되어 있습니다.

@Component() 데코레이터는 바로 및에 위치하는 클래스가 컴포넌트임을 알리며 템플릿과 컴포넌트와 연관있는 메타데이터를 제공합니다.

데코레이터는 자바스크립트의 클래스를 수정하는 함수입니다. Angular는 특정한 메타데이터를 클래스에 부착시키는 다양한 데코레이터를 정의함으로써 시스템에 클래스의 의미와 작동 방식을 알려줍니다.

템플릿, 디렉티브, 데이터 바인딩

템플릿

템플릿은 렌더링 되기 전에 HTML을 수정하는 Angular markup과 HTML을 조합하여 구성됩니다.

템플릿 디렉티브

템플릿 디렉티브는 앱 데이터를 DOM에 연결시키는 프로그램 로직과 바인딩 마크업을 제공합니다. 데이터 바인딩에는 크게 두 종류가 있습니다.

Event Binding: 유저가 타켓 환경에 제공한 인풋(키업, 마우스 등등...)에 앱 데이터를 업데이트 시킴으로써 앱이 반응하게 합니다.

Property Binding: 앱에서 처리된 데이터를 TML에 표시합니다.

뷰가 표시되기 전에, 앵귤러는 디렉티브와 템플릿 내 바인딩 문법을 확인하여 프로그램 데이터와 로직에 맞게 HTML엘리먼트와 DOM을 수정할 수 있습니다. 앵굴러는 "two-way data bining(양방향 데이터 바인딩)"을 제공하는데, 이는 사용자의 행동이 DOM을 변화 시켰을 때, 이러한 변화가 앵귤러의 프로그램 데이터에도 변화를 줄 수 있음을 의미합니다.

템플릿은 pipes를 사용하여 표시되는 데이터를 사전에 가공하여 사용자 경험을 향상시킬 수도 있습니다. 예를 들어 날짜라 화폐 단위를 표시할 때 pipes를 사용하면 사용자의 이용 지역에 맞게 표시할 수도 있습니다. 앵귤러는 여러가지 사전에 정의된 pipes를 제공하고, 개발자 스스로도 자신의 앱에 맞는 pipes를 정의할 수 있습니다.

서비스와 의존성 주입

뷰와 직접적인 연관이 없지만 여러 컴포넌트에 영향을 주는 데이터나 로직을 서비스 클래스로 표현할 수 있습니다. 서비스 클래스는 클래스 앞에 @Ingjectable() 데코레이터를 삽입함으로써 정의됩니다. 이 데코레이터는 클래스에 다른 프로바이더가 "의존성"으로서 "주입" 될 수 있게하는 메타데이터를 제공합니다.

DI(Dependency Injection)은 컴포넌트 글래스를 유연하고 효율적으로 유지하게 해줍니다. 데이터를 서버로부터 받아오거나, 유저 인풋을 검증하거나, 콘솔에 로그를 출력하는 작업을 직접적인 연관이 적은 컴포넌트가 아닌 담당 서비스가 처리할 수 있습니다.

라우팅

앵귤러의 Router NgModule은 앱 내의 다양한 앱 상태와 화면 계층의 사이를 이동할 수 있도록 경로를 정의합니다. 이는 다음과 같은 통용되는 브라우저 페이지 전환 방식을 기반으로 구현되었습니다.

주소표시줄의 URL을 클릭하면 해당 페이지로 이동합니다.
페이지나 브라우저 상의 링크를 클릭하면 새창을 띄워 해당 페이지를 보여줍니다.
브라우저 상의 이전/다음 버튼을 누르면 사용자의 브라우저 히스토리 상 이전, 다음 페이지로 이동합니다.

라우터는 URL을 닮은 경로를 페이지가 아닌 뷰에 맵핑(상응)시킵니다. 링크를 클릭하거나, 브라우저의 새 창을 로드하는 등의 사용자 동작이 일어나면 라우터는 브라우저의 동작을 중단시키고 뷰 계층을 보여주고 숨김으로써 페이지를 전환시킵니다.

라우터가 이동하려는 앱의 상태나 페이지가 특정한 기능을 필요로 하고, 이를 위한 모듈이 아직 로딩되지 않았다면 "지연로딩(lazy-loading)"을 활용하여 모듈을 로딩한 뒤 뷰를 전환합니다.

라우터는 앱의 페이지 전환 방식과 데이터 상태에 따라 링크 URL을 해석하여 뷰를 보여줍니다. 사용자가 버튼을 클릭하거나, 드롭 박스를 선택 했을 때, 혹은 다른 로직이 발생시킨 동작에 의한 반응으로써 새 창을 보여줄 수 있습니다. 이 때 라우터는 브라우저 히스토리에 활동을 기록하며 이전/다음과 같은 동작을 가능하게 합니다.

Navigation rules을 정의하기 위해서는 navigation paths를 컴포넌트와 연결시켜야 합니다. path는 URL처럼 생긴 문법을 사용하며 프로그램의 데이터를 포함시킬 수도 있습니다 - 이는 템플릿 문법이 뷰와 프로그램 데이터를 결합시키는 것과 비슷한 원리입니다. 이후에 사용자의 인풋과 앱의 접근 규칙에 따라 어떤 뷰를 보여줄지 정하는 프로그램 로직을 적용시킬 수 있습니다.