곰돌이 놀이터
[Angular] Angular 란? 본문
앵귤러 공식 홈페이지 ( QuickStart 페이지 )
웬만한 도서, 블로그 또는 교육용 사이트 보다 설명이 잘 되어있으며
환경설정에서부터 라이브 예제 및 친절한 설명을 동반한 튜토리얼, Angular 기본개념, API 등의 정보를 제공받을 수 있다.
Angular 란?
Angular란 Google에서 만든 SPA(Single Page Application)방식의 프론트엔드 개발을 위한 자바스크립트 프레임워크 이다.
웹 어플리케이션은 물론 모바일 웹, 네이트브 모바일과 데스크탑 어플리케이션까지 프론트 엔드 개발에 필요한 대부분의 기능을 갖추고 있다.
사용언어는 TypeScript 혹은 ES6을 사용할 수 있지만, 개발그룹측에서는 TypeScript를 사용할 것을 더욱 권장하고 있다. 실제 관련 문서도 TypeScript를 기준으로 설명 되어있는 것이 더 풍부하다.
또한 Angular를 이용하여 개발을 하다보면 Spring MVC와 굉장히 유사한 방식으로 프로그래밍이 진행된다는 것을 느낄 수 있다.
※ Angular 1 버전을 AngularJS, Angular 2버전 이상을 Angular 라 부른다.
Angular 와 AngularJS 의 차이점
Angular는 AngulaJS의 단순한 업그레이드 버전이 아니다. Angular는 정적 타이핑과 ECMAScript6 스펙을 충족시키기 위해 TypeScript로 재작성되었고 AngulaJS와는 호환성이 없는 브레이킹 체인지를 다수 포함하고 있다.
Angular와 AngulaJS의 차이점을 정리하면 아래와 같다.
■AngularJS의 Controller와 $scope 기반 개발에서 컴포넌트 기반 개발(CBD, Component Based Development)로 전환되었다.
■ AngularJS의 angular.module과 jQlite보다 향상된 모듈 시스템과 DOM 제어 기능을 제공하며 API 또한 단순화되었다.
■ 선택적 데이터 바인딩(one-way, two-way) 을 지원하고 디렉티브(directive)와 서비스, 의존성 주입(dependency injection)은 간소화 되었다.
■ 주력 개발 언어로서 TypeScript를 도입하여 대규모 개발에 적합한 정적 타입과 인터페이스, 제네릭 등 타입 체크 지원 기능을 제공한다.
■ ECMAScript6에서 새롭게 도입된 모듈, 클래스 등과 ECMAScript7의 데코레이터를 지원한다.
■ 강력한 개발환경 지원 도구인 Angular CLI를 제공한다.
Angular은 AngularJS의 후속 버전이기는 하지만 호환성이 없는 새로운 프레임워크로 이해하는 것이 좋다. Angular는 AngularJS보다 배우기 쉬우며 성능은 향상되었고 애플리케이션 구조는 보다 단순해졌다.
Angular 와 TypeScript
Angular는 JS를 이용한 개발을 지원하기는 하지만, 최신 버전의 JS를 모든 브라우저가 지원하지는 않기 때문에, TypeScript를 이용하여 개발한 후, Babel이라는 Transpiler를 이용하여 모든 브라우저에서 호환 가능한 JS로 변환하는 방법을 권장한다.
TypeScript는 JS의 상위집합의 언어로서, 아래와 같은 특징을 가진다.
■ OOP(상속, 인터페이스 등) 및 정적 타입을 지원한다.
■ 기본형(num, string, boolean ..)을 지원한다.
■ 어노테이션을 지원한다.
■ 제네릭과 람다를 이용할 수 있다.
Angular 장단점
■ Angular의 장점
1. 컴포넌트 기반
Angular를 이용한 프론트엔드 웹 개발은 Spring을 이용한 백엔드 개발과 유사하다. DI(Dependency Injection)의 강력한 지원을 통해, 기능에 따라 코드를 분리하고, 재사용하는 것이 굉장히 쉬워진다. 서버에 Ajax 요청을 하는 부분 및 기타 부분 담당하는 Service 클래스와 HTML 컴포넌트를 담당하는 Component 클래스가 명확히 구분되고, 이로 인해 Service 클래스는 여러 Component 클래스에서 재사용이 가능하다. 또한, 각각의 Component 클래스는 자신만의 HTML 컴포넌트에 집중할 수 있기 때문에 웹 화면을 구성하는 컴포넌트간 독립이 명확해진다.
2. 웹페이지 속도
Angular로 만든 SPA(Single Page Application)은 다른 페이지로의 전환 속도가 굉장히 빠르다. 일반적인 웹페이지는 링크를 클릭할 때마다 서버에 새로운 페이지를 요청하지만, Angular는 클라이언트 측에서 화면을 생성하고 필요한 데이터만 Ajax 요청을 통해 서버에서 내려받기 때문에 네트워크에 의한 딜레이가 적다.
3. 프레임워크
Angular는 프론트엔드 웹 개발을 위한 종합 프레임워크이므로 전체를 아우르는 구조를 제공한다. 뷰에서 부터 테스트까지 많은 모듈을 가지고 있으며, 기본 제공되는 모듈이기 때문에 각 모듈의 정합성을 보장할 수 있고 자연스러운 데이터 연결이 보장된다.
■ Angular의 단점
1. 학습분량
Angular는 여러가지 언어를 제공하지만, 주력언어는 TypeScript이다. 그러므로 대부분의 Angular 앱은 TypeScript로 쓰여있으며, 이를 활용하기 위해서는 Angular 개발자는 필히 TypeScript를 익힐 필요가 있다. 또한, TypeScript만 배우면 끝이 아니라, Angular가 지니고 있는 여러가지 개념들을 익혀야하고, 그 개념들이 어떻게 TypeScript로 표현되는지도 익혀야한다.
2. 초기 로딩속도
Angular로 만든 SPA의 초기 로딩속도는 다소 느린편이다. 성능이 좋은 데스크탑이나 모바일에서는 큰 문제가 아니라고 생각할 수 있으나, 성능이 좋지 않은 모바일에서는 로딩시간이 1초 이상 걸리기도 하므로 생각보다 큰 문제이다. 물론 초기화면이 로딩된 다음에 웹페이지 내에서의 이동은 위에서 말했듯이 매우 빠르다.
3. 검색엔진 인덱싱
Angular로 만든 SPA를 제대로 인덱싱하지 못하는 크롤러가 생각보다 많아서, 모든 검색엔진에 검색되게 하기 위해서는 다른 방법을 사용해야 한다. SPA를 포기하고 서버측에서 렌더링 할 수 있게 해주는 Angular Universial을 사용하는 것도 방법 중 하나다. 하지만 이러한 방법을 사용하게 되면, Angular를 사용해서 얻는 이점이 적어질 수 있다.
Angular 주요개념
■ 컴포넌트
일반적으로 Component란 재사용 가능한 단위를 말한다. Front-end Framework인 Angular는 View를 만드는 것이 주된 목적이므로, 최종적으로 완성되는 전체 View를 쪼개서 부분적으로 재사용할 수 있는 단위가 필요한데, 이 역할을 하는 것이 Component이다. 하나의 전체적인 View는 세부적으로 Component로 쪼개지고, 이 쪼개진 Component들의 관계가 Tree 형태를 만들게 되는데, 이러한 상태를 Component Tree라고 한다. 이 Tree의 최상단 Component를 Root Component라고 한다.
■ 템플릿
Component는 View를 렌더링하는 주체가 되기 때문에, 어떻게 View를 렌더링해야 하는지에 대한 정보를 가지고 있어야 한다. 이 정보를 Template이라고 한다. Template은 렌더링에 필요한 HTML 요소와 Angular 문법요소 그리고 클라이언트에 의해 발생하는 이벤트 처리 코드를 가지고 있다.
■ 데코레이터 및 메타데이터
Angular의 경우 TypeScript를 주 언어로 사용하기 때문에 코드 기반이 클래스이다. 그래서 Component 정의도 클래스로 하게 되는데, Angular는 프레임워크이기 때문에 특정 클래스가 일반 클래스인지 아니면 프레임워크의 어느 부분을 담당하는 클래스인지 표시할 필요가 있다. 이 역할을 하는 것이 Decorator이다. 클래스에 특정 Decorator를 선언하므로서 Angular가 해당 클래스의 역할을 지정하게 된다. 또한 이 Decorator에 데이터를 추가하여 세부적으로 설정할 수 있는데 이 데이터를 Metadata라고 한다. 이러한 Decorator 역할은 Spring Framework의 Annotation과 역할이 비슷하다.
■ 모듈
Module은 Angular 어플리케이션을 구성하는 단위로서 관련된 요소들을 하나로 묶어 놓은 것이다. Angular의 경우, Module 단위로 어플리케이션 코드를 인식하므로 모든 Angular 어플리케이션은 반드시 하나 이상의 Module을 가지게 된다. Module 또한 Tree 형태로 구성되고, 최상단에 위치한 Module을 Root Module이라고 한다.
■ 데이터 바인딩
Data Binding은 View와 Component에서 발생한 데이터의 변경 사항을 자동으로 일치시키는 Angular의 기능이다. 바인딩 방법에 따라 Two-Way Data Binding과 One-Way Data Binding로 분류된다. Two-Way Data Binding이란 양방향 바인딩이라고 부르며, Component와 View 중 어느 쪽이 변하든 두 상태 정보를 자동으로 일치시켜 주는 기능이다. One-Way Data Binding이란 단방향 바인딩이라고 부르며, Component에서 View 쪽으로 혹은 View에서 Component 쪽으로 한 방향으로 상태 정보를 일치시켜 주는 기능이다. 단방향 바인딩은 세가지 방식으로 나뉜다.
1. Interpolation : Component에서 선언한 속성을 View에서 사용하는 경우이다.
2. Property binding : View의 DOM이 소유한 HTML Element 속성을 바인딩하는 경우이다.
3. Event bidning : View의 DOM에 대한 Event handler로 Component의 메서드를 사용하는 경우이다.
위와 같이, 양방향과 단방향으로 크게 두 가지 바인딩으로 분류하지만, 사실 양방향 바인딩은 내부적으로 두 개의 단방향 바인딩으로 구성된다. 기존의 AngularJS는 다른 방식으로 양방향 바인딩을 제공했지만, 성능 상의 이슈로 인하여 Angular에서는 단방향 바인딩 두 개를 이용해서 기존의 양방향 바인딩을 구현하였다.
■ 서비스
Angular에서 Service란 Component에서 View를 처리하는 로직 이외의 로직은, 따로 분리한다는 개념이다. 일반적인 MVC 패턴에서 볼 수 있는 Service의 개념과 비슷하다. Component는 View를 표현하고 처리하는 것이 목적이므로, Component 안에 다른 관심사가 존재하면 Component의 독립성이 보장되지 못하고, 중복코드가 발생하게 되어 코드 재사용과 유지보수가 힘들어진다. 이런 문제를 해결하기 위해, Component 내의 관심 로직 이외의 로직은 Service로 분리하여 따로 작성하고, Component 내에 Service 작성시 강한 의존관계(Dependency Relationship)가 형성되는 것을 막기 위하여, Dependency Injection (DI) 패턴을 사용한다. DI 패턴에는 일반적으로 Constructor를 이용하는 방법과 setter를 이용하는 방법이 있는데, Angular의 경우, Constructor Injection을 지원한다. 쉽게 말하면, Component가 직접 Service를 new keyword를 이용하여 생성하는 것이 아니라, Angular Framework이 Component가 사용할 수 있도록 Service 객체를 생성해서 Component에게 넣어주는 방식이다. 이 방식을 Inversion of Control (IoC) 라고 하고, Angular Framework은 IoC Container이다.
■ 디렉티브
Directive는 DOM의 모양이나 동작을 지시하기 위한 명령이라고 할 수 있다. 보통 HTML Element 형태로 표현하거나, Element의 속성 형태로 표현한다. 예를 들면, AngularJS에서의 ngIf와 같은 역할이다. DOM을 제어하는 방법으로서, Directive 외에 Component도 있지만, 이 둘을 분리한 이유는, Component는 원칙적으로 자신이 렌더링하는 View에 대해서만 관심이 있다. 그러므로, 여러 View들이 공통적으로 사용하는 Element나 Element의 속성 같은 것들은 따로 Directive로 표현하는 것이, 객체지향 설계의 단일책임원칙(SRP)에 위배되지 않고, Component의 복잡도를 낮출 수 있으며, 유지보수와 같은 관리적인 측면에서도 더 나은 형태로 구현할 수 있다. Directive는 크게 다음과 같이 4가지 종류로 분류된다.
1. Component Directive : Component의 selector에서 직접 지정해 사용하는 Directive이다.
2. Attribute Directive : HTML Element의 속성으로 표현된다. built-in 형태로는 ngClass 등이 있다.
3. Structural Directive : DOM의 구성을 제어하기 위한 Directive로서, built-in 형태로는 ngIf, ngFor, ngSwitch 등이 있다.
4. Custom Directive : built-in 형태로 만들어진 것이 아닌 직접 만들어서 사용하는 Directive이다.
■ 파이프
Pipe는 Template 내에서 출력하고자 하는 데이터를 원하는 형식으로 변환하여 출력하는 기능이다. 원본 데이터에는 변형을 가하지 않은 상태로 출력 형태만 변경해 주기 때문에 원치 않은 Side Effect를 없앨 수 있다.
참고
https://angular.io/guide/quickstart
https://www.hitcle.com/space/Angular/a_p6ytVWVIvwMu
http://www.incodom.kr/Angular_%EC%A0%95%EC%9D%98