맨위로가기

AngularJS

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

AngularJS는 2009년 Miško Hevery가 기업용 애플리케이션 개발을 위해 개발한 JavaScript 기반 웹 애플리케이션 프레임워크이다. 양방향 데이터 바인딩, MVC 아키텍처, 디렉티브, 스코프 등의 특징을 제공한다. 2018년 1.7 버전을 마지막으로 장기 지원이 종료되었으며, 후속 버전인 Angular로 전환되었다. AngularJS Material과 Batarang과 같은 확장 기능을 제공했으나, 성능 문제와 SEO 문제 등의 한계도 지적되었다.

더 읽어볼만한 페이지

  • 리치 인터넷 애플리케이션 프레임워크 - 자바FX
    JavaFX는 자바 기반의 UI 구축 플랫폼으로, 다양한 플랫폼을 지원하며 풍부한 UI 기능들을 제공하고, Java 8부터 JDK에 포함되었다가 JDK 11부터 분리되어 관리된다.
  • 리치 인터넷 애플리케이션 프레임워크 - 마이크로소프트 실버라이트
    마이크로소프트 실버라이트는 2007년에 출시되어 어도비 플래시에 대항하고자 개발된 마이크로소프트의 RIA 기술이며, 닷넷 프레임워크 기반으로 XAML을 사용해 사용자 인터페이스를 정의했으나 2021년에 지원이 종료되었다.
  • Ajax - 구글 문서도구
    구글 문서도구는 구글에서 제공하는 웹 기반 워드 프로세서로, 문서 작성, 편집, 공유 기능을 제공하며, 다양한 문서 형식 지원, 실시간 공동 작업, 머신러닝 기반 기능을 제공하고, 구글 드라이브를 통해 문서 및 파일을 함께 이용할 수 있다.
  • Ajax - 리액트 (자바스크립트 라이브러리)
    리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이며, 선언적 UI, 컴포넌트 기반 개발, 가상 DOM 등의 특징을 가지고 있으며 JSX 문법을 사용하여 UI를 정의하고, 리액트 네이티브를 통해 네이티브 앱 개발에도 활용된다.
  • 자바스크립트 라이브러리 - 구글 웹 툴킷
    구글 웹 툴킷(GWT)은 자바 코드를 자바스크립트로 변환하여 웹 애플리케이션 개발을 지원하는 도구로, 개발자가 자바 언어로 Ajax 애플리케이션을 개발하고 GWT 컴파일러를 통해 최적화된 자바스크립트 파일로 변환할 수 있게 한다.
  • 자바스크립트 라이브러리 - Node.js
    Node.js는 라이언 달이 2009년에 개발한 자바스크립트 런타임 환경으로, 구글 크롬 V8 엔진을 기반으로 구축되었으며 이벤트 기반의 논블로킹 I/O 모델을 사용하여 확장성 있는 네트워크 애플리케이션 개발에 용이하고 웹 서버 및 네트워킹 도구 제작을 위한 다양한 코어 모듈과 npm을 통한 오픈 소스 라이브러리 활용을 제공한다.
AngularJS - [IT 관련 정보]에 관한 문서
기본 정보
AngularJS 로고
AngularJS 로고
저자미슈코 헤베리
개발자구글
최초 릴리스2010년 10월 20일
최신 버전1.8.3
최신 버전 출시일2022년 4월 8일
저장소AngularJS 저장소
프로그래밍 언어자바스크립트
플랫폼자바스크립트 엔진
크기167 kB (운영용), 1.2 MB (개발용)
종류웹 프레임워크
라이선스MIT 라이선스

2. 역사

AngularJS는 2009년 미슈코 헤베리(Miško Hevery)가 처음 개발했으며,[14][15] 이후 구글의 지원을 받으며 오픈 소스 프로젝트로 발전했다. 1.6 릴리스에서는 Angular의 컴포넌트 기반 아키텍처 개념이 도입되었고,[16] 샌드박스가 제거되었다.[17] 2023년 11월 현재 최신 안정 릴리스는 1.8.3이다.[18] 2018년 1월에는 단계적 폐지 일정이 발표되었으며, 1.7 버전은 2021년 12월 31일까지 장기 지원되었다.[3][4]

2. 1. 개발 배경

AngularJS는 기업용 웹 애플리케이션 개발의 효율성을 높이기 위해 설계되었다.

