Develop

2014.01.06 10:29

[js] AngularJS를 소개합니다.

hooni

조회 수 13138 댓글 0

Atachment
첨부 '6'

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

앞선 프로젝트에서는 자바스크립트를 이용한 클라이언트 개발을 많이 하게 되었다.

따라서, 화면에서 데이터를 입력하고 입력한 값을 이용하여 서버측으로 요청하기 위한 데이터를 파싱하는 작업이 필요하고 반대로 서버측에서 응답받은 데이터를 이용하여 화면을 구성하는 작업이 대부분이다.

이러한 작업을 하기위해 최초에 화면을 구성하기 위해서는 서버측에 요청을 보내고, 서버로부터 응답받은 데이터를 이용하여 화면을 구성하기 위해서는 데이터를 화면에 알맞은 데이터로 가공하고 파싱하는 작업에 상당히 많은 노력과 시간이 들어가게 되며 개발자의 많은 코딩이 불가피하다. 물론 숙련된 개발자라면 자신만의 자바스크립트 코딩기법을 이용하여 데이터를 파싱하고 화면을 구성하는데 매우 큰 어려움은 없을 것이다.

하지만 자바스크립트 코딩이 미숙하거나 또는 자바언어를 이용한 개발에 익숙해져 있는 개발자들은 자바스크립트로 데이터 파싱을 하기위해 전역 변수와 함수내부의 동일한 이름의 지역변수(var 변수선언)로 인한 호이스팅(끌어올려짐) 현상 등 의도치 않은 문제를 떠않게 되고 이런 문제를 해결하기 위해 많은 시간을 들어야 한다. 이렇듯 데이터를 조작하는데 있어 코딩이 많아질수록 프로젝트 개발이 지연되거나 많은 개발비용이 필요하게 된다.

비록 고객사의 프로젝트는 개발방식에 엄격한 규제가 있어 여러가지 웹 프레임워크를 이용하여 개발하지는 못하였지만, 언제나 새로운 것에 대한 개발자의 열망과 호기심으로 요즘 트렌드가 되고있는 웹 프레임워크에 눈을 돌리게 되었고 이 계기가 AngularJS와의 첫만남이 되었다.

지금쯤 대부분 이런 생각이 들것이다. 자바스크립트 개발도 익숙치않아 생기는 문제가 이만저만이 아닌데 언제 또 다시 다른 프레임워크를 공부할 시간이 어딧나? 대부분 이런 생각에 다른 프레임워크로부터 눈을 거두게 됩니다.

따라서 요즘 트렌드가 되고 있는 여러가지 웹프레임워크중에서도 엄격한 심사가 필요했다.

개발자(주관적)의 요구사항은 다음의 그림1과 같다.

그림1. 웹 개발자의 요구사항

아래의 그림은 구글트렌드에서 실시한 여러가지 웹 프레임워크의 트렌드화를 나타내고 있는 그림으로 2013년 이후 AngularJS의 압도적인 상승세를 확인할 수 있다.

각각의 웹 프레임워크는 자신만의 특징과 장단점을 가지고 있지만 위의 웹개발자 요구사항을 모두 충족시키는 웹프레임워크는 단연 AngularJS이다.

그림2. 구글트렌드에서 실시된 웹 프레임워크 트렌드

AngularJS는 어떻게 탄생하였나?

2009년에 구글직원인 Misko hevery와 Adam abrons가 공동 개발하였으며 시초는 온라인 JSON Storage Service를 지원하는 소프트웨어로 개발되어 졌다.

이후 MIT 라이선스를 보유하였으며, Open Source 라이브러리로 채택되었으며 2013년 9월 기준 1.0.8 버전으로 정식 출시되었다.

AngularJS가 무엇이과 왜 자세히 봐야하는가?

이 질문에 대답하기 위해서 HTML이 제공하는 기능에 대해서 예를 들어 보겠다.

HTML의 특성상 이것은 다이나믹 Applicaiton을 위해 디자인된게 아니라는 것은 누구나 알 수 있을 것이다. HTML은 정적인 마크업언어로써 요소들을 생한다든지 어떠한 요소가 변했을때 UI요소를 필터링한다든지 또는 다이나믹 Application에 필요한 다양한 일들을 할 수 없다. 이러한 문제를 해결하기 위한것으로 Javascript를 이용하여 DOM을 수정할 수 있지만 개발자의 능력이 매우 중요하게 된다. AngularJS는 HTML을 확장시켜 다이나믹 Application을 지원하며 예를들어서 <option>태그를 <select>태그에 생성할때 자바스크립트의 코드의 작성없이 이를 수행한다. 당연히 추가적인 개발자의 코딩이 필요없으며, 데이터가 변경함에 있어 자동적으로 AngularJS에서 UI의 요소를 만들고 데이터 필터링, 소팅 그리고 더욱 많은 기능을 제공한다.

