기고 | 앵귤러 2가 마음에 드는 6가지 이유

그렇다면 앵귤러 2에서 흥미로운 점은 무엇일까? 기존의 모든 자바스크립트 프레임워크와 다른 점은 무엇일까? 배울 가치가 있을까? 그렇게 대단한 이유는 무엇일까?

필자가 앵귤러 2를 좋아하는 6가지 이유는 다음과 같다.

1. 앵귤러 2 덕분에 향상된 개발자 생산성
지난 5년 동안 웹은 크게 달라졌다. ES(ECMAScript) 2015를 통해 우리는 모듈, 클래스, 화살표 기능을 갖게 되었다. 앵귤러 2는 이런 기능을 활용하여 코딩 패턴을 일관성 있고 학습하기 쉽도록 해준다.

TS(TypeScript) 이외에도 앵귤러 2는 자바스크립트의 확대집합이자, 형식 및 인터페이스를 제공하는 언어다. 우리는 앵귤러 개발용 TS를 활용함으로써 형식 검사, 더 안전한 리팩토링(Refactoring), 인라인 코드 문서화 등의 좋은 툴을 얻을 수 있다.

이러한 기능은 개발과 편집 경험을 개선해 주며 코드를 디버깅하고 더욱 잘 이해할 수 있는 근거를 확보하는 데 도움이 된다.

2. 일관된 코딩 패턴
프레임워크가 개발자 생산성에 가장 크게 도움이 되는 부분은 일관된 코딩 패턴인데, 특히 앵귤러가 그렇다. 그중 클래스, 내장 DI(Dependency Injection), MVVM(Model-View-ViewModel) 패턴에 관해 알아보자.

앵귤러 2는 ES 클래스와 데코레이터(Decorator)라는 주석을 활용하여 모든 주요 앵귤러 구성을 구축한다. 앵귤러 구성 요소를 구축하고 싶나? 그렇다면 클래스를 생성하고 적절한 데코레이터를 추가하자. 사용자 정의 파이프 필터를 구축하고 싶나? 그렇다면 클래스를 생성하고 적절한 데코레이터를 추가하자. 앵귤러 모듈을 구축하나? 그렇다면 클래스를 생성하고 적절한 데코레이터를 추가하자. 서비스를 구축하나? 서비스의 경우, 클래스를 구축하고 적절한 데코레이터를 추가하면 된다. 이해됐을 것이다. 앵귤러 2는 애플리케이션의 조각들을 구축하기 위한 매우 일관된 코딩 패턴을 제공한다.

앵귤러 2가 활용하는 또 다른 코딩 패턴은 DI(dependency injection)의 힘이다. HTTP나 라우터 등 앵귤러 서비스에 포함된 기능을 사용하려면, 필요한 클래스에 서비스를 추가하기만 하면 된다. 앵귤러는 구성자(Constructor) 기반의 DI를 이행하여 서비스를 추가함으로써 해당 서비스를 클래스 구성자에 대한 아규먼트(Argument)로 전달하게 된다. 이것이 끝이다. 그리고 자체적인 사용자 정의 서비스를 구축할 때 우리는 같은 기법을 이용해 추가한다.

또한 앵귤러는 공통 아키텍처 패턴을 활용한다. 클라이언트 측 애플리케이션을 구축할 때 사용자 인터페이스, 사용자 인터페이스를 지원하고 제어하는 코드, 해당 인터페이스를 위한 데이터가 포함된 모델 등 3가지 퍼즐 조각이 존재하곤 한다. 앵귤러 2는 MVVM 패턴을 이용해 이 3개의 조각을 분명하게 분리한다.

뷰(view)는 특정 구성 요소용 HTML이 포함된 템플릿이다. 이 템플릿은 페이지나 페이지 일부를 배치하거나 재사용할 수 있는 사용자 인터페이스 요소를 정의할 수 있다.

모델(model)은 구성 요소 클래스의 특성이다. 마치 수퍼히어로를 모델링 해 히어로의 속성을 정의하듯, 인터페이스를 이용해 그 히어로 속성의 세부 사항을 정의하여 히어로의 이름, 또 다른 자아, 특수 능력 등 해당 히어로와 관련된 특정 데이터 요소를 확인하는 것이다.