AngularJS는 2009년 Brat Tech LLC[15]의 미슈코 헤베리(Miško Hevery)[14]가 기업용으로 쉽게 만들 수 있는 애플리케이션을 위해 메가바이트 단위로 가격이 책정되는 온라인 JSON 저장 서비스 소프트웨어로 개발되었다. 이 사업은 "GetAngular.com"[15] 웹 도메인에 위치해 있었고, 두 사람이 사업 아이디어를 포기하고 Angular를 오픈 소스 라이브러리로 공개하기로 결정하기 전까지 몇몇 구독자를 보유했다.

이후 웹 애플리케이션 개발 프레임워크로 발전하였으며, 선언적 프로그래밍을 사용하여 사용자 인터페이스를 만들고 소프트웨어 구성 요소를 연결하며, 명령형 프로그래밍은 응용 프로그램의 비즈니스 로직을 정의하는 데 더 적합하다는 믿음을 바탕으로 구축되었다.[6] 이 프레임워크는 모델과 뷰의 자동 동기화를 가능하게 하는 양방향 데이터 바인딩을 통해 동적 콘텐츠를 제공했다. 그 결과 AngularJS는 테스트 가능성과 성능 향상을 목표로 명시적인 문서 객체 모델 (DOM) 조작을 덜 강조했다.

AngularJS의 설계 목표는 다음과 같다.

  • DOM 조작을 응용 프로그램 로직으로부터 분리한다.
  • 응용 프로그램의 클라이언트 측을 서버 측으로부터 분리하여 개발 작업을 병렬로 진행하고 양쪽 모두를 재사용할 수 있도록 한다.
  • UI 디자인부터 비즈니스 로직 작성, 테스트에 이르기까지 응용 프로그램 구축 과정에 대한 구조를 제공한다.


AngularJS는 프레젠테이션, 데이터 및 로직 구성 요소를 분리하기 위해 MVC 패턴을 구현했다.[7] 의존성 주입을 사용하여 뷰 종속 컨트롤러와 같은 전통적인 서버 측 서비스를 클라이언트 측 웹 응용 프로그램으로 가져왔다. 결과적으로 서버의 부담을 크게 줄일 수 있었다.

2. 2. 발전 과정

AngularJS는 사용자 정의 HTML 속성을 포함하는 하이퍼텍스트 마크업 언어 페이지를 읽는 방식으로 작동한다. Angular는 이러한 속성을 지시어로 해석하여, 페이지의 입/출력 부분을 JavaScript 변수로 표현되는 모델에 바인딩한다. 이러한 변수 값은 코드 내에서 수동으로 설정하거나 JSON 리소스로부터 가져올 수 있다.[6]

AngularJS는 사용자 인터페이스 구성에는 선언적 프로그래밍을, 비즈니스 로직 정의에는 명령형 프로그래밍을 사용하는 것이 적합하다는 신념을 바탕으로 구축되었다.[6] 양방향 데이터 바인딩을 통해 동적 콘텐츠를 제공하며, 문서 객체 모델 (DOM) 조작을 최소화하여 테스트 용이성과 성능 향상을 추구한다.[6]

AngularJS의 설계 목표는 다음과 같다.[6]

  • DOM 조작과 애플리케이션 로직 분리
  • 클라이언트 측과 서버 측 분리
  • 애플리케이션 구축 과정에 구조 제공


AngularJS는 MVC 패턴을 구현하고, 의존성 주입을 통해 서버 측 서비스를 클라이언트 측으로 가져와 서버 부담을 줄였다.[7]

AngularJS는 2009년 Brat Tech LLC의 Miško Hevery가 개발했다.[14][15] 초기에는 "GetAngular.com"이라는 온라인 JSON 저장 서비스로 시작했으나, 이후 오픈 소스 라이브러리로 공개되었다.[15]

1. 6 릴리스에서는 Angular의 많은 개념이 추가되었는데, 여기에는 컴포넌트 기반 애플리케이션 아키텍처의 개념이 포함되었다.[16] 또한, 샌드박스가 제거되었는데, 이는 보안 취약점 문제에도 불구하고 개발자들이 추가적인 보안을 제공한다고 믿었기 때문이다.[17] 2023년 11월 현재 AngularJS의 최신 안정 릴리스는 1.8.3이다.[18]

