AngularJS 소개 - 특징, 철학, 주요 개념, 동작 방식

웨드_ |

AngularJS는 (단일 페이지를 지향하는) 웹 애플리케이션 개발에 필요한 여러 기능을 제공하는 오픈 소스 자바스크립트 MV* 프레임워크입니다. 미스코 헤브리가 만들었고, 구글이 관리하고 있습니다.

 

(라이브러리가 아니라,) 프레임워크이므로 일련의 정형화된 구조를 가진 구현체를 제공합니다. 또한, AngularUI 팀이 있어서 주요한 UI 컴포넌트들을 자체 개발하거나, 기존 오픈소스 컴포넌트들(Bootstrap, Select 등)을 계속적으로 AngularJS화하고 있습니다.

 

 

AngularJS 소개 - 특징, 철학, 주요 개념, 동작 방식
1 특징
2 철학
3 주요 개념들
4 동작 방식
5 참고

 

 

AngularJS 소개 - 특징, 철학, 주요 개념, 동작 방식
AngularJS 소개 - 특징, 철학, 주요 개념, 동작 방식

 

 

 

 

1. 특징

 

작성해야하는 자바스크립트 코드량을 줄여 준다.

  • MVC 구조를 제공하므로, MVC 구조를 위한 코드를 작성할 필요가 없다.
  • DOM을 선택하고 조작하는 자바스크립트 코드를 작성하지 않아도 된다.
  • 모델은 단순 자바스크립트 객체이고, setter, getter 함수를 작성할 필요가 없다.
  • 화면과 모델 사이의 양방향 데이터 바인딩을 지원하여, 서로를 동기화하는 코드를 작성할 필요가 없다.
  • 콜백 함수 등록으로부터 해방시켜준다.

 

AngularJS의 데이터 모델은 단순 자바스크립트 객체이다.

  • 대부분의 MVC 프레임워크는 기본 모델 클래스를 상속하여 모델 클래스를 만들지만, AngularJS는 그렇지 않다.
  • 모델의 데이터와 뷰 데이터가 양방향 데이터 바인딩이 되어, 모델이 바뀌면 뷰 데이터도 같이 변경되고 반대도 마찬가지로 동작한다.

 

재사용이 쉬운 정적인 UI 컴포넌트를 만들 수 있다.

  • 기본 HTML에서 제공하지 않는 복잡도가 높은 UI컴포넌트(지도, 그래프, 정렬가능한 테이블 등)를 <map>, <graph>, <table sortable="true">와 HTML 태그로 만들 수있게 해준다.
  • 위와같이 만들어진 UI 컴포넌트를 HTML 엘리먼트나 애트리뷰트를 이용해 사용할 수 있게 해준다는 것이다.

 

의존관계 주입을 이용해 웹 애플리케이션을 개발할 수 있다.

  • 기본 웹 애플리케이션은 더 좋은 UX를 위해 자바스크립트가 많아지고 엉킨 실타래 같았다.
  • 직접 참조가 아닌 의존관계 주입을 통해서 서비스 컴포넌트를 사용한다 ?
  • 서비스 컴포넌트를 컨트롤러 컴포넌트에 주입 받아서 사용할 수 있다 ?
  • 단위 테스트가 가능하고, 보다 분리된 형태로의 개발이 가능하다.

 

HTML&CSS 개발자와 자바스크립트 개발자를 명확하게 분리해준다.

  • 기존엔 DOM 조작과 이벤트 처리를 위해 자바스크립트가 HTML을 잘 알고 있어야 했고, 자바스크립트 개발자와 HTML&CSS 개발자가 분리되기 어려웠다.
  • AngularJS는 자바스크립트가 HTML 구조를 알 필요가 없고, 뷰 코드와 로직 코드가 명확히 분리된다.

 

 

 

2. 철학

 

AngularJS는 UI를 만들고 소프트웨어 컴포넌트를 서로 엮는 것에는 선언적 코드가 명령적 코드보다 더 좋다는 믿음에서 만들어졌다. 물론 비즈니스 로직을 표현하는 데는 명령적 코드가 더 좋다.

 

애플리케이션 로직으로부터 DOM 조작을 분리한다.

 

애플리케이션 테스팅이 애플리케이션 작성만큼 중요하다.

 

클라이언트 쪽의 애플리케이션과 서버 쪽을 분리해야 한다.

 

프레임워크가 개발자로 하여금 애플리케이션 개발에 있어서 처음부터 끝까지 전체적으로 가이드해줘야 한다. UI디자인에서부터 비즈니스 로직 개발을 거쳐 테스트까지를 말한다.

 

애플리케이션의 공통적인 일을 신경 쓰지 않게 하고 어려운 일을 가능케 해야 한다.

 

 

 

3. 주요 개념들

 

Model (모델)

  • 단순 자바스크립트 객체로 된 데이터 및 데이터 구조
  • 변형되지 않은 단순 자바스크립트 객체를 그대로 사용

 

View (뷰)

  • 템플릿과 모델아 합쳐져서 화면에 보여지는 DOM
  • 템플릿이 HTML이어서 바로 DOM으로 해석됨
  • DOM안에 directive가 템플릿 엔진인 $compile지시어를 통해 $watch를 설정하고 모델의 변경을 계속 감시하게 됨

 

