Angular?
Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크이다. 하나의 프레임워크로 웹 애플리케이션, 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있다. TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 적합한 환경을 제공한다. 상대적으로 가볍고 러닝커브가 낮은 뷰나 리액트에 비해 Angular는 오랜 역사와 안정적인 프레임워크를 자랑한다.
특징
- Angular는 컴포넌트 기반 개발(CBD: Component Based Development)이 중심이다.
- TypeScript를 사용한다. JavaScript나 Dart로도 작성할 수 있으나 대부분의 사람들이 TypeScript를 사용하여 구글링하면 관련 정보를 얻을때 이점이 있다고 한다.
- 프레임워크를 도입할 때 개발 환경 구축은 큰 장벽이다. Angular는 Angular CLI를 통해 간편한 개발 환경 구축을 지원한다. 간단한 명령어를 사용하여 프로젝트 생성에 빌드, 테스트, 구성요소 추가 등을 간편하게 할 수 있으며, 개발용 서버를 내장하고 있어 실행까지 가능하다.
대박인데..? - 대부분의 모던 브라우저를 지원한다. IE는 9 이상을 지원한다.
주요 개념
Angular 애플리케이션 구성 요소 중 가장 중요한 것은 컴포넌트의 묶음인 NgModule이다. NgModule은 비슷한 기능을 하나로 묶어서 관리하기 위한 모듈이며, Angular 애플리케이션은 부트스트랩을 하기 위해 최상위 모듈을 반드시 가진다.
- 컴포넌트는 뷰를 정의하는데, 화면에 어떤 엘리먼트가 어떤 데이터를 표시할지 지정한다.
- 컴포넌트는 서비스를 활용한다. 뷰와 직접 관련있지 않은 기능은 컴포넌트에 있을 필요가 없으며, 이런 로직은 서비스에 정의하고 컴포넌트에 의존성으로 주입해서 사용하면 코드를 모듈 단위로 관리할 수 있기 때문에 재사용하기 편하고 효율적이다.
모듈, 컴포넌트, 서비스는 단순하게 데코레이터가 붙은 클래스일 뿐이다. 하지만 이 데코레이터를 지정했기 때문에 이 클래스가 어떤 역할을 하는지 Angular가 알 수 있다.
- 컴포넌트 클래스에 메타데이터를 지정하면 템플릿을 뷰로 지정할 수 있다. 템플릿은 일반적인 HTML 문법을 바탕으로 Angular가 제공하는 디렉티브와 바인딩 마크업을 사용한다. 이 템플릿은 Angular에서 처리한 후에 화면에 렌더링된다.
- 서비스 클래스에 메타데이터를 지정하면 Angular 컴포넌트에 의존성으로 주입할 수 있다.
모듈
- NgModule은 기능적으로 관련되거나 작업흐름이 연관된 컴포넌트(+서비스, 폼)를 묶어서 선언한다.
- AppModule 이라는 이름으로 최상위 모듈을 선언하는데, 이 모듈 아래로 여러 기능 모듈을 포함한다.
- NgModule은 다른 NgModule을 불러오거나, 다른 NgModule을 위해 모듈의 기능 일부를 외부로 공개할 수 있다.
컴포넌트
- Angular 애플리케이션의 페이지 DOM에 위치한 컴포넌트를 최상위 컴포넌트라고 한다.
- 모든 컴포넌트는 컴포넌트 클래스와 템플릿으로 구성한다.
- 컴포넌트 클래스는 애플리케이션 데이터와 로직을 처리하고, 템플릿은 화면에 표시할 HTML을 정의한다.
템플릿, 디렉티브, 데이터바인딩
템플릿은 HTML 문법과 Angular 마크업 문법을 조합하여 구성한다. Angular 마크업 문법은 HTML 엘리먼트를 확장하는 역할을 한다. 템플릿에 디렉티브를 사용하면 원하는 동작을 하도록 확장할 수 있고, 바인딩 마크업 문법을 사용하면 애플리케이션 데이터를 DOM과 연결할 수 있다. 데이터 바인딩에는 두 종류가 있다.
- 이벤트 바인딩 : 사용자의 동작에 따라 애플리케이션 데이터를 갱신한다.
- 프로퍼티 바인딩 : 애플리케이션 데이터를 HTML 문서에 표시할 수 있다.
Angular는 뷰가 화면에 표시되기 전에 템플릿에 사용된 디렉티브와 바인딩 문법을 모두 체크해서 HTML 엘리먼트와 DOM을 변형한다. 이 때 애플리케이션 데이터나 로직이 템플릿에 반영된다.
Angular는 양방향 데이터 바인딩도 지원한다. 이 방식을 사용하면 애플리케이션 데이터를 템플릿에 반영할 뿐만 아니라 사용자의 행동에 의해 DOM이 변경되었을 때 애플리케이션 데이터를 다시 갱신할 수도 있다.
화면에 표시되는 데이터를 사용자가 알아보기 쉽게 하려면 파이프를 사용할 수도 있다. 예를 들면 날짜나 화폐를 사용자의 언어 환경에 맞게 표시하는 용도로 사용할 수 있다. 일반적인 기능은 Angular 프레임워크에서도 제공한다. 원하는 기능이 없다면 커스텀 파이프를 만들어 활용할 수도 있다.
서비스, 의존성 주입
어떤 데이터나 함수가 하나의 뷰에만 적용되는 것이 아니라면, 서비스 클래스를 만들어서 활용할 수도 있다. 서비스 클래스는 @Inejctable 데코레이터를 사용해서 정의하며, 이 데코레이터를 사용하면 컴포넌트나 다른 서비스에 의존성으로 주입하기 위해 다른 구성요소보다 먼저 처리된다.
라우팅
Angular에서 제공하는 Router NgModule을 사용하면 네비게이션 주소를 전환하면서 애플리케이션의 상태를 변경할 수 있다. Angular의 페이지 전환 방식은 브라우저의 페이지 전환 방식을 바탕으로 구현되었다.
Angular의 라우터는 페이지 대신 뷰를 URL과 매핑한다. 사용자가 링크를 클릭했다면 브라우저에서는 새로운 페이지로 전환하려고 하겠지만, 라우터는 이 동작을 중지시키고 페이지 이동 없이 뷰만 전환한다.
아직 로드 되지 않은 모듈에 있는 페이지로 전환하려고 하면, 라우터가 지연 로딩을 사용하여 모듈을 불러오고 난 후에 뷰를 전환한다.
다이어그램으로 정리
- 컴포넌트와 템플릿은 Angular의 뷰를 정의한다.
- 데코레이터는 컴포넌트 클래스에 메타데이터를 추가하며, 이때 템플릿을 지정한다.
- 컴포넌트 템플릿에 사용하는 디렉티브와 바인딩 마크업은 데이터와 프로그램 로직에 따라 템플릿을 조작한다.
- 서비스는 컴포넌트에 의존성으로 주입해서 사용한다. 예를 들어 뷰에서 네비게이션 기능을 사용하려면 라우터 서비스를 주입받아 사용하면 된다.