AngularJS 사용법

사용법을 설명하기에 앞서 간단한 예제를 예로들어 설명해보겠다.

사용자가 Input Box에 글을 입력하면 동적으로 하단에 입력한 값이 출력되는 간단한 예제로 이름을 입력한 화면이다.

그림3. 예제화면

다음 소스코드는 위의 예제화면을 개발하기위해 JQuery를 이용한 방법이다.

<html>
 <head>
    <script
     src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
     </script>
    <script>
        $(function(){
            var name = $('#name');
            var greeting = $('#greeting');
 
            function update(){
                greeting.text('안녕하세요, ' + name.val() + ' !!!');
            }
            update();
            name.bind('keydown', function(){
                setTimeout(update,0);
            });
        });
    </script>
 </head>
 
 <body>
    <input id="name" value="">
    <p id="greeting"></p>
 </body>
</html>

맨처음 즉시 실행함수를 선언하고, name 프로퍼티를 생성하고 bind()를 이용하여 지속적으로 호출하는 setTimeout()메소드까지..

보다시피 굉장히 간단한 예제화면을 개발하기위해 상당히 많은 소스코드가 필요하다. 프로젝트 개발을 하다보면 얼마나 많은 코딩이 필요하게될지 대충 짐작이 온다..

그럼, AngularJS는 얼마나 효율적으로 화면을 구성할 수 있는지 보겠다.

<!doctype html>
<html ng-app>
  <head>
    <script
     src="http://code.angularjs.org/angular-1.0.0rc10.min.js">
     </script>
  </head>
  <body>
      <input type="text" ng-model="yourName">
      <p>안녕하세요, {{yourName}} !!!</p>
  </body>
</html>

굉장히 심플하다. 보시다시피 JQuery를 이용했을때와는 달리 개발자가 힘들게 코딩한 부분이 없다.

아무리 단순한 예제라지만 앞선 JQuery와는 달리 개발자의 부담은 매우 줄어든다.

AngularJS의 기본구조

그림4. AngularJS의 기본 구조

위 그림4는 AngularJS의 기본구조를 나타낸 그림으로 AngularJS가 어떻게 로딩되고 시작되는지를 나타내주는 그림으로 순서는 다음과 같다.

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와 링크시킨다.

<사용법>

위의 그림에서 설명하였듯이 AngularJS를 사용하기 위해서는 다음과 같이 간단한 절차만 필요로 한다.

1. 이 페이지에서 AngularJS를 사용하겠다는 의미로 “ng-app” 지시어를 추가한다.

- 이 지시어는 AngularJS를 사용하려는 부분의 최상단에 추가하면 되는데 주로 html, body Tag에 추가한다. 위의 예제에서는 html Tag에 추가하였는데 이로써 html 하위의 모든곳에서 AngularJS를 사용할 수 있다.

2. input Tag에 “ng-model“지시어를 추가한다.

- ng-model의 이름과 {{ }}안에 있는 이름은 일치해야한다. ng-app 지시어를 추가함으로써 AngularJS의 양방향 데이터바인딩 구성작업은 완료된다.

앞서 보았듯이 AngularJS는 매우 사용하기 편리한데 이것은 다른 웹프레임워크와 차별되는 큰 장점이다. 즉 템플릿을 HTML 파일로 작성할 수 있다는 것으로, 이것이 가능한 이유는 프레임워크 코어에 강력한 DOM 변환 엔진을 넣어두었기 때문이다. DOM 변환 엔진을 통해 개발자는 AngularJS만의 directive를 이용하여HTML 문법을 확장할 수 있다.

AngularJS 기본 개념

AngularJS를 쉽게 이해하기 위해서 알아두어야 할 기본 개념으로 다음과 같이 5가지를 선정하였고 간단하게 설명하겠다.

1. Scope

- Scope는 모델 변경을 감지하고 표현하기위한 책임을 갖는다

- Scope는 DOM 구조와 가깝게 하이어라키 구조를 갖는다

2. Model

- 모델은 화면 템플릿에 합쳐지는 데이터를 가지고 있는 일반 자바스크립트 객체이다. (데이터라고 생각하면 된다.)

- Scope는 항상 모델을 참조하고 있다.

3. View

