AngularJS에 대하여 알아보자

SPA(Single Page Application)

AngularJS는 SPA(Single Page Application) Framework 입니다.

 

Single Page Applicaiton(SPA, 스파)는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 재사용함으로써 사용자와 소통하는 WEB Applicaiton을 의미합니다.

 

SPA 사용 이전까지는 페이지 요청 시 Server에서 HTML을 생성 및 Rendering하여 Client로 전송하면 Client는 그 결과를 화면에 보여지도록 처리만 했습니다. 그러나 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 버거워졌습니다.

기존 환경의 동작 방식 (Server Side Redering)

 

이를 해결하기 위해 나온 것이 SPA인데요. SPA는 최초에 모든 정적 리소스(별도의 동적 데이터 처리가 필요 없는 부분들)를 Server로부터 전달받은 뒤, 동적 데이터를 Ajax와 같은 방식을 통해 비동기적으로 전달받아 처리한 뒤, Rendering하는 방식으로 동작합니다.

SPA 동작 방식 (Client Side Redering)

 

그리고 SPA로 유명한 Framework는 Angular, React, Vue 등이 있습니다.

 

AngularJS

AngularJS는 Google에서 제작한 Javascript Framework로 2009년에 발표되었으며, Client Side MVC/MVVM Framework 입니다.

 

또한, AngularJS는 다음과 같은 특징을 가지고 있습니다.

1. 자바스크립트로 작성할 코드 량을 줄여줄 수 있습니다.

DOM을 선택 및 조작하는 Javascript Code를 작성하지 않아도 됩니다.

 

2. 양방향 데이터 바인딩이 가능합니다.

Model Data와 View Data가 양방향 데이터 바인딩이 가능하여 Model이 바뀌면 View Data도 같이 변경 됩니다.

 

3. 개발 영역을 명확하게 분리할 수 있습니다.

AngularJS는 View Code와 Logic Code가 명확하게 분리되어 있습니다.

 

AngularJS의 구성 요소

Model

• 단순 Javascript 객체로 이뤄진 데이터
• 보통 JSON으로 표현되는 Application의 특정한 데이터 구조를 의미
• json 데이터를 jQuery의 $.ajax Method를 Wrapping한 Angular의 $http를 통해 XHR(XMLHttp Request)로 Server에서 가져오거나 Page를 Loading할 때 Database에서 직접 읽어오도록 할 수 있음

View

• Temple과 Model이 합쳐져 보여지는 화면으로 DOM 구조로 되어있음
• MVC Framework를 사용한다면, View를 갱신할 Model Data를 내려받은 뒤, HTML에서 해당 데이터를 통해 Redering함

Cotroller

• 템플릿을 구문 분석하고 지시문 및 표현식을 인스턴스화 함
• Controller는 AngularJS의 범위를 확장하는데 사용되는 Javascript 생성자 함수
• 다양한 방법으로 DOM에 연결할 수 있으며, AngularJS는 지정된 Controller의 생성자 함수를 이용하여 새 Controller 객체를 인스턴스화 함

Scope

• View와 Controller 사이에서 데이터를 연결해주는 역할
• Model과 View를 감시하고, Cotroller에 Event를 전달해주는 역할

Service

• 특정 기능을 담당하는 객체
• Single Tone 객체로 Instance가 하나만 존재함
• 기본 제공 서비스는 항상 $로 시작함 (ex: $http)

Directive (지시어)

• HTML을 확장하고 행위를 일으키는 AngularJS의 지시어 (ng-app, ng-controller, ng-click)
• ex : 데이터 바인딩을 위한 이중 중괄호 표기{}
• ex : Controller가 View의 어느 부분을 감독할 지를 지정하는 ng-controller
• ex : Input을 해당 Model에 Binding하는 ng-model

Data Binding

• Model과 View의 데이터를 실시간으로 연동함(양방향 데이터 바인딩)

Angluar의 Data Binding

Module

• 모든 Javascript 기능들이 ng-app="Module Name"과 같은 방식으로 모듈 단위로 관리됨
• Controller, Service, Filter 등을 포함하며, 응용 프로그램의 서로 다른 기능을 구성하는 Container

Component

• AngularJS Application은 Component를 중심(CBC, Component Based Development)으로 구성됨
• Component의 역할은 Applicaiton의 화면을 구성하는 View를 생성하고 관리하는 것
• AngulrJS는 Component를 조립하여 하나의 완성된 Application을 작성함

Reference

AngularJS