뷰모델(viewmodel)은 뷰와 모델을 클래스다. 서비스를 호출하여 데이터를 검색하고 요소 숨기기 또는 표시 등 뷰에서 사용자 상호작용에 반응하며 서비스를 호출하여 사용자 항목을 저장하는 코드다.

이런 공통의 패턴을 활용함으로써 앵귤러 2는 개발을 더욱 생산적이고 쉽게 만들어 준다.

3. 앵귤러 2와의 광범위한 바인딩(Binding)
많은 클라이언트 측 웹 애플리케이션이 데이터와 함께 작동한다. 애플리케이션은 백엔드 서버에서 데이터를 검색하고 템플릿을 이용해 해당 데이터를 뷰로 표시한다. 그리고 사용자가 해당 데이터를 변경할 수 있는 경우 반드시 사용자의 입력을 뷰에서 읽어 백엔드 서비스에 다시 저장해야 한다. 이 프로세스에 필요한 코드는 작성이 지루하고 오류가 발생하기 쉬울 수 있다.

앵귤러 2의 데이터 바인딩으로 이 프로세스가 쉬워진다. 템플릿의 HTML 요소를 클래스의 모델 속성으로 바인딩하면 데이터가 자동으로 뷰에 표시된다. 그리고 사용자가 값을 변경할 수 있는 경우 앵귤러 2는 양방향 데이터 바인딩을 지원한다. 따라서 뷰에서 사용자가 데이터에 적용하는 변경사항으로 클래스의 모델 속성이 업데이트된다.

데이터 바인딩 외에 앵귤러 2는 속성 바인딩을 지원한다. 우리는 이를 통해 HTML 속성을 구성 요소 클래스 특성에 바인딩하여 DOM(Document Object Model)을 제어할 수 있다. 예를 들어, 이미지 요소의 HTML 숨김 속성을 하이드이미지(hideImage) 등의 구성 요소 클래스 특성에 바인딩할 수 있다. 구성 요소 클래스 속성이 ‘true’로 설정된 경우 이미지 요소는 자동으로 숨는다. 구성 요소 클래스 속성이 ‘false’로 설정된 경우 이미지 요소가 자동으로 나타난다.

그리고 마지막으로 앵귤러 2는 이벤트 바인딩을 지원한다. 즉, 우리는 뷰에서 클릭, 제 3 구성 요소 이벤트, 자체 사용자 정의 이벤트 등 HTML 이벤트를 포함하여 아무 이벤트에나 대응할 수 있다. 우리는 단순히 이벤트를 구성 요소 클래스의 방법에 바인딩한다. 이벤트가 발생하면 방법이 실행된다.

이런 광범위한 바인딩 기능 덕분에 손쉽게 데이터를 표시하고 사용자 항목을 획득하며 DOM을 제어하고 이벤트에 대응할 수 있다.

4. 완전한 기능을 갖춘 라우팅(Routing)
애플리케이션은 하나의 뷰만으로 구성돼 있지 않다. 대부분의 클라이언트 측 웹 애플리케이션은 여러 뷰를 제공하여 모든 기능을 지원한다. 웰컴 페이지, 히어로 목록 페이지, 히어로 상세 페이지, 히어로 편집 페이지 등에 뷰가 있다. 그리고 직업용 뷰도 있다. 우리는 정확한 시점에 정확한 뷰를 표시해야 한다. 이것이 라우팅의 목적이다.

앵귤러 2는 완전한 기능을 갖춘 라우팅을 제공한다. 앵귤러를 통해 우리는 각 애플리케이션 페이지로의 경로를 정의한다. 그러고 나서 우리는 사용자의 행동에 기초하여 경로를 적절히 활성화한다. 우리는 데이터를 경로로 전달하여 42의 ID와 함께 히어로 상세 페이지를 표시하도록 할 수 있다.