2018년 1월, AngularJS의 단계적 폐지 일정이 발표되었다. 1.7.0 릴리스 이후 2018년 6월 30일까지 활발한 개발이 진행되었고, 이후 1.7 버전은 장기 지원 (LTS) 버전으로 2021년 12월 31일까지 지원되었다.[3][4]

2. 3. Angular로의 전환

AngularJS의 후속 버전은 Angular이다.[21] Angular는 AngularJS를 TypeScript 기반으로 호환되지 않게 다시 작성한 것이다. 2016년 12월 13일에 Angular 4가 발표되었으며, 라우터 패키지의 버전이 이미 v3.3.0으로 배포되어 혼동을 피하기 위해 3을 건너뛰었다.[22]

Dart에서 작동하는 AngularDart는 객체 지향, 클래스 정의, 단일 상속 프로그래밍 언어로서 C 스타일의 구문을 사용한다. 이는 JavaScript를 사용하는 AngularJS 및 TypeScript를 사용하는 Angular 2/Angular 4와는 다르다. 2017년 3월에 Angular 4가 출시되었으며, 프레임워크의 버전은 사용된 라우터의 버전 번호와 일치했다. 2017년 11월 1일에는 Angular 5가 출시되었다.[23] Angular 5의 주요 개선 사항으로는 프로그레시브 웹 앱 지원, 빌드 최적화 및 Material Design 관련 개선 사항이 있다.[24] Angular 6은 2018년 5월 3일에 출시되었고,[25] Angular 7은 2018년 10월 18일에 출시되었으며, Angular 8은 2019년 5월 28일에 출시되었다.

Angular는 시맨틱 버전 관리 표준을 따르며, 각 주요 버전 번호는 잠재적인 변경 사항을 나타낸다. Angular는 각 주요 버전에 대해 6개월의 활성 지원과 12개월의 장기 지원을 제공할 것을 약속했다. 주요 릴리스는 반년마다 이루어지며, 각 주요 릴리스마다 1~3개의 마이너 릴리스가 있다.[26]

3. 주요 특징

AngularJS는 선언형 프로그래밍으로 사용자 인터페이스를 구성하고 소프트웨어 구성 요소를 연결하며, 명령형 프로그래밍으로 애플리케이션의 비즈니스 로직을 정의하는 것이 더 적합하다는 철학을 바탕으로 만들어졌다.[6] 이 프레임워크는 모델과 뷰의 자동 동기화를 가능하게 하는 양방향 데이터 바인딩을 통해 동적 콘텐츠를 제공하기 위해 전통적인 HTML을 확장했다. 그 결과, AngularJS는 테스트 용이성과 성능 향상을 위해 명시적인 문서 객체 모델(DOM) 조작을 덜 강조했다.

AngularJS의 설계 목표는 다음과 같다.


  • DOM 조작과 애플리케이션 로직을 분리한다.
  • 클라이언트 측과 서버 측을 분리하여 개발 작업을 병렬로 진행하고 재사용성을 높인다.
  • UI 디자인, 비즈니스 로직 작성, 테스트를 포함한 애플리케이션 구축 과정 전반에 구조를 제공한다.


AngularJS는 표현, 데이터, 로직 구성 요소를 분리하기 위해 MVC 패턴을 구현했다.[7] 의존성 주입을 사용하여 전통적인 서버 측 서비스를 클라이언트 측 웹 애플리케이션으로 가져왔다.

3. 1. MVC 아키텍처

AngularJS는 모델-뷰-컨트롤러(MVC) 패턴을 구현하여 표현, 데이터, 로직 구성 요소를 분리한다.[7] AngularJS는 의존성 주입을 활용하여 전통적으로 서버 측에 있던 서비스(예: 뷰 종속 컨트롤러)를 클라이언트 측 웹 애플리케이션으로 가져온다. 그 결과, 서버의 부담을 크게 줄일 수 있다.

AngularJS는 선언형 프로그래밍으로 사용자 인터페이스를 구성하고, 소프트웨어 구성 요소를 연결하며, 명령형 프로그래밍으로 애플리케이션의 비즈니스 로직을 정의하는 방식이 더 적합하다는 철학을 바탕으로 설계되었다.[6] 이 프레임워크는 모델과 뷰의 자동 동기화를 지원하는 양방향 데이터 바인딩을 통해 동적 콘텐츠를 제공하기 위해 HTML을 확장한다. 결과적으로 AngularJS는 테스트 용이성과 성능 향상을 위해 명시적인 문서 객체 모델(DOM) 조작을 덜 강조한다.