- 템플릿 스트링과 모델을 합쳐서 HTML을 만들고 DOM으로 해석되어 Browser에 표현된다 .

- Angular는 템플릿이 HTML이어서 바로 DOM으로 해석되고 DOM안에 directive가 템플릿 엔진인 $compile지시어를 통해 $watch를 설정하고 모델의 변경을 계속 감시하게 된다.

- View는 템플릿으로 Scope의 투영체이고, Scope는 Model과 View의 연결하며 controller로 이벤트를 보내는 역할을 한다.

4. Controller

- Controller는 View뒤에서 반드시 수행하는 코드이다.

- Controller 역할은 모델을 생성하고 콜백 메소드를 가지고 View로 퍼블리싱을 담당한다 .

- Controller 는 자바스크립트이고 업무적 행위를 정의한다. 또한 DOM rendering 정보가 일체 없다 .

5. Directives (지시어)

- 지시어는 HTML 을 확장하여 주고 행위를 일으키는 주체이다.

- 예를들어 앞의 예제에서 보았듯이 데이터 바인딩을 위한 이중 중괄호 표기{{}}, 컨트롤러가 뷰의 어느 부분을 감독할지를 지정하는 ng-controller, 인풋을 해당 모델의 구성물에 바인딩하는 ng-model 모두 Directive를 이용한 확장 문법이다.

AngularJS의 동작방식

이제는 AngularJS가 다른 웹프레임워크와의 차이점을 쉽게 이해가 되었을 것이고, 어떠한 방식으로 AngularJS가 이런 기능을 제공하는지 살펴보겠다. 아래 그림5는 AngularJS가 아닌 다른 JS의 데이터바인딩 구조를 그림으로 나타낸것이다.

그림5. 다른 JS의 단방향 데이터바인딩

그림5 분석 :

다른 JS들은 그림을 보다시피 최소 한번 템플릿과 모델이 결합되야하며 이 또한 자동적으로 이루어지지 않는다. 이말인즉슨 개발자가 일일이 모델과 뷰를 지속적으로 싱크를 맞추도록 코딩을 해야한다는 것으로 코딩이 불가피하다. 이로써 UI와 자바스크립트 속성에 데이터를 할당하기 위해 추가적으로 해야할 작업이 상당히 많아진다.

다음 그림6는 AngularJS의 데이터바인딩 구조이다.

그림6. AngularJS의 양방향 데이터바인딩

분석 그림6 :

AngularJS는 다른 JS와 달리 양방향 데이터바인딩을 지원한다. 페이지가 로드되면 AngularJS는 동일한 이름의 input과 데이터 모델을 연결하고 이둘의 싱크를 유지시킨다. 개발자는 단지 UI의 어느 부분에 어떤 자바스크립트 속성을 할당할지 선언만 하고(앞의 예제의 ng-model) 동기화는 자동으로 이루어지게 된다.

AngularJS는 $watch 명령어를 이용하여 모델과 뷰를 실시간으로 감시하며, 이때 사용자의 클릭이나 타이핑 등의 동작으로 애플리케이션을 조작(예제에서 Input Box에 값을 입력하는 행위)이 있을 경우 모델은 변경이 발생했음을 뷰에 알려서, 뷰가 변경사항을 현재 표시 중인 내용에 적용한다. 이렇듯 AngularJS는 뷰와 모델이 지속적이고 실시간으로 업데이트시킨다.

마치며

AngularJS의 여러가지 특징과 기능이 많지만 AngularJS의 가장 핵심인 양방향 데이터바인딩 기능에 집중하였다. AngularJS는 Template로 HTML을 지원하기 때문에 매우 쉽게 배울수 있다는 장점과 활용도가 매우 높다. 개발자가 현재 웹프레임워크에 불만이 있고 새로운 웹프레임워크를 고민하고 있다면 AngularJS에 대해 공부해보는것을 추천한다. 맨처음 AngularJS를 접햇을때는 원서뿐이어서 배우는데시간이 걸렸지만 현재는 변역서도 많이 출시되었기 때문에 공부하기 무리가 없는것같다. 또한 JQuery나 여타 웹프레임워크와 호환성이 매우 좋기 때문에 개발셋이 특화되어 있지않은 다른 프로젝트에서는 한번쯤 사용해보는것을 권장하며 마무리 한다.

* 참고문헌

[1] OREILLY, AngularJS

* 참고 사이트

[1] AngularJS 홈페이지 “http://angularjs.org/”

[2] AngularJS의 특징 “http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features/”

[출처] http://www.nextree.co.kr/p3241/