AngularJS

안녕하세요 박스여우입니다.

최근 AngularJS에 관심이 생겨서 AngularJS에 대해 공부를 하고 있습니다. 그리고 공부한 AngularJS의 내용을 블로그에 포스팅 하고자 합니다.

■ AbgularJS

지난 포스팅에서도 소개해 드렸듯이 AngularJS는 JavaScript로 만들어진 웹 애플리케이션 프레임워크 입니다.

라이브러리 : JQuery와 같이 유용한 함수의 집합이다. 개발자의 코드가 필요한 시점에 해당 함수들을 호출하고 애플리케이션의 전체 흐름을 제어합니다.

프레임워크 : AngykarJS등과 같이 개발자의 코드가 프레임워크의 빈 공간을 채우고, 프레임워크가 필요시점에 개발자의 코드를 호출하고 애플리케이션의 전체 흐름을 제어하게 됩니다.

■ AbgularJS의 특징

■ 작성해야 하는 JS의 코드량을 줄일 수 있다.

AngularJS를 사용하여 코드를 작성하면 Jquery를 사용한 코드보다 최대 절반 이하로 코드량을 줄일 수 있다고 합니다. AngularJS에서는 MVC구조를 제공하기 대문에 별도의 MVC구조를 위한 코드를 구현하지 않아도 된다는 장점 덕분에 코드를 줄이는데 한몫을 하는것 같습니다.

MVC 구조 (Model-View-Controller)

MVC구조는 소프트웨어 공학에서 사용되는 디자인 패턴, 아키텍처 패턴 입니다. 이 패턴을 정확하게 소프트웨어에 적용하게 된다면 사용자 인터페이스와 비즈니스 로직을 분리하여 서로 영향 없이 쉽게 수정할 수 있는 애플리케이션이 개발되게 됩니다.

여기서 Model은 데이터를, View는 TextBox, CheckBox등 사용자 인터페이스 요소를 나타내고, Controller는 데이터와 비즈니스 로직 사이의 상호동작을 관리합니다.

그리고 AngularJS는 화면의 데이터와 모델간의 양방향 바인딩을 제공하기 때문에 Dom을 선택하여 동기화하는 코드 같은게 필요없습니다! 지난 포스팅에서 보여드린바가 있습니다. (요기)

■ 재사용 할 수 있는 UI 컴포넌트를 만들 수 있다.

웹 애플리케이션의 복잡도가 증가하면서 지도나 그래프등 기본적인 HTML이 제공하지 않는 컴포넌트가 필요해 지는데, 이를 AngularJS에서는 <map>, <graph> 처럼 HTML 태그로 만들 수 있게 해 줍니다. 단순히 JS호출이 아닌 진짜 HTML태그와 속성(Attribute)로 말이죠!

■ HTML & CSS 개발자와 JS 개발자의 사이를 좋게 만든다.

기존의 코드는 DOM조작과 이벤트 처리를 위해서 JavaScript가 HTML의 코드를 알고 있어야 했습니다. 그리고 때에 따라 HTML코드를 수정하면 JavaScript 코드가 동작을 않하는 현상이 발생할 수 있습니다.

하지만 AngularJS에서는 HTML은 뷰 코드, JavaScript에서는 비즈니스 로직 코드만 작성하도록 해 주어 뷰 코드와 로직 코드를 명확히 분리해 줍니다. 따라서 JavaScript 개발자가 HTML 코드의 구조를 알 필요가 없습니다.

해당 내용을 아직 제대로 공부하지 않아 자세히는 모르겠지만, 설명을 보면 정말 엄청난 장점인것 같습니다. 앞으로 차근차근 알아보도록 하겠습니다.