Controller (컨트롤러)

  • 자바스크립트로된 제어 로직
  • 모델을 생성하고 메소드를 가지고 View로 퍼블리싱을 담당

 

Scope

  • 특정 DOM 영역을 위한 모델
  • 모델과 뷰를 감시하고, 반영하고, 컨트롤러에 이벤트를 보내는 역할
  • DOM과 가까운 계층구조를 갖음
  • 덕분에 DOM을 알 필요가 없어짐
AngularJS의 Scope 기능으로 인해, HTML의 DOM을 전부 꽤뚤고 있을 필요가 없고 JQuery를 사용한 Seletor와 오히려 프로그래밍 패턴이 겹치게 되어 JQuery의 사용을 지양하게 됩니다..
 
 

Template

  • HTML 자체를 템플릿으로 사용
  • 지시어, 표현식, 필터 등으로 템플릿 제어

 

Directives (지시어)

  • HTML을 확장하는 AngularJS만의 지시어
  • 예 : {{}}, ng-app, ng-controller 등
  • 사용자 정의를 할 수 있음

 

Expressions (표현식)

  • 해당 Scope로 부터 함수나 변수에 접근하는 표현식으로 템플릿에서 사용
  • 반복 및 조건 관련 표현식은 존재하지 않고, 지시어로 존재함

 

Filter

  • 표현식이 화면에 표기되는 포맷
  • {{ 표현식 | 필터 }} 형태로 사용
  • 사용자 정의를 할 수 있음

 

Data Binding

  • 모델과 뷰의 데이터를 실시간 연동
  • 양방향 데이터 바인딩

 

 

 

Module

  • 컨트롤러, 서비스, 필터, 지시어 등을 포함하여, 응용프로그램의 서로 다른 기능을 구성하는 컨테이너
  • 모든 Javascript 기능들이 ng-app="첫 모듈명" 을 시작으로 모듈 단위로 관리됨

 

Service

  • 특정 기능을 담당하는 객체들
  • 공통된 특정 작업을 수행하는 Singleton 객체
  • Singleton은 인스턴스가 1개만 존재하는 디자인 패턴

 

Service 목록 원본 접기
$anchorScroll       HTML5 spec에 지정된 규칙과 location hash의 현재 값에 따라 관련 요소의 스크롤 처리를 한다.
$cacheFactory       캐시화할 객체를 관리한다.
$compile            HTML문자열이나 DOM의 템플릿을 스코프에 연결하도록 컴파일한다.
$controller         콘트롤러를 인스턴스화 한다.
$document           JQuery(lite)로 감싼 window.document 이다.
$exceptionHandler   angularJS에서 감지되는 모든 예외가 위임된다.
$filter             정보 표현에 대한 formatting 처리를 한다.
$http               XMLHttpReqeust 또는 JSONP에 대한 기능을 제공한다.
$httpBackend        테스트하는 경우 $http에 대한 대체처리가 된다. 직접 호출은 불가하다.
$interpolate        $compile의 처리와 같이 데이터 바인딩의 처리를 컴파일한다.
$locale             다국어 규칙을 제공한다.
$location           window.location 보다 발전된 기능을 제공한다. (HTML5 처리 등)
$log                로깅을 처리한다.
$parse              AngularJS 표현식으로 변환한다.
$q                  Kris Kowal's Q(promise/deferred)와 동일한 기능을 제공한다.
$rootElement        AngularJS APP의 루트 요소를 얻는다.
$rootScope          AngularJS APP의 루트 스코프를 얻는다.
$route              URL을 감시해 해당 경로의 컨트롤러와 뷰를 mapping한다.
$routeParams        URL상의 파라미터를 관리한다.
$templateCache      HTML templete을 cache한다.
$timeout            window.setTimeout과 같은 기능을 하지만 $exceptionHadler와 연동 처리된다.
$window             전역 변수 오염의 방지와 테스트를 위해 브라우저의 window와 동일한 기능을 하는 객체를 제공한다.

 

Dependency Injection (의존성 주입)

  • 프로그래밍에서 구성요소간의 종속성을 소스코드에서 설정하지 않고 외부의 설정파일 등을 통해 주입하도록 하는 디자인 패턴으로, 종속성의 설정을 컴파일 시에서 실행 시로 조정해 모듈 간의 결합도를 낮춤
  • Factory Methods, Module Methods, Controllers

 

 

 

Injector

  • Dependency Injection을 담는 컨테이너 역할

 

Compiler

  • 템플릿에 AngularJS만의 지시어나 표현식을 처리(parsing)하는 역할

 

 

 

4. 동작 방식

 

Bootstrap

 

 

  1. 브라우저가 html을 로드 (DOM을 파싱한다.)
  2. Angular.js를 로드한다
  3. DOM Content Loaded Event를 기다린다.
  4. DOM이 모두 로드되면 ng-app 지시자를 찾는다.
  5. ng-app에서는 dependency injection 을 위해 사용되는 $injector를 생성한다.
  6. injector 지시어는 어플리케이션의 모델을 위한 컨텍스트가 되는 루트 스코프를 생성한다.
  7. 최종적으로 ng-app을 기준으로 하위DOM을 컴파일하고 rootScope와 링크시킨다.

 

 

 

5. 참고