AngularJS의 주요 설계 목표는 다음과 같다.

  • 애플리케이션 로직과 DOM 조작을 분리한다.
  • 클라이언트 측과 서버 측을 분리하여 개발 작업을 병렬로 진행하고 재사용성을 높인다.
  • UI 디자인, 비즈니스 로직 작성, 테스트를 포함한 애플리케이션 구축 과정 전반에 구조를 제공한다.


AngularJS의 양방향 데이터 바인딩은 템플릿 처리 부담을 서버에서 클라이언트로 이전시키는 주목할 만한 기능이다. 템플릿은 모델에 정의된 범위(scope) 내 데이터에 따라 일반 HTML로 렌더링된다. `$scope` 서비스는 모델의 변경 사항을 감지하고 컨트롤러를 통해 뷰의 HTML 표현식을 수정한다. 마찬가지로 뷰의 모든 변경 사항은 모델에 반영된다. 이는 DOM을 직접 조작할 필요성을 줄여 웹 애플리케이션의 부트스트랩과 빠른 프로토타입 제작을 지원한다.[12]

AngularJS는 모델 값 변경 시 리스너를 트리거하는 Ember.js 및 Backbone.js와 달리, 현재 값을 이전에 저장된 값과 비교하는 더티 체킹(dirty checking) 방식으로 모델 변경 사항을 감지한다.[13]

3. 2. 양방향 데이터 바인딩

AngularJS의 가장 주목할 만한 기능은 양방향 데이터 바인딩이다. 이는 서버 측 백엔드의 템플릿 처리 부담을 크게 줄여준다. 대신, 템플릿은 모델에 정의된 `scope`에 포함된 데이터에 따라 일반 HTML로 렌더링된다. Angular의 `scope영어` 서비스는 모델 섹션의 변경 사항을 감지하고 컨트롤러를 통해 뷰에서 HTML 표현식을 수정한다. 마찬가지로, 뷰에 대한 모든 변경 사항은 모델에 반영된다. 이는 DOM을 적극적으로 조작할 필요성을 없애고 웹 애플리케이션의 부트스트랩 및 빠른 프로토타입 제작을 장려한다.[12]

AngularJS는 모델 값이 변경될 때 리스너를 트리거하는 Ember.js 및 Backbone.js와 달리, 현재 값을 이전에 저장된 값과 비교하는 더티 체킹 프로세스를 통해 모델의 변경 사항을 감지한다.[13]

;`watch영어`

: 더티 체킹에 사용되는 Angular 메서드이다. `scope영어`에 할당된 모든 변수 또는 표현식은 Angular에서 `watchExpression영어`을 자동으로 설정한다. 따라서 `scope영어`에 변수를 할당하거나 `ng-if영어`, `ng-show영어`, `ng-repeat영어`과 같은 지시자를 사용하면 모두 Angular scope에서 watch가 자동으로 생성된다. Angular는 `scope영어` 객체에 `watchers영어`의 간단한 배열을 유지 관리한다.

:AngularJS에서 watch를 정의하는 다양한 방법은 다음과 같다.

:* 명시적으로 `scope영어`에서 속성을 $watch한다.

:*: `scope.$watch('person.username', validateUnique);영어`

:*: 템플릿에 보간을 배치한다(현재 $scope에 대한 watch가 생성됨).

:*: `ng-model영어`과 같은 지시자에게 watch를 정의하도록 요청한다.

:*: `영어`

;`digest영어`

: Angularjs에서 빈번한 간격으로 내부적으로 호출되는 Angular 메서드이다. `digest영어` 메서드에서 Angular는 scope/자식 scope의 모든 `watches영어`를 반복한다.

;`apply영어`

: 내부적으로 `digest영어`를 호출하는 Angular 메서드이다. 이 메서드는 수동으로 더티 체킹을 시작하려는 경우(모든 `watches영어`를 실행) 사용된다.

;`destroy영어`

