AngularJS 살펴보기

2015년 11월 21일 | Jeremy

AngularJS란 무엇인가?

AngularJS는 웹 애플리케이션 개발에 필요한 여러 기능을 제공하는 오픈 소스 자바스크립트 프레임워크다. AngularJS는 미스코 헤브리가 만들었으며 구글에서 관리하고 있다. 제이쿼리와 같은 여타 자바스크립트 라이브러리와 다른 점은 프레임워크이므로 일련의 정형화된 구조를 가진 구현체를 제공하고 세부 구현만 우리가 하면 된다. 다시 말하면 AngularJS는 웹 애플리케이션에 필요한 기본 기능을 구현한 뼈대를 제공하고 그 뼈대에 우리는 살을 채우면 된다. 그래서 우리가 작성한 코드가 AngularJS를 직접 제어하는 것이 아니라 우리가 작성한 코드들을 AngluarJS가 사용하는 것이다. 다음은 AngularJS 공식 사이트의 소개 페이지에서 발췌한 라이브러리와 프레임워크를 설명하는 글이다.

라이브러리 : 제이쿼리와 같은 웹 애플리케이션을 개발할 때 유용한 함수의 집합이다. 여러분이 작성한 코드가 필요한 시점에 이 함수를 직접 호출하고 애플리케이션 전체 흐름을 제어한다.
프레한임워크 : 웹 애플리케이션의 특정 구현체다. 여러분이 작성한 코드가 상세 구현으로 프레임워크의 빈 부분을 채운다. 프레임워크가 여러분이 작성한 코드를 필요 시점에 호출하고 애플리케이션 전체 흐름을 제어한다. AngularJS와 더불어 knockout.js와 ember.js도 프레임워크라 하겠다.

지금까지 HTML, 자바스크립트, CSS만으로는 화려하고 편리한 사용자 인터페이스를 제공하는 웹 애플리케이션을 개발하기 매우 어려웠다. 그래서 ActiveX와 플래시와 같은 기술에 의존하여 리치(rich)한 웹 애플리케이션을 개발해 왔다. AngularJS는 이러한 리치 웹 애플리케이션을 위해 만들어지지 않은 HTML의 부족한 부분을 채우고자 만들어졌다. 다음은 AngularJS가 제공하는 주요 기능이다.

양방향 데이터 바인딩
MVC 구조
지시자(directive)를 이용한 HTML 확장
의존관계 주입(Dependency Injection)
단일 페이지 웹 애플리케이션을 위한 라우터(Router)
$q를 이요한 자바스크립트 비동기 프로그래밍 지원
자바스크립트 테스팅 지원

AngularJS 사용 이유

1. 작성해야 하는 자바스크립트 코드량을 줄일 수 있다.

AngularJS로 웹 애플리케이션의 클라이언트 측을 개발하면 제이쿼리를 이용해서 개발할 때보다 작성해야 할 코드가 많게는 절반 이하로 줄어 든다. AngularJS에서 MVC 구조를 제공하므로 별도로 MVC 구조를 위한 코드를 작성하지 않아도 된다. 뷰 코드는 HTML로 작성하고, DOM을 선택하고 조작하는 자바스크립트 코드는 작성하지 않아도 된다. 모델은 단순 자바스크립트 객체이며 게터/세터(Getter/Setter) 함수를 작성할 필요도 없다. 또한, 컨트롤러 함수도 단순 자바스크립트 함수다. 심지어 화면의 데이터와 모델의 데이터 사이에서 양방향 데이터 바인딩을 제공하므로 뷰 데이터와 모델 데이터를 서로 동기화하는 코드를 작성할 필요가 없다. 지금까지 반복해서 작성했던 수많은 코드를 작성할 필요가 없으므로 많은 시간을 절약하고 비지니스 로직을 담당하는 코드에 더욱 집중할 수 있다.

2. AngularJS의 데이터 모델은 단순 자바스크립트 객체(Plain Old JavaScript Object)다.

여러 자바스크립트 MVC 프레임워크에서는 모델을 제공하기 위해 프레임워크의 기본 모델 클래스를 상속하여 모델 클래스를 작성하게 한다. 하지만 AngularJS에서는 별도의 모델 클래스를 상속하여 모델 클래스를 작성하게 한다. 하지만 AngularJS에서는 별도의 모델 클래스가 없으며 그저 단순한 자바스크립트 객체에 불과하다. 더 놀라운 건 단순한 자바스크립트 객체인 모델의 데이터와 뷰 데이터가 양방향 데이터 바인딩이 되는 것이다. 이 단순한 자바스크립트 객체의 값이 변경되면 연결된 뷰 데이터도 같이 변경되고, 반대로 뷰의 데이터가 바뀌면 모델 데이터의 값이 변경된다.

