toggle menu

[AngularJS] 기본 형태와 어플리케이션 로딩 과정

2012.10.29 15:17 AngularJS

AngularJS의 기본 형태


AnagularJS만의 독특한 형태에 대해서 한번 살펴보자.

AnagularJS를 처음 접했을 때 다른 JS 라이브러리와 눈에 띄게 다르다고 느껴지는 부분은, HTML 태그 등에 ng-app 라는 속성이 포함되어 있다는 것과, AnagularJS 라이브러리를 로드한다는 것, 마지막으로 {{ }} 로 감싸진 Anagular 표현식이 존재한다는 것 정도일지도 모른다.

하지만 실제 AngularJS의 세계는 jQuery에 익숙해져 있는 사람들이 바로 이해할 수 있을정도로 간단하진 않다. :)

AnagularJS의 강점은, 양방향 데이터바인딩 구현, 자바스크립트 상에서 MVC(혹은 MVVM) 패턴을 구현, 다이렉티브로 태그를 커스터마이즈 가능하다는 점 등으로 알려져 있다. 실제로 사용하다보면, AngularJS가 가지고 있는 구조 자체의 단단함으로 인해 학습이 필요한 부분이 많지만, 또 그 단단함으로 인해 여러 사람이 협업할 때 구조 내에서 코딩을 하기 때문에 코드의 질이 어느정도 보장되고, 구조적인 틀이 제공되기 때문에 대규모 웹 어플리케이션을 개발할 때 불필요한 고민과 작업을 줄여줄 수 있다는 점 역시 큰 장점으로 다가오게 된다.


이건 앞으로 하나하나 살펴보기로하고, 간단한 예제를 통해 Anagular의 기본 형태를 이해해보자.


<html ng-app> <!-- ng-app 지시어는 Anagular를 로드하고 초기화시킨다. Anagular는 ng-app와 같은 대쉬가 포함된 형태의 작명법을 지원한다. html 태그에 ng-app 속성을 부여하면, 하위 모든 요소는 모두 Anagular 어플리케이션으로 다뤄진다. --> <head> <meta charset="utf-8"> <title>My HTML File</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"> </script> <!-- 이 태그는 당연하게도 Anagularjs를 로드하고, 더불어 HTML페이지가 모두 로드된 후에 브라우저에 의해 실행되는 콜백을 등록한다. 콜백이 실행되면, Anagular는 ng-app 지시어를 찾게된다. 다이렉티브를 찾으면 ng-app 지시어가 정의된 요소가 존재하는 어플리케이션 DOM의 최상위에 부트스트랩을 건다. --> </head> <body> <p>Nothing here {{'yet' + '!'}}</p> <!-- {{ 와 }}에 의해 감싸진 부분은 Anagular 표현식을 나타낸다. 여기에서는 단순하게 yet과 !를 더하는 기능만을 수행한다. Anagular 표현식은 일종의 자바스크립트 호환 코드 스니펫으로 현재 모델 범위 컨텍스트 안에서 Anagular에 의해 평가된다. --> </body> </html>




결과는 Nothing here yet! 이라는 글자가 출력된다.
아래의 jsFiddle을 통해 간단하게 테스트해 볼 수 있다!





위의 예제는 실제적으로 설정해주어야하는 많은 부분을 생략한 간소화된 버전이다.
실제적으로 많이 활용되는 기본 형태의 Anagular앱은 아래와 같다.






앵귤라JS 로딩 과정

위에서 다룬 예제들의 주석까지 꼼꼼하게 살펴봤다면 아마도 어느정도 AngularJS의 구조와 방식에 대해 어렴풋이 이해가 되기 시작했을 것이다.

이번에는 AngularJS 어플리케이션이 구동(로딩)되는 과정을 위의 소스들을 참고해가며 살펴보자.

AngularJS의 로딩의 첫 과정은 ng-app 지시어를 통해 대부분 매우 쉽고 간편하게 이루어진다. 하지만 일부의 경우 스크립트 로더를 사용하는 형태로 수동적으로 어플리케이션을 시작할 수 있다. (IE 등에서 호환성 문제로 이러한 스크립트 로더 형태가 필요해질 수 있다)

세가지 매우 중요한 과정이 AnagularJS 어플리케이션의 로딩 중에 일어나게 된다.

1. dependency injection을 위해 사용되는 인젝터가 생성된다.
2. 인젝터는 어플리케이션의 모델을 위한 컨텍스트가 되는 루트스코프를 생성한다.
3. Anagular는 그 이후에 ng-app의 루트 요소로부터 시작점을 삼아 하위요소들을 "컴파일"한다. 

한번 어플리케이션이 로딩되고 나면 브라우저에서 어떤 이벤트(마우스클릭, HTTP 응답, 키 입력 등)가 입력될 때까지 기다리게 된다.
이런 이벤트가 일어나게 되면 Anagular는 이벤트를 인지하고 이 이벤트가 어떤 모델이든 변경시키고 또 그 변화된 것을 찾게되면 Anagular는 영향을 반영한 뷰를 리플렉트하게 된다.


 


AngularJS 관련 포스팅 더보기