AngularJS 핵심 요약

angular js_logo

AngularJS를 제대로 사용하기 전에 미리 알아두면 좋을 포인트를 정리하는 차원에서 작성해 보았습니다. 실제 사용 하기전 그리고 매뉴얼을 읽기 전에 “숲”을 본다는 의미로 참조하면 도움이 될 것 같습니다. 오히려 자세한 내용은 하단에 포함한 링크를 보시는 것을 권장합니다.

모듈

  • AngularJS는 기본적으로 ‘모듈’ 단위로 구성되어 있음
  • 컨트롤러, 서비스, 지시자 등 Angular 앱을 구성하는 요소를 포함(의존성 주입)하여 하나의 앱을 개발 함
  • 프로젝트에서 AngularJS를 사용하기 위해서는 두 가지가 필요
    • 스크립트에서 angular.module(‘모듈명’, ‘의존요소 선언한 배열’) 통해서 프로젝트에서 사용할 모듈(앱) 생성
    • 마크업에서는 AngularJS를 적용할 영역 태그의 속성에 “ng-app=(모듈명)” 포함
      • 전첵 프로젝트를 AngularJS를 사용하려면 html 태그에 포함하면 됨

$Scope

  • 자바스크립트의 실행컨텍스트를 모방한 것 같은  AngularJS 내에서 작업이 이루어지는 공간
  • 모델의 데이터를 보관하고 있는 곳으로 보통 컨트롤러와 뷰의 데이터를 공유하는 공간

주요 요소

모든 code sniff은 매뉴얼에서 가져옴

간략하게 핵심만 요약하였으므로 다음 글 ‘Angular.js는 왜 좋은가?‘ 이 조금 더 상세함

컨트롤러

  • 비즈니스 로직을 담고 있는 컴포넌트
  • 모듈에 controller(‘컨트롤러명’, ‘의존성 선언 및 컨틀롤러 함수’) 생성자 함수로 선언
  • html에서 특정 DOM에 controller를 맵핑하여 scope를 한정시켜 이 DOM 안에서만 사용하는 방식을 일반적으로 사용

지시자

  • html을 확장해서 주는 커스텀 마크업 syntax를 생성할 수 있는 컴포넌트
  • 사용자가 직접 html 요소, 속성값, 클래스 값 (심지어 주석까지)을 커스텀으로 정의할 수 있음
  • html 본래의 목적대로 정보의 구조화를 돕는 역할을 함

필터

  • 모델 정보를 뷰에 뿌리기 전에 실행하는 컴포넌트
  • 우리가 아는 그 전형적인 필터 맞음

 서비스

  • 특정 비즈니스 로직에 종속되지 않고 재사용 가능한 것들을 모아놓은 컴포넌트

템플릿

  • AngularJS에서 사용하는 지시자가 포함된 마크업 소스를 말하는 용어
  • AngularJS가 커스텀 마크업(지시자)를 컴파일해서 변경하기 전 코드라고 보면 됨

표현식

  • AngularJS에서는  마크업 코드 내에서이중 중괄호( {{ }} ) 안에 코드를 표현식이라고 함
    • 개념적으로는 php의 <? ?> / jsp의 <% %>와 같은 역할

의존성 주입

  • AngularJS는 각 모듈에서 사용할 코드를 DI 패턴을 사용해서 제공
  • 개발자는 프로젝트에 필요한 의존성을 코드에서 선언해주기만 하면 됨
  • 의존성을 선언하는 방식으로 매뉴얼에 3가지를 기술
    • Inline Array Annotation
    • $inject 속성 Annotation
    • Implicit Annotation

양방향 데이터 바인딩

  • 뷰와 모델 사이에 정보의 수정을 자동으로 동일하게 적용하는 메커니즘
  • jQuery 스타일처럼 DOM에 접근해서 데이터를 수정하는 방식이 아닌 데이터 중심적인 접근법
  • Angular에서는 양방향 데이터 바인딩 기능을 위해서 scope 안에 모든 모델값의 변화를 추적함
  • 추적하는 방식은 “dirty checking”이라는 방식을 사용
  • 값의 변화가 생길 때마다 scope내의 모든 값을 확인하면서 이전 값과 차이가 있을 경우 이를 뷰/모델에 적용함

$apply, $digest, $watch

  • angular의 실행환경을 벗어난 3rd 라이브러리에서의 코드도 $apply 메서드를 통해서 양방향 데이터 바인딩을 가능하게 해줌
  • $apply는 인위적으로 angular 환경으로 진입하게 하는 메서드라고 보면 됨
  • dirty checking 을 위해서는 $watch라는 메서드를 통해서 감시할 모델과 변경이 생겼을 때의 콜백함수를 등록하면 됨
  • 모든 scope는 $$watchers라는 배열을 가지고 있으며 $watch 함수로 감시할 모델을 등록하면 $$watchers에서 등록 됨
  • 모델의 변경이 생기면 $digest() 메서드가 실행되면서 해당 scope 안에 $$watchers에 등록된 모든 $watch함수를 한번씩 검사
  • 검사하여 값의 변화가 있으면 다시 처음부터 검사
  • $watch간의 서로 다른 모델의 수정을 하는 코드가 있으면 무한루프로 빠질 수 있음
  • 따라서 내부적으로 TTL(time-to-live)값이 10으로 설정되어 있음 (바꿀수도 있음)

 

함께 보면 좋을 자료

  1. AngularJS 공식 매뉴얼 (개발 가이드)
  2. AngularJS API 매뉴얼
  3. Angular.js는 왜 좋은가?
  4. [번역] 하루만에 끝내는 AngularJS
  5. AngularJS: Scope와 데이터 바인딩[ $apply, $watch ]
  6. AngularJS 도입 선택 가이드 공개합니다. [네이버 개발자 블로그]
  7. Thinking In AngularJS Way 
  8. Make Your Own AngularJS, Part 1: Scopes And Digest
  9. 5 AngularJS Antipatterns & Pitfalls
  10. digging into angulars controller as syntax
  11. Angular JS – you probably shouldn’t use $watch in your controllers.
  12. 5 Guidelines For Avoiding Scope Soup in Angular
  13. AngularJS-Learning