: Angularjs에서 메서드이자 이벤트이다. `destroy()영어` 메서드는 scope와 모든 자식을 더티 체킹에서 제거한다. `destroy영어` 이벤트는 $scope 또는 $controller가 파괴될 때마다 Angular에서 호출된다.

3. 3. 디렉티브(Directive)

AngularJS는 디렉티브를 통해 HTML을 확장하고 DOM 요소에 새로운 동작을 부여한다. 디렉티브는 개발자가 사용자 지정 및 재사용 가능한 HTML 유사 요소 및 속성을 지정할 수 있게 하며, 데이터 바인딩과 프레젠테이션 구성 요소의 동작을 정의한다.[48]

가장 흔히 사용되는 디렉티브는 다음과 같다:

  • `ng-app`: AngularJS 애플리케이션의 루트 요소를 선언하며, 디렉티브가 바인딩을 선언하고 동작을 정의하는 데 사용될 수 있다.
  • `ng-bind`: DOM 요소의 텍스트를 표현식의 값으로 설정한다. 예를 들어 <span ng-bind="name"></span>영어는 span 요소 내에 'name'의 값을 표시한다. 애플리케이션의 스코프에서 변수 'name'에 대한 변경 사항은 DOM에 즉시 반영된다.
  • `ng-model`: `ng-bind`와 유사하지만 뷰와 스코프 간의 양방향 데이터 바인딩을 설정한다.
  • `ng-model-options`: 모델 업데이트가 수행되는 방식에 대한 조정을 제공한다.
  • `ng-class`: 부울 표현식의 값에 따라 클래스를 조건부로 적용한다.
  • `ng-controller`: HTML 표현식을 평가하는 JavaScript 컨트롤러 클래스를 지정한다.
  • `ng-repeat`: 컬렉션의 항목당 한 번씩 요소를 인스턴스화한다.
  • `ng-show` & `ng-hide`: 부울 표현식의 값에 따라 요소를 조건부로 표시하거나 숨긴다. 표시 및 숨기기는 CSS display 스타일을 설정하여 수행된다.
  • `ng-switch`: 선택 표현식의 값에 따라 일련의 선택 항목에서 하나의 템플릿을 조건부로 인스턴스화한다.
  • `ng-view`: 지정된 컨트롤러에 의해 구동되는 템플릿을 렌더링하기 전에 JSON을 해결하는 경로[11]를 처리하는 기본 디렉티브이다.
  • `ng-if`: 조건이 참이면 다음 요소를 인스턴스화하는 기본 if 문 디렉티브이다. 조건이 거짓이면 요소가 DOM에서 제거된다. 참이면 컴파일된 요소의 복제본이 다시 삽입된다.
  • `ng-aria`: 일반적인 ARIA 속성의 접근성 지원을 위한 모듈이다.
  • `ng-animate`: 기존 코어 및 사용자 지정 디렉티브 내에서 JavaScript, CSS3 전환 및 CSS3 키프레임 애니메이션 훅을 지원하는 모듈이다.
  • `ng-init`: 요소가 초기화될 때 한 번 호출된다.


`ng-*` 속성은 HTML 사양에 유효하지 않기 때문에 `data-ng-*`를 접두사로 사용할 수도 있다. 예를 들어 `ng-app`과 `data-ng-app`는 모두 AngularJS에서 유효하다.[48]

3. 4. 스코프(Scope)

AngularJS에서 `scope`는 객체이며[42], 뷰(View)와 컨트롤러(Controller)를 서로 묶는 접착제 역할을 한다. 스코프는 "모델(Model)"을 형성하며, 스코프 내에 정의된 모든 변수는 "뷰"와 "컨트롤러" 모두에서 접근할 수 있다.[40]

AngularJS는 이 용어를 컴퓨터 과학의 기본 원리와 유사한 방식으로 사용한다. 컴퓨터 과학에서 스코프는 특정 바인딩이 프로그램 내에서 유효한 범위를 설명한다. ECMA-262 사양은 스코프를 클라이언트 측 웹 스크립트에서 Function 객체가 실행되는 어휘 환경으로 정의하며[40], 이는 람다 대수에서 스코프가 정의되는 방식과 유사하다.[41]

AngularJS에서 `scope` 객체는 JavaScript의 다른 객체와 마찬가지로 일반적인 변수 스코프 규칙에 따라 프로그램 내의 임의의 부분에서 스코프 내에 있거나 스코프 밖에 있을 수 있다.[43] 여기서 `scope`라고 할 때, 그것은 AngularJS의 `scope` 객체를 가리키며 이름 바인딩의 스코프를 의미하는 것은 아니다.

