AngularJS는 JavaScript 기반의 오픈소스 프론트엔드 웹 애플리케이션 프레임워크의 하나로, 싱글 페이지 애플리케이션 개발 중에 마주치는 여러 문제들을 해결하기 위해 개발되었으며, 주로 구글과 개별 커뮤니티, 여러 회사에 의해 유지보수 되고 있습니다.
추가적으로, 리치 인터넷 애플리케이션에 공통적으로 사용되는 구성 요소들과 더불어 클라이언트 사이드의 MVC(Model-View-Controller), MVVM(Model-View-View-Model) 구조를 위한 프레임워크를 제공함으로써 이러한 애플리케이션들의 개발 및 테스트를 단순화할 수 있습니다.
(https://ko.wikipedia.org/wiki/AngularJS)
BootStrap
AngularJS BootStraper가 수행하는 작업들은 DOM을 로드한 이유 세 단계로 발생합니다.
- 새로운 인젝터(Injector) 생성
- DOM을 형식화하는 디렉티브(Directive)를 컴파일
- 모든 Directive들을 스코프(scope)로 링크
AngularJS의 Directive의 역할
- 개발자가 사용자 지정 및 재사용 가능한 HTML 유사 요소 및 속성 지정
- 데이터 바인딩과 프리젠테이션 구성 요소의 동작을 정의
자주 사용하는 Directive 종류
- ng-app
- ng-bind
- ng-model
- ng-options
- ng-class
- ng-controller
- ng-repeat
- ng-show & ng-hide
- ng-aria
- ng-animate
- ng-init
이 외에도 많은 Directive가 존재합니다.
AngularJS 장점
- 컴파일 속도가 굉장히 빠릅니다.
- MVC Pattern 개발이 가능하여 서버의 작업을 줄일 수 있습니다.
- Data Binding 기능을 통해 동적 웹 페이지를 손쉽게 구성할 수 있습니다.
- UI 화면들을 재사용할 수 있어 작업 생산성이 높아집니다.
- Data Binding: 화면상에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서 서로 간의 데이터를 동기화하는 것
AngularJS Vs Angular
- Version이 1.x, 2.x, 4.x, 6.x로 나뉩니다.
- AngularJS가 2.x 버전이 발표되면서, Angular로 이름이 변경되었습니다.
- Angular로 이름이 변경되면서 성능이 향상되었으며 여러가지 변화를 주었습니다.
- AngularJS는 CDN을 통해 제공되는 javascript Library를 html 문서에 포함시켜 개발하는 방식입니다.
- Angular는 node.js 개발 환경을 통해 프로젝트를 생성하고 개발하고 서비스하는 방식입니다.
- AngularJS는 다양한 서버 환경 및 다양한 개발 환경에 대응이 가능합니다.
- Angular는 node.js 기반 웹 서비스 환경에서 서비스를 제공할 수 있습니다.
AngularJS 기초 개념
- Template: 추가 마크업이 포함된 HTML
- Directives: Custom Attributes와 Elements로 확장된 HTML. 웹 개발 할 때, HTML을 많이 사용하는데 Angular는 이러한 태그를 직접 정의해서 사용할 수 있습니다.
- Model: view에서 사용자에게 표시되고 사용자와 상호작용하는 데이터
- Scope: Controller, Directive 및 Expression이 모델에 액세스 할 수 있도록 모델이 저장되는 컨텍스트. 양방향 데이터 바인딩의 핵심이자 View, Controller를 연결하는 개념
- Expressions: Scope로 부터 변수 및 함수에 액세스
- Complier: template을 구문 분석하고 Directive 및 Expression을 인스턴스화
- Filter: 사용자에게 표시할 표현식 값의 형식을 지정
- View: 사용자가 보는 것
- Data Binding: model과 view 간의 데이터 동기화
- Controller: view 뒤에 숨은 business logic
- Dependency Injection: 객체의 기능을 생성하고 연결
- Injector: 종속성 주입 컨테이너
- Module: Controller, Service, Filter, Injector를 구성하는 지시문을 포함하여 앱의 다양한 부분에 대한 컨테이너
- Service: 뷰와 무관하고 컨트롤러랑 다르게 재사용 가능한 비즈니스 로직
오늘은 구글에서 개발한 프론트엔드 웹 프레임워크인 AngularJS에 대해 알아보았습니다. 이제 개발환경을 구성하고 AngularJS를 이용하여 간단한 웹을 구현하는 과정에 대해 포스팅하도록 하겠습니다.