이번 포스팅에서는 약 2달 반동안 프로젝트를 진행 하면서 처음 접했던 JavaScript 프레임워크 및 라이브러리를 간단히 소개 하고 사용하면서 알게된 점과 느낀점을 작성할까 한다.

총 2편의 포스팅으로 나눠서 작성을 할 예정이고, 1편은 JavaScript 프레임워크인 AngularJS에 대한 내용이고, 2편은 JavaScript 라이브러리인 D3, C3, Dagre-D3, BigScatterChart에 대한 내용을 다루려고 한다.


1편에서 다룰 AngularJS는 이번 프로젝트를 통해 처음 접하고 알게된 것이었다.


AngularJS가 무엇인지 먼저 알아보자.

AngularJS는 무엇일까? 


AngularJS의 공식사이트인 https://www.angularjs.org/ 에 들어가면 가장 메인페이지에 다음과 같이 쓰여 있다.

HTML enhanced for web apps!

[웹 앱을 위해 강화된 HTML]

그리고 'AngularJS is a structural framework for dynamic web apps. - AngularJS는 동적인 웹 앱을 위한 프레임워크이다.' 라고 정의 되어 있다. 구글링을 통해 알게된 AngularJS의 몇가지 특징은 MVW (Model-View-Whatever) Architecture 패턴을 이용한 개발이 가능하다. SPA(Single Page Application) 개발에 용이하다. 양방향 Data-Binding이 가능하다. 프레임워크의 사용으로 인해 협업이 용이하다. 등 여러가지 특징이 있었다. 이런 특징을 바탕으로 공홈에 있는 Developer Guide에 명시된 개념설명중 몇가지와 예제를 살펴보도록 하자.

설명에 앞서 AngularJS는 SPA(Single Page Application) 개발에 특화되어 있고 대부분 Module 별로 나누어 구현 하는 방식을 이용한다. 여기서 Module이란 UI Components (ex. Modal, 특정 Button Group, Line Chart, table 등등..)라고 생각하면 이해하기가 쉬울 것 같다.
ng-app이라는 지시어를 통해 AngularJS 코드가 적용 및 시작 된다. ng-app은 HTML코드에서 <html></html>과 같은 느낌이다. 

1. Template : HTML with additional markup (추가된 마크업으로 작성된 HTML)
Template은 HTML로 작성된 Module이라고 이해하면 된다.

2. Direvtives : extend HTML with Custom attributes and elements (커스텀 속성과 요소로 된 확장된 HTML)
Directives는 말그대로 사용자가 만든 HTML 속성 혹은 사용자가 만든 Tag 등이다. 보통 하나의 Directives는 하나의 Module을 담당한다.


3. View : what the user  sees (the DOM) 말그대로 DOM이다.

4. Model : View에서 사용자에게 보여지는 데이타 그리고 사용자와 상호작용하는 것(양방향 Data-binding) 이다. 자바스크립트 객체라고 생각하면 이해하기 편할 것이다.
아래 예제에서 수량과 금액을 수정할 경우 양방향 Data-binding을 통해 수정된 합계가 바로바로 적용되는 것을 확인 할 수 있을 것이다. ng-model을 통해 'qty'  'cost'를 model로 선언해 주었고 Expression인 '{{ }}'를 통해 바라보고 있는 model의 변화를 바로바로 반영 하는 것이다.


5. 양방향 Data-binding

아래는 일반적인 JavaScript에서 볼 수 있는 단방향 Data-binding의 동작 모습과 4.Model의 예시에서 설명한 AngularJS의 양방향 Data-binding 동작 방식을 잘보여 주는 그림이다. 기존의 JavaScript 혹은 JQuery는 Data-Binding 동작을 표현 하기위해서 여러가지 작업을 해주어야 하지만 AngularJS에서는 View와 Model이 서로를 바라보면서 자동으로 Data를 업데이트 하기 때문에 간단하고 쉽게 표현을 할 수 있다. 