4. AngularJS 부트스트랩

AngularJS 애플리케이션은 HTML 페이지가 로드된 후 초기화(부트스트랩)된다.[48][10] AngularJS는 추가적인 사용자 정의 HTML 속성이 포함된 하이퍼텍스트 마크업 언어 (HTML) 페이지를 읽고, 해당 속성을 페이지의 입력 또는 출력 부분을 표준 JavaScript 변수로 표현되는 모델에 바인딩하는 지시어로 해석하는 방식으로 작동했다. 이러한 JavaScript 변수의 값은 코드 내에서 수동으로 설정하거나 정적 또는 동적 JSON 리소스로부터 검색할 수 있었다.

4. 1. 부트스트랩 단계

AngularJS 부트스트래퍼가 DOM을 로드한 이후 수행하는 작업은 세 단계로 이루어진다[48][10]:

1. 새로운 인젝터(Injector)를 만든다.

2. DOM을 형식화하는 디렉티브(directive)를 컴파일한다.

3. 모든 디렉티브들을 스코프(scope)로 링크한다.

AngularJS의 디렉티브는 개발자가 데이터 바인딩과 프레젠테이션 구성 요소의 동작을 정의하는, 사용자 지정 및 재사용 가능한 HTML 유사 요소 및 속성을 지정할 수 있게 한다. 가장 흔히 사용되는 디렉티브는 다음과 같다.

;`ng-app`

;`ng-bind`

;`ng-model`

;`ng-model-options`

;`ng-class`

;`ng-controller`

;`ng-repeat`

;`ng-show` & `ng-hide`

;`ng-switch`

;`ng-view`

;`ng-if`

;`ng-aria`

;`ng-animate`

'''`ng-*`''' 속성은 HTML 사양에 유효하지 않기 때문에 '''`data-ng-*`'''를 접두사로 사용할 수도 있다. 예를 들어 '''`ng-app`'''와 '''`data-ng-app`'''는 AngularJS에서 유효하다.

5. 성능

AngularJS는 '다이제스트 사이클'을 통해 데이터 변경 사항을 감지하고 사용자 인터페이스(UI)를 업데이트한다. 이 방식은 AngularJS가 매 사이클마다 `$scope` 내의 너무 많은 변수를 검사할 경우 렌더링 속도가 느려질 수 있는 잠재적 원인이 될 수 있다. 미슈코 헤브리(Miško Hevery)는 페이지당 2000개 미만의 감시 대상을 유지할 것을 제안했다.[13]

5. 1. 다이제스트 사이클

AngularJS는 '다이제스트 사이클'이라는 개념을 사용한다. 이 사이클은 AngularJS가 `$scope`를 통해 감시되는 모든 변수의 변경 사항을 확인하는 루프라고 할 수 있다. 예를 들어, `$scope.myVar` 변수가 컨트롤러에 정의되어 있고 감시 대상으로 지정되면, AngularJS는 각 루프마다 `myVar`의 변경 사항을 검사한다(더티 체크).[13]

이러한 방식은 AngularJS가 매 사이클마다 `$scope` 내의 너무 많은 변수를 검사할 경우 렌더링 속도가 느려지는 잠재적 원인이 될 수 있다. 미슈코 헤브리(Miško Hevery)는 페이지당 2000개 미만의 감시 대상을 유지할 것을 제안했다.[13]

6. 확장 기능

AngularJS는 다양한 확장 기능을 통해 기능을 더욱 확장할 수 있다. 대표적인 확장 기능은 다음과 같다.


  • AngularJS Material: AngularJS에서 Material Design을 구현하는 UI 컴포넌트 라이브러리였다.[28][29] 재사용 가능하고, 잘 테스트되었으며, 접근성이 뛰어난 UI 컴포넌트들을 제공했지만, 2022년 1월에 지원이 종료되었다.[30][31]
  • Batarang: AngularJS로 구축된 웹 애플리케이션의 디버깅을 개선하기 위해 2012년 7월에 구글 크롬 브라우저용 확장 프로그램으로 개발되었다.[32] 성능 병목 현상을 쉽게 감지하고 애플리케이션 디버깅을 위한 GUI를 제공했지만,[33] 2017년 4월 4일에 마지막으로 업데이트되었으며, 2022년 6월 1일에 Chrome 웹 스토어에서 제거되었다.