3. 재사용할 수 있는 UI 컴포턴트를 만들 수 있다.

우리는 웹 애플리케이션을 작성하면 대부분 폼 양식을 사용한다. HTML에서는 폼 양식이라는 UI 컴포넌트를 사용하기 위해 <form> 태그를 제공한다. 우리는 지금까지 이런 <form> 태그와 같이 재사용할 수 있는 UI 컴포넌트를 이용해 웹 애플리케이션을 개발해 왔다. 하지만 웹 애플리케이션의 복잡도가 증가하면서 지도, 그래프, 정렬할 수 있는 테이블과 같이 HTML에서 기본적으로 제공하지 않는 UI 컴포넌트가 필요해졌다. AngularJS는 이러한 UI 컴포넌트를 <map>, <graph>, <table sortable="true">와 HTML 태그로 만들 수 있게 해주며 이렇게 만든 UI 컴포넌트를 자바스크립트 함수 호출이 아닌 HTML 태그 이름이나 태그 속성을 이용해 사용할 수 있게 해 준다. 이런 UI 컴포넌트는 UI 컴포넌트 개발자가, 비즈니스 로직은 로직 개발자가 개발하여 개발 역할에 따라 여러 개발자가 동시에 개발할 수 있게 해주고 서로의 역할을 명확하게 분리해 준다.

4. 의존관계 주입(Dependency Injection)을 이용해 웹 애플리케이션 자바스크립트 개발을 할 수 있다.

최근 더 좋은 UX를 위해 많은 자바스크립트 코드를 작성해야 했고 자바스크립트 코드는 엉킨 실타래 마냥 더 복잡해지기 십상이었다. 이런 코드는 테스트하기도 매우 어렵고 재사용하기가 거의 불가능했다. AngularJS는 이런 엉킨 실타래와 같은 코드를 작성하지 않게 의존관계 주입을 이용해 웹 애플리케이션을 개발할 수 있게 한다. 서비스 프로바이더를 이용해 특정 서비스 컴포넌트를 구현하고 해당 서비스 컴포넌트가 사용하는 다른 서비스 컴포넌트를 직접 참조하는 것이 아니라 의존관계 주입을 이용해 사용하게 된다. 또, 이런 서비스 컴포넌트를 컴트롤러 컴포넌트에서 주입 받아서 사용할 수 있다. 이렇게 의존관계 주입을 이용해 개발하면 단위 테스트를 할 수 있고 관심사가 분리된 재사용할 수 있는 컴포넌트를 개발할 수 있으므로 더는 엉킨 실타래 같은 자바스크립트 코드를 작성하지 않을 수 있다

5. HTML & CSS 개발자와 자바스크립트 갭라자가 서로 사이 좋게 지낼 수 있게 해준다.

제이쿼리를 이용해 웹 애플리케이션을 개발하다 보면 자바스크립트에서 특정 DOM을 선택하기 위해 태그에 수많은 아이디 속성을 추가하고 내용이 빈 태그로 가득 찬 HTML을 작성하곤 했다. 그렇다 보니 HTML 구조만 봐서는 화면에 어떻게 그려질지 도저히 상상하기가 어려웠다. 또한 자바스크립트에서는 비지니스 로직과 DOM 조작, 이벤트 처리에 관한 코드가 여기저기 산만하게 널려있었고 DOM 조작과 이벤트 처리를 위해 자바스크립트가 HTML의 구조를 잘 알고 있어야만 했다. 그래서 HTML 코드를 수정하면 자바스크립트 코드가 동작하지 않는 경우가 많았다. 그러다 보니 자바스크립트 개발자와 HTML & CSS 개발자 사이의 협업에 어려움이 있었다. 하지만 AngularJS는 HTML을 이용해 뷰 코드를 작성하고 자바스크립트에서는 비즈니스 로직 코드만을 작성하게 하여 뷰 코드와 로직 코드를 명확하게 분리했다. 즉, 자바스크립트가 HTML의 구조를 알아야 할 필요가 없는 것이다.