[AngularJS] SPAs를 위한 JS 프레임워크 소개

내가 경험했던바에 따르면 한 프로젝트에 다수의 개발자가 특정한 개발 규칙없이 개발을 하면

개발자마다 코딩 스타일이 다르다보니 유지보수시 소스 분석시간이 길어지고

기능간 종속성을 알 수없어 잠재적인 버그의 위험성이 커지고

개발자마다 동일한 혹은 비슷한 기능 개발을 위해 매 프로젝트마다 반복 코딩해야하는 비효율성이 있다고 생각됩니다.

이를 해결하고자 스크립트 프레임워크를 조사한 결과 최근 JS단에서 AngularJS의 반응이 좋은것 같아 이를 소개하고자 합니다.

AngularJS란?

MIT 라이센스에 기반한 오픈소스 프로젝트로

웹 서비스를 SPAs(Single Page Applications)이라는 개념으로 접근하여

기존 개발 방법중에서 HTML의 변경을 위해 돔을 직접 컨트롤하는 방법에서 벗어나

HTML을 확장하여 사용할 수 있도록 도와주는 프레임워크입니다. (말이 좀 어렵네요.)

이러한 개념을 바탕을 둔 AngularJS의 주요한 특징중 하나가

HTML의 태그와 바인딩하여 데이터를 공유하거나 

태그의 확장 및 커스텀 태그를 생성하여 사용하도록 지원하는 것입니다.

이해를 돕기 위해 샘플 코드를 링크합니다.

데이터 바인딩의 예 :: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_default

태그 확장의 예 :: http://plnkr.co/edit/arDE6Zm8vty1p4RJgXAn?p=preview

커스텀 태그의 예 :: http://plnkr.co/edit/LC8HF1FF45kFeUP9WxpV?p=preview

위의 예에서와 같이 AngularJS가 제공하는 Directive를 사용하여 데이터를 바인딩하거나 태그를 확장하여 사용하면 

HTML의 코드양을 줄일 수 있고 코드가 직관적으로 느껴질 수 있습니다.

부가적으로 view단과 controller단을 분리할 수 있어 좀 더 구조적으로 프로그래밍이 가능해집니다.

제가 설명하는데에는 한계가 있어 잘 정리되어있는 자료들을 아래에 소개합니다.

그 밖에 참고 자료들

• NAVER D2 - AngularJS 도입 선택 가이드 공개합니다. :: http://d2.naver.com/helloworld/1172239
• AngularJS의 기본적인 특징들 및 프로젝트를 도입하기 위해 고려할 사항들에 대해 잘 설명되어 있는 곳입니다.
• Angular Tips - Why dose Angular.js Rock? :: http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/
• 데이터 바인딩, 스코프, 디렉티브, 필터, 서비스에 대해서 알기 쉽게 설명되어있는 곳입니다.

자료 출처

• AngularJS :: https://angularjs.org/
• w3schools :: http://www.w3schools.com/angular/default.asp