6. 1. AngularJS Material

AngularJS Material[28][29]은 AngularJS에서 Material Design을 구현하는 UI 컴포넌트 라이브러리였다.[30] 이 라이브러리는 재사용 가능하고, 잘 테스트되었으며, 접근성이 뛰어난 UI 컴포넌트들을 제공했다. 2022년 1월, 공식 웹사이트를 통해 발표된 바와 같이 이 라이브러리는 지원이 종료되었다.[31] AngularJS Material 라이브러리는 프로덕션 환경에서 사용할 준비가 되었으며 AngularJS 1.x에서만 작동하는 안정적인 제품이었다. Angular Material 라이브러리는 [https://github.com/angular/material2 GitHub 저장소]에서 사용할 수 있다.

6. 2. Batarang

Batarang은 구글 크롬 브라우저용 확장 프로그램으로, 2012년 7월에 Angular 팀이 AngularJS로 구축된 웹 애플리케이션의 디버깅을 개선하기 위해 개발했다.[32] 이 확장 프로그램은 성능 병목 현상을 쉽게 감지하고 애플리케이션 디버깅을 위한 GUI를 제공하는 것을 목표로 했다.[33] 그러나 2014년 말과 2015년 초 동안, 이 확장 프로그램은 최신 버전(v1.2.x 이후)의 Angular와 호환되지 않았다.[34] 2017년 4월 4일에 마지막으로 업데이트되었으며, 업데이트 부족과 민감한 권한 요구와 같은 잠재적 보안 문제로 인해 2022년 6월 1일에 Chrome 웹 스토어에서 제거되었다.

7. 비판 및 한계

AngularJS는 복잡한 구조와 가파른 학습 곡선으로 인해 일부 개발자들 사이에서 비판을 받기도 한다.

7. 1. 성능 문제

초기 AngularJS는 '다이제스트 사이클'이라는 방식으로 작동했는데, 이는 $scope 내 변수 변화를 감시하는 루프를 반복하는 것이었다. 컨트롤러에 정의된 $scope.myVar 변수가 감시 대상으로 지정되면, AngularJS는 매 루프마다 이 변수의 변경 사항을 확인했다(더티 체크).[13]

이러한 접근 방식은 AngularJS가 매 사이클마다 $scope 내 너무 많은 변수를 확인할 경우 렌더링 속도가 느려질 수 있다는 잠재적인 문제가 있었다. 미슈코 헤브리(Miško Hevery)는 페이지당 2000개 미만의 감시자를 유지할 것을 제안했다.[13]

7. 2. SEO 문제

AngularJS는 선언적 프로그래밍으로 사용자 인터페이스를 만들고 소프트웨어 구성 요소를 연결하며, 명령형 프로그래밍은 응용 프로그램의 비즈니스 로직을 정의하는 데 더 적합하다는 철학을 기반으로 한다.[6] 이 프레임워크는 모델과 뷰의 자동 동기화를 지원하는 양방향 데이터 바인딩을 통해 동적 콘텐츠를 제공하여, 문서 객체 모델 (DOM) 조작을 최소화하고 테스트 용이성과 성능 향상을 목표로 한다.

참조

[1] 웹사이트 Releases · angular/angular.js https://github.com/a[...] 2021-04-09
[2] 웹사이트 AngularJS https://docs.angular[...] 2021-05-14
[3] 웹사이트 AngularJS https://docs.angular[...] 2021-04-09
[4] 웹사이트 Stable AngularJS and Long Term Support https://blog.angular[...] 2021-04-09
[5] 웹사이트 Finding a Path Forward with AngularJs https://blog.angular[...] 2021-04-09
[6] 웹사이트 What Is Angular? https://docs.angular[...] 2013-02-12
[7] 웹사이트 AngularJS https://docs.angular[...] 2021-04-09
[8] 웹사이트 Annotated ECMAScript 5.1, Section 10.2 Lexical Environments https://es5.github.i[...] 2015-01-03
[9] 간행물 Introduction to Lambda Calculus ftp://ftp.cs.ru.nl/p[...] 2000-03-01
[10] 웹사이트 Writing Directives https://www.youtube.[...] angularjs.org 2013-07-21
[11] 웹사이트 AngularJS https://docs.angular[...] 2021-04-09
[12] 웹사이트 5 Awesome AngularJS Features http://net.tutsplus.[...] 2013-02-13
[13] 웹사이트 Databinding in angularjs https://stackoverflo[...] 2014-03-09
[14] 웹사이트 Hello World, is here http://misko.hevery.[...] 2014-10-12
[15] 웹사이트 GetAngular http://getangular.co[...] Angular / BRAT Tech. LLC 2014-10-12
[16] 웹사이트 AngularJS: Developer Guide for v1.5.8: Components https://code.angular[...] 2017-09-26
[17] 웹사이트 angular.js https://github.com/a[...] 2017-09-26
[18] 웹사이트 Release v1.8.3 · angular/angular.js https://github.com/a[...] 2023-11-29
[19] 웹사이트 Internet Explorer Compatibility https://docs.angular[...] 2019-02-12
[20] 웹사이트 AngularJS 1.3: a new release approaches http://angularjs.blo[...] 2014-10-12
[21] 웹사이트 Introduction to Angular. https://aristeksyste[...] 2021-12-08
[22] 웹사이트 Ok... let me explain: it's going to be Angular 4.0 http://angularjs.blo[...] 2016-12-14
[23] 웹사이트 Version 5.0.0 of Angular Now Available https://blog.angular[...] 2021-04-09
[24] 웹사이트 AngularJS 5 JavaScript framework delayed https://www.infoworl[...] 2021-04-09
[25] 웹사이트 Version 6 of Angular Now Available – Angular Blog https://blog.angular[...] 2018-06-08
[26] 웹사이트 Angular versioning and releases https://angular.io/g[...] 2018-06-08
[27] 웹사이트 Angular Universal & Server-side rendering Deep-Dive https://medium.com/@[...] 2021-04-09
[28] 웹사이트 angular/material (GitHub) https://github.com/a[...] 2020-12-24
[29] 웹사이트 AngularJS Material Documentation https://material.ang[...] 2020-12-24
[30] 서적 Material Design Implementation with AngularJS: UI Component Framework https://books.google[...] Apress 2016-08-25
[31] 웹사이트 AngularJS Material https://material.ang[...] 2022-05-04
[32] 웹사이트 angular/angularjs-batarang (GitHub) https://github.com/a[...] 2014-10-12
[33] 웹사이트 Introducing the AngularJS Batarang http://angularjs.blo[...] 2014-10-12
[34] 웹사이트 batarang Chrome extension for AngularJS appears broken https://stackoverflo[...]
[35] 웹사이트 Tags · angular/angular.js · GitHub https://github.com/a[...] 2023-07-17
[36] 웹사이트 AngularJS: Miscellaneous: Version Support Status https://docs.angular[...] 2023-07-17
[37] 웹사이트 GoogleがAngular 2を正式リリース！未来のウェブ標準を意識した新しいフレームワーク https://ics.media/en[...] ICS MEDIA 2016-09-16
[38] 뉴스 Better Web Templating with AngularJS 1.0 - Google Developers Blog http://googledevelop[...]
[39] 웹사이트 What Is Angular? https://docs.angular[...] 2013-02-12
[40] 웹사이트 Annotated ECMAScript 5.1, Section 10.2 Lexical Environments https://es5.github.i[...] 2015-01-03
[41] 간행물 Introduction to Lambda Calculus ftp://ftp.cs.ru.nl/p[...]
[42] 웹사이트 AngularJS: Developer Guide: Scopes https://docs.angular[...] 2015-01-03
[43] 웹사이트 ECMA-262-3 in detail. Chapter 4. Scope chain. http://dmitrysoshnik[...] 2015-01-03
[44] 웹사이트 5 Awesome AngularJS Features http://net.tutsplus.[...] 2013-02-13
[45] 웹사이트 Databinding in angularjs https://stackoverflo[...] 2014-03-09
[46] 문서 Earliest known releases https://github.com/a[...]
[47] 웹인용 13 Key Benefits of Angular & Use Cases https://www.simform.[...] 2021-04-22
[48] 웹인용 Writing Directives https://www.youtube.[...] angularjs.org 2013-07-21


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com