Start Angularjs!

#0 들어가기전

개인적으로 스터디 진행하고 있는 것들 때문에 앵귤러 연재를 못 했습니다. 그런데 얼마 전에 메일을 확인하고 적지 않은 분들이 보잘것없는 제 토픽에 관심을 가져주셔서 추가로 연재하게 되었습니다. 혹시 오타나 잘못된 내용은 피드백 좀 부탁드리겠습니다.

#1 앵귤러 시작하기

앵귤러JS를 시작해봅시다. 막상 무엇부터 시작해야할지 모르는 초급자분들에 시선에 맞추어 작성된 토픽이니 자신에게 모르는 부분만 참고하시면 도움되실듯합니다. 우선 앵귤러JS 홈페이지('https://angularjs.org/')를 통해서 소스를 다운받을수있습니다. 아니면 아래코드를 처럼 구글 CDN 서비스를 이용하여 호출할수도있습니다.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

아래소스는 이전에 토픽('Angularjs Overview') 에서 말씀드린 데이터 바인딩을 잘 보여주는 예입니다. 또한 기존 우리가 많이 접하던 소스와는 달리 ng접두사가 붙었다. (ex : ng *)

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>영준이월드</title>
    <script type="text/javascript" src="로컬에서 호출 할 앵귤러 파일" >
    <!--cdn을 이용할경우 위의 스크립트 태그를 지우고 아래를 붙여넣으면 됩니다. -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  </head>
  <body>
    <input type="text" ng-model="x">
    <p>{{ x }}</p>
  </body>
</html>

제일 먼저 ng접두사에 대한 설명을하겠습니다.

<html ng-app> : 모든 앵귤러JS코드는 ng-app 지시자로 감싸야합니다. ng-app의 의미는 이 태그안에 모든 것이 앵귤러 애플리케이션으로 처리된다는 뜻 입니다. 즉 앵귤러 영역을 지정하는 것 입니다. ng-app 지시어는 앵귤러를 로드하고 초기화시킨다. 앵귤러는 ng-app와 같은 대쉬가 포함된 형태의 작명법을 지원한다.
<input type="text" ng-model="x"> : 데이터 바인딩 방법 중 하나입니다. ng-model 지시자는 input 요소와 바인딩됩니다.
<p>{{ x }}</p> : input태그에 값이 입력되면 p태그에 자동으로 업데이트 됩니다. 좀 더 보충설면하자면 ng-model 디렉티브로 input이 양방향 바인딩(two-way binding) 된 것.

아마 제이쿼리의 익숙해져있는 프론트개발자라면 다소 앵귤러JS입문에 힘들수있습니다. 제이쿼리와 앵귤러JS의 차이점은 무엇인가에 대해서 짧게 설명드리겠습니다. 제이쿼리는 자신들을 자바스크립트 라이브러리라 칭합니다. 현재 앵귤러JS 홈페이지에 앵귤러JS 소개구문을 보면 자신을 프레임워크라 칭하고있습니다. 자바스크립트 라이브러리와 자바스크립트 프레임워크의 차이입니다. 여기서 라이브러리와 프레임워크에대한 개념을 두고 헷갈리실분들을 위해서 추가설명하겠습니다.

라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이다. 호출하는 측에 전적으로 주도성이있다.

반면 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재한다.

input 태그에 입력한 값들은 $scope에 저장되어있다. input 태그에 값을 입력할때마다 스코프의 해당 객체가 갱신된다. $scope는 기본적으로 컨트롤러와 템플릿을 연결하고 모델을 보광해서 양방향 바인딩을 할 수 있게하는 객체다.

#2 주요개념

이전 MVC 디자인패턴을 언급한적있다. 사이드언어(백엔드)에 친숙한 사람들이라면 MVC 패턴은 이미 알고있을거다. 하지만 대부분의

아래는 앵귤러JS의 주요개념들입니다.

Model

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

View

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

Controller

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

Scope

특정 DOM 영역을 위한 모델
모델과 뷰를 감시하고, 반영하고, 컨틀로러에 이벤트를 보내는 역할
DOM과 가까운 계층구조를 갖고있음

Template

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

Directives

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

Expressions

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

Filter

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

Data Binding

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

Module

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

Service

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

Injector

Dependency injection을 담는 컨테이너 역할

Compiler

템플릿에 앵귤러JS만의 지시어나 표현식을 처리(parsing)하는 역할

#3 동작방식

클라이언트(브라우저)가 HTML을 로드한다.(DOM을 파싱한다.)
토픽예제처럼 로컬이나 CDN을 통해서 앵귤러JS를 로드한다.
DOM Content Loaded Event 를 기다린다.
DOM이 모두 로드되면 ng-app 지시자를 찾는다.
ng-app에서는 dependeny injection을 위해 사용되는 $injector를 생성한다.
injector 지시어는 어플리케이션의 모델을 위한 컨텍스트가 되는 루트 스코프를 생성한다.
최종적으로 ng-app을 기준으로 하위DOM을 컴파일하고 rootScope와 링크시킨다.

#0 들어가기전

#1 앵귤러 시작하기

#2 주요개념

#3 동작방식

댓글