모바일웹 개발 프로젝트를 진행하게 되면서 AngulrJs라는 것을 처음 접하게 되었습니다.

발음하기도 애매한 AngularJs란! 한마디로 표현하면 웹서비스 중 FRONT-END에 적용되는 FRONT MVC 프레임워크입니다.

보통 웹서비스를 생각하면 SPRING 기반의 서버측 프로그래밍과 JSP와 같은 프론트 프로그래밍로 나누어 생각하게 되는데

AngularJs는 프론트단의 프레임워크로서 프론트 개발 및 유지보수를 지원해주는 프레임워크입니다.

이는 프론트단에 MVC를 적용하여 JSP소스 안에 HTML과 파라미터변수, 자바스크립트, CSS 등이 

밀접하게 결합되어 무엇하나 수정하기 어려운 상태가 되는 스파게티 소스가 되는 것을 방지합니다.

즉, 화면의 구현도 모델(데이터), 뷰(HTML-템플릿), 컨트롤러(자바스크립트 로직)로 나누어 직관적으로 관리될수 있도록 한 것이죠.

결과적으로 제 3의 개발자가 소스를 보더라도 쉽게 알아 볼수 있고 수정도 용이하게 도와주는 것이죠.

앞서 언급한 MVC개념뿐만 아니라 AngularJs에는 다양한 기능들이 존재하는데

상세한 내용에 앞서 우선 AngularJS가 제공하는 주요 기능은 다음과 같습니다.

■ 양방향 데이터 바인딩

프론트 개발 시 주로 반복적으로 하게되는 작업이 DB에서 조회한 데이터들을 화면에 보여주고 사용자의 동작에 따라 

그 값들을 변경시켜 보여주도록 하는 것들입니다.

Jquery와 같은 라이브러리 등이 존재하여 이 작업을 조금 수월하게 도와주지만 귀찮은 작업임에는 분명한 것들입니다.

AngularJS는 양방향 데이터 바인딩을 지원하기 때문에 데이터변수들을 선언하고 그 변수들을 간단한 태그들을 사용하여

Input 태그들에 바인딩 시켜주게 되면 데이터 변경 시 바인딩된 태그들의 값도 동적으로 바뀌게 되며

역으로 바인딩된 화면을 조작하게 되면 데이터값이 바뀌게 됩니다.

이렇게 간단히 바인딩 선언만 해주면 지금까지 자바스크립트로 처리하던 작업을 한방에 해결할 수 있습니다.

■ MVC 구조

위에서 설명한 주요기능입니다.

AngularJs는 단일페이지로 구성되며 단일페이지 내에 일부분만 동적으로 템플릿 HTML을 읽어와 데이터를 바인딩시키고

화면을 보여주게 됩니다. 화면이 로딩된 이후에는 구현된 컨트롤러 로직에서 사용자의 동작을 처리하게 됩니다.

■ 지시자 (directive)를 이용한 HTML 확장

자주 사용되는 컴포넌트들은 개발자가 새롭게 구현하여 재사용할 수 있습니다.

예를 들어 특정기간만 선택가능한 달력을 지시자로 선언한뒤 자바스크립트로 구현하여 두고

HTML 템플릿에서 해당 지시자(태그)를 선언하여 주고 데이터를 바인딩해 주면 간단히 재사용할 수 있습니다.

■ 의존관계 주입 (Dependency Injection)

정확히 이해한 것인지는 잘 모르겠지만 적어보자면 

선언된 지시자를 활용하여 기능을 구현함으로써 유연한 결합을 할수 있다는 개념같습니다.

지시자를 사용하지 않고 화면별로 구현을 해놓고 나중에 그 부분에 수정이 필요한 경우 각 화면별로 구현한 내용을

확인하고 수정을 하여야는 불상사가 있을 수 있습니다. 하지만 입맛에 맞는 기능을 지시자로 구현해 놓고 

재활용하게 되면 변경이 필요할 때 그 지시자만 수정하면 보다 수월하게 변경작업을 할 수 있게되고 버그가 발생할

확률을 줄일 수 있게 됩니다.

■ 단일 페이지 웹 애플리케이션을 위한 리우터 (Router)

AngularJS는 URL 변경 이벤트를 감지하고 변경되었을 때 호출되는 함수를 구현해 놓았습니다.

그 함수에서는 읽어들일 템플릿 HTML 등 여러가지 설정을 개발자가 직접 설정할 수 있도록 되어있습니다.

URL 변경이 발생한 경우 URL 파라미터를 분석하여 설정해둔 HTML을 동적으로 읽어와 서비스 해주게 됩니다.

결국 브라우저 주소창의 URL은 변경이 되나 페이지 전체가 리로딩되지 않고 부분적인 화면만 동적으로 변경됩니다.

이 프레임웍을 도입 시 중요하게 검토해봐야할 부분이 바로 이 부분입니다.

단일 페이지로 서비스가 이루어지기 때문에 History Back, META TAG연동, 화면의 뷰수를 카운팅하기 위해 분석하는 

Web Server의 log 형태 등 생각하지 못한 부분에서 문제가 발생할 수 도 있습니다.

물론 이러한 문제들은 AngularJs를 사용하고 있는 개발자들의 공통된 관심사이기 때문에 대다수의 이슈들은 

이미 논의되고 있으며 해결책이나 우회할 수 있는 개발방법들이 나오고 있는 것으로 알고 있습니다.

구글링을 통해 이슈사항들과 해결방법들을 얻으실 수 있으실 겁니다.

■  $q를 이용한 자바스크립트 비동기 프로그래밍 지원

단일 페이지 웹 애플리케이션을 구현하기 위해 비동기 프로그래밍을 지원합니다. 

기존에 접해왔던 비동기식 프로그래밍과 큰 차이는 없는 것으로 느껴집니다.

■ 자바스크립트 테스팅 지원

책에서 자세히 언급되지 않은 부분이라 따로 자료를 찾아봐서 테스트를 어떻게 효과적으로 지원해주는지 

찾아봐야 될 것 같습니다.

마치며.. 

구글에서 일하고 있는 개발자가 기존에 존재하던 소스를 자신이 구현한 AngularJS 프레임웍을 활용하면 

2주(?)만에 소스를 완벽히 재개발하고 서비스할 수 있다고 자신했다고 하던데..

기존 소스 개발에 얼마의 시간이 소요됐던 것인지는 정확히는 모르지만 실제로 AngularJs로 구현하는데 3주가 소요되었고 

소스라인도 기존것에 비해 엄청나게 줄었다고 합니다. 

짧은 시간안에 기존의 서비스들을 AngularJS로 재개발해냈다는 사실이 알려지면서 이 프레임워크가 대두가 되었다고 하는데요

실질적으로 적용되는 상용화 서비스가 앞으로 얼마나 더 늘어나게 될지 지켜봐야 할 것 같습니다.