[그림 ] One-Way Data Binding in Classical Template Systems (출처 - https://docs.angularjs.org/guide/databinding)



[그림 ] Two-Way Data Binding in AngularTemplates (출처 - https://docs.angularjs.org/guide/databinding)


6. scope : context where the model is stored so that controllers, directives, and expressions can access it

스코프는 angular에서 컨트롤러나 디렉티브의 유효범위내의 저장 공간이라고 생각하면 이해하기 쉬울 것이다. 경험해본 바에 의하면 Angular에서 Scope의 범위는 상당히 중요한것 같다. 처음에 Angular로 코딩을 할 때 Scope에 대해 제대로 이해하지 않은 상태로 진행 하여 많이 애를 먹었었다. angularJs를 처음 접한다면 꼭 Scope에 대해 이해하고 이용하길 바란다. 


아래는 Scope를 저장공간으로 활용한 예제 이다.




아래는 Scope를 컨트롤러나 디렉티브의 유효범위 별 Scope를 표현한 예제이다.

HTML의 Expressions와 Javascript의 Scope를 보면 같은 name 이지만 Scope범위 별로 보여지는 값이 다른 것을 확인 할 수 있다. 



이처럼 Scope의 범위에 따라 컨트롤 할 수 있는 범위가 달라지기 때문에 Angular에서는 항상 내가 사용하는 Scope의 범위를 생각하면서 구현해야한다.



AngularJS 홈페이지에 보면 왜 AngularJS 인가? 라는 질문과 그에 대한 답이 다음과 같이 제시되어 있다.

 - HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

- HTML은 정적인 documents를 표현하기 위해 훌륭하다. 그러나 HTML은 우리가 그것을 웹 애플리케이션에서 동적인 모습을 표현하려 할때 주저하게 한다. AngularJS는 애플리케이션을 위한 HTML 문법의 확장을 제공한다. 결과적으로 더 나은 표현을 할 수 있게 되고, 더 나은 가독성을 제공하고, 개발을 빠르게 할 수 있게 한다.


AngularJS를 접하기 전까지 나는 정적인 HTML을 동적으로 표현하기 위한 방법으로 JavaScript 혹은 JQuery를 사용하여 Dom을 조작하는 방식을 사용해 왔다. 사실 AngularJS를 사용해보기 전까지는 JavaScript와 JQuery를 사용한 개발 말고 다른 방식으로 동적인 웹 앱을 개발하는 것에 대해 생각을 해보지 못했었다. JavaScript, JQuery 만으로도 충분한 표현이 가능하다고 생각했었기 때문이다.

프로젝트를 진행하기 위한 준비 과정 역시 JavaScript와 JQuery만으로 MockUp을 개발 했었다. 실제 AngularJS를 이용한 개발은 프로젝트 투입 며칠전 요구사항으로 AngularJS를 이용해 개발해달라고 하여 접하게 된 것이다. 

AngularJS에 대한 첫 느낌은 '아... 뭔 소리지 이게?' 였다. 마치 대학교에서 처음 개발 언어를 접했을 때와 같은 기분이었다. 

다른 주니어 개발자들에게는 어떨지 모르겠지만 나에게 AngularJS의 진입 장벽은 꽤나 높게 느껴졌다.

대략 1주일 정도의 학습 기간을 가진 뒤 JQuery로 짜여진 코드를 AngularJS를 적용한 버전으로 바꾸는 작업을 진행 하였다. 

물론 1주일이라는 기간동안 AngularJS를 완벽히 파악하기에는 짧은 기간이었기에 작업에는 많은 어려움이 있었고 개발 속도 또한 더디게 진행 되었다. 당시 어려움을 느꼈던 부분은 크게 3가지가 있었다.


1. 위에서도 언급했던 Scope 사용범위에 대한 이해 부족

2. 단기간에 학습하고 활용하기에는 너무 많은 API들

3. 버전별 비호환성


많은 API 만큼 많은 것을 할 수 있겠지만 프로젝트 기간 동안 학습하고 활용하기에는 너무 많은 양이었다. 때문에 내가 실제 개발에 사용한 API 함수 혹은 Service역시 극히 일부분이었다. 또한 처음 적용할 당시 버전에 따라서 Directive(지시어) 사용법이라던지 Provider 사용법이 다르고 호환이 되지 않는 다는것을 알지 못해서 많은 삽질(?)을 하였다. 


AngularJS가 매력적이고 유용한 점이 많지만 개인적으로 프로젝트 진행중에는 'JQuery를 사용했으면 더 쉽게 해결될 문제였을 텐데..'  라고 생각되는 부분이 많았었다. 물론 학습기간도 짧았고 당시에는 내가 AngularJS의 개념을 완벽히 파악하고 개발을 했던게 아니었기 때문에 발생하는 문제였을 것이다.

아무래도 주니어 개발자로 이제 막 첫걸음을 내딛는 단계이기에 이해하는데 한계와 경험부족으로 인한 어려움이 많았고, 그로인해 포스팅에도 안좋은 점이 많이 부각된 것 같다. AngularJS를 어렵게 느낀 것은 사실이지만 좀 더 공부해 보고싶다. 아직 AngularJS의 매력에 푹 빠져보지도 못했고 내가 경험한 AngularJS는 극히 일부분이기 때문이다. 언젠가 Angular의 매력을 충분히 느끼게 된다면 Angular강좌 같은 포스팅도 가능 하지 않을까 싶다. 강좌 포스팅을 할 수 있는 날을 기대 하며 1편 AngularJS, RequireJS 포스팅은 마치도록 하겠다. 


다음 포스팅인 주니어 개발자의 경험기 [2편 -  JavaScript 시각화 라이브러리] 에서는 프로젝트에 사용했던 JavaScript 시각화 Library들에 대해 알아보도록하겠다.


Posted by 한종민