경로 보호 기능도 있다. 로그인이 없거나 관리자에게는 경로 접근을 막을 수 있다. 사용자가 변경사항을 저장하거나 취소를 확인할 때까지 편집 페이지를 떠나지 못 하게 할 수 있다. 또 페이지를 표시하기 전에 데이터를 미리 불러올 수 있다.

앵귤러 2는 특정 경로 내에서 탐색하기 위해 차일드(Child) 경로를 지원한다. 예를 들어, 우리는 상세 페이지를 탐색하고 해당 페이지에서 기술 사양 페이지나 추가 정보 페이지의 차일드 경로로 탐색할 수 있다. 또한 이는 페이지 내에서 정보 탭들을 표시할 때 유용하다.

우리는 특정 경로를 레이지 로딩(Lazy Loading)하여 사용자가 해당 경로와 관련된 기능에 접근하지 않는 한 해당 경로의 코드를 브라우저로 다운로드하고 로딩하지 못하게도 할 수 있다. 따라서 우리에게 관리 기능이 있는 경우 이런 기능은 사용자가 관리 기능에 대한 접근권한을 요청하기 전까지 로딩되지 않는다.

이 많은 기능 덕분에 앵귤러 2 라우팅이 유연하고 강력해진다.

5. 최소화된 크기와 극대화된 성능
웹 기반 애플리케이션의 경우 크기와 성능이 다소 관련되어 있다. 구성 요소를 줄이면, 브라우저에서 다운로드하고 컴파일 시간의 시작 성능을 높일 수 있다. 앵귤러 2의 주요 목표 중 하나는 크기를 최소화하고 성능을 극대화하는 것이다.

여러 경로를 통해 다운로드 크기를 최소화할 수 있다. 첫째, 각 구성 요소의 크기를 가능한 한 작게 만든다. 둘째, 구성 요소를 논리 그룹들과 함께 다운로드할 수 있도록 앵귤러 모듈로 정리한다. 셋째, 경로를 레이지 로딩하면 사용자가 선택한 경로를 표시하는 데 필요한 앵귤러 모듈만 다운로드 한다. 사용자가 다른 경로로 이동할 때, 필요한 콘텐츠를 다운로드하고 사용하지 않는 경로를 절대 불필요하게 다운로드 하지 않는다.

그리고 AoT(Ahead-of-Time) 컴파일러가 있다. AoT를 통해 컴파일러는 구축 시점에 한 번 실행된다. 그러고 나서 브라우저는 애플리케이션의 사전 컴파일된 버전을 다운로드하고 브라우저에서 먼저 컴파일할 필요 없이 애플리케이션을 즉시 나타낸다. 또한 앵귤러 컴파일러를 다운로드할 필요가 없으므로 애플리케이션 다운로드 크기가 크게 줄어든다.

앵귤러 2는 더 빨리 실행되며 할 일이 적고 메모리를 적게 차지한다.

6. 문서 및 커뮤니티
angular.io에는 다양한 앵귤러 2의 문서가 있다. 여기에는 앵귤러 2로 속도를 개선하는 퀵스타트 가이드도 있고, 사용자 가이드와 API 참조도 있다. 더 많은 고급 기능에 대한 문서 이외에 형태 검증과 DI 등의 보편적인 작업을 위한 레시피(Recipe)도 있다. 

하지만 앵귤러 2를 배우는 데 가장 좋은 파트는 ‘튜토리얼(Tutorial)’이다. 여기서는 코드를 따라 단계별 경험을 제공하여 앵귤러 2의 모든 기본 기능을 소개한다. 동영상 형식을 선호한다면, 필자의 플러럴사이트(Pluralsight) 코스 ‘앵귤러 2: 시작하기’를 참조하기 바란다. 

마지막으로 다른 앵귤러 사용자들과 교류할 수 있는 커뮤니티가 있는데, 대표적인 것들로는 미팅 그룹, 컨퍼런스 그룹, 기터(Gitter) 그룹 등이 있다.

*Deborah Kurata는 플루럴사이트(Pluralsight)에서 활동하는 마이크로소프트 MVP이자 구글 디벨로퍼 엑스퍼트(GDE)다. dl-ciokorea@foundryco.com