요즘은 Javascript로 다양한 Web Application을 제작하는 경우가 많은 것 같다. 그 중에는 훌륭한 프로그램들이 많이 있는데, 그 만큼 개발의 복잡도도 많이 증가하고 있다. 순수하게 Javascript만을 이용해서 객체지향적으로 Web Application을 작성해도 되겠지만, 생각처럼 작성하기 쉽지 않고, 더불어 테스트, 유지보수, 확장성 등을 고려한다면 더더욱 Javascript만을 가지고 프로그램을 하기가 만만치 않다.
개인적으로 Web Application 작성을 위해서 Spine, Backbone를 더 많이 접해 보았지만, 이번에는 Google이 만들고 있는 AgnularJS에 대해서 알아보려고 한다. AngularJS 는 아래와 같은 특징들이 있다.
1. MVC Pattern
최근까지 Client측 프로그램을 위해서 MVC을 잘 사용하지는 않았다. 점점 더 요구 사항이 다양화되고, 프로그램이 복잡해 지면서 자연스럽게 Client측 프로그램도 MVC 패턴이 필요하게 되었다. 기존 응용프로그램 개발에 많이 이용되던 언어인 Java, C++은 기본적으로 MVC 패턴을 이용해서 프로그램이 가능하고, 그렇게 해야만 프로그램의 유지보수 및 확장이 용이하기 때문이다.
MVC는 데이터(model) 관리, 애플리케이션 로직(controller)관리, 데이터 표현(view)를 명확하게 분리하는 것이 주된 목적이다. View는 Model에서 데이터를 가져와 사용자에게 표시하고, Controller는 사용자가 어떤 동작을 취하면 Model의 데이터를 변경한다. 또 Model이 변경되면 다시 View가 그 변경사항을 화면에 표시하게 된다. AngularJS에서는 View는 DOM(Document Object Model), Controller는 Javascript Class며, Model 데이터는 객체 속성에 저장된다.
2. Client Side Templage
보통 Web Page, Web Application은 Server에서 데이터와 HTML을 합쳐서 결과를 Client에 보내고, 그 보내진 결과가 바로 화면에 표시된다.
AngularJS는 화면에 표시되는 방식이야 동일하지만 Template와 Data가 함께 Client로 보내져서, 그 보내진 결과를 Client에서 조합해서 화면에 뿌려지는 것이 차이점이라고 하겠다.
3. Dependency Injection
특정 컨트롤러에서 특정 작업을 처리하기 위해서 직접 그 해당 기능을 구현하는 것도 가능하지만, 그렇게 처리하기 시작하면 스파게티 코드를 회피할 방법을 찾기 어려워질 것이다. AngularJS가 기본 제공하는 것들을 그냥 처리하기 원하는 곳에 넣어주고, 처리할 곳에서는 인자로 넘어온 도구를 가지고 처리를 요청하면 되는 것이다.
종속물 주입을 이용하면 개발자는 종속물을 작성하지 않아도 되며 작성한 클래스가 직접 필요한 것을 요청하는 개발 방식을 따르면 된다.
4. Auto Data Binding
Web Application에서 데이터의 변경이 발생되면, 보통 그 발생된 Event를 체크해서 데이터를 가져온 다음, 모델에 직접 반영하고, 변경된 모델을 화면에 표시하기 위해서 화면을 업데이트 한다. 이 전체 과정이 경우에 따라서는 하나하나 개발자가 직접 구현해 주어야만 동작이 된다. 이렇듯 개발자가 작업해 주어야 할 일들이 상당히 많은 편이다.
AngularJS는 위의 Data Binding 과정을 개발자가 직접 처리해 주지 않아도 자동으로 알아서 처리해 준다. 물론 모든 것을 다 자동화해서 작성할 필요는 없지만, 자동으로 처리해 주는데 추가적으로 불필요한 코드를 작성하는 것 또한 낭비라고 생각된다. 아래의 코드를 실행하면 Input박스의 수정된 내용을 화면에 표시하기 위해서 {{hello.text}} 라고 간단히 적기만 하면 개발자는 별도의 작업이 필요 없이 변경사항이 화면에 표시된다.
<html ng-app>
<head>
<script src="angular.js"/></script>
<script src="controllers.js"/></script>
</head>
<body>
<div ng-controller='Controller'>
<input ng-model='hello.text'>
<p/>{{hello.text}}, World</p>
</div>
</body>
</html>
5. Directive
4번의 예제에서 ng-app, ng-controller등 기존에 보지 못했던 새로운 속성들이 보이는데, 이러한 HTML 확장 문법을 Directive라고 한다. AngularJS는 더 많은 지시어들을 가지고 있다. http://angualrsjs.org 에 방문하면 다양한 지시어를 만날 수 있다.
AngularJS의 지시어 뿐만이 아니라 개발자가 직접 지시어를 정의해서 사용하는 것도 가능하다.
마치며
위에 정의한 5가지의 특징 외에도 더 많은 특징들이 존재한다. 앞으로 Angular를 다양한 측면에서 바라보고, 실제 프로젝트에 적용해 보려고 한다. 직접 몇가지 예제를 가지고 테스트를 해본 필자의 느낌은 몹시 쓸만한 놈이다란 생각이 들었다.
전체적인 구조를 이해하고, 전체 뼈대를 만들어 놓는다면 어떤 JS framework보다 생산성과 재미를 제공할 것이다.