검수요청.png검수요청.png

"앵귤러제이에스"의 두 판 사이의 차이

위키원
이동: 둘러보기, 검색
잔글 (→‎같이 보기)
 
(사용자 5명의 중간 판 49개는 보이지 않습니다)
1번째 줄: 1번째 줄:
 +
[[파일:앵귤러제이에스 로고.png|썸네일|200픽셀|'''앵귤러제이에스'''(AngularJS)]]
 +
[[파일:앵귤러제이에스 글자.png|썸네일|300픽셀|'''앵귤러제이에스'''(AngularJS)]]
 +
 
'''앵귤러제이에스'''<!--앵귤러 제이에스-->(AngularJS)는 [[구글]](Google)이 관리하는 [[오픈소스]] 기반의 웹 어플리케이션 [[프레임워크]]이다. 간략히 '''앵귤러'''<!--앵귤라-->(Angular) 또는 '''앵귤러닷제이에스'''(Angular.js)라고도 한다.
 
'''앵귤러제이에스'''<!--앵귤러 제이에스-->(AngularJS)는 [[구글]](Google)이 관리하는 [[오픈소스]] 기반의 웹 어플리케이션 [[프레임워크]]이다. 간략히 '''앵귤러'''<!--앵귤라-->(Angular) 또는 '''앵귤러닷제이에스'''(Angular.js)라고도 한다.
  
 
== 개요 ==
 
== 개요 ==
−
앵귤러제이에스(AngularJS)는 [[자바스크립트]]로 제작되었으며 기본적으로 [[MVC]](Model-View-Controller) 모델 지원과 같은 다른 웹 애플리케이션 프레임워크에서도 지원하는 기능을 제공할 뿐만 Two-way data binding이나 directive 같은 새로운 개념의 기술도 지원하여 웹 개발자들이 해야 할 많은 일의 단축 및 좀 더 테스트가 용이한 웹 애플리케이션 제작에 도움을 주는 기능을 제공하고 있다.
+
앵귤러제이에스(AngularJS)는 [[자바스크립트]]로 제작되었으며 기본적으로 [[MVC]](Model-View-Controller) 모델 지원과 같은 다른 [[웹]] [[애플리케이션]] 프레임워크]]에서도 지원하는 기능을 제공할 뿐만 [[Two-way data binding]]이나 [[directive]] 같은 새로운 개념의 기술도 지원하여 웹 개발자들이 해야 할 많은 일의 단축 및 좀 더 테스트가 용이한 웹 애플리케이션 제작에 도움을 주는 기능을 제공하고 있다.<ref>개발은 전투다, 〈[http://a.to/19Faw7p 앵귤러JS (AngularJS)란?]〉,《티스토리》, 2018-08-29 </ref>
  
 
== 탄생 배경==
 
== 탄생 배경==
−
앵귤러제이에스(AngularJS)는 2009년 구글(Google)의 직원인 MiskioHeavery의 개인 프로젝트에서 시작했다. 개인 차원에서 시작한 프로젝트였지만 초기 아이디어에 대한 반응이 좋아서 현재는 구글의 공식 지원 프로젝트가 됐다.
+
앵귤러제이에스(AngularJS)는 2009년 [[구글]](Google)의 직원인 MiskioHeavery의 개인 프로젝트에서 시작했다. 개인 차원에서 시작한 프로젝트였지만 초기 아이디어에 대한 반응이 좋아서 현재는 구글의 공식 지원 프로젝트가 됐다.<ref>ShabangBoy, 〈[http://a.to/19wiTtp Angular 탄생 배경 및 역사]〉,《incodom》, 2018-07-04</ref>
  
 
== 버전 ==
 
== 버전 ==
−
=== Angular 1 ===
+
* Angular 1 : 기존에 [[자바스크립트]]로 코딩했던 $scope를 사용한다.
−
*기존에 자바스크립트로 코딩했던 $scope를 사용한다.
+
* Angular 1. x : [[컴포넌트]](Component)가 도입됐다.
−
=== Angular 1. x ===
+
* Angular 2 : 처음으로 [[타입스크립트]](TypeScript)가 사용되고, 구성방식, 아키텍처 사용하는 툴 등의 변경으로 새로운 앵귤러(Angular.JS)가 됐다.
−
*컴포넌트(Component)가 도입됐다.
+
* Angular 3 : 라우터 패키지 버전을 잘못 정렬해 Angular 4로 바로 넘어갔다.
−
=== Angular 2 ===
+
* Angular 4 : 새로운 [[프레임워크]]가 아닌 오류와 성능개선에 목표를 둔 버전(앵귤러 2와 하위호환 가능, 타입스크립트 상위호환 가능 등)이다.<ref>에이콘아카데미, 〈[http://a.to/19oZSd7 (프론트엔드)업그레이드 된 앵귤러(Angular JS)4.2 제대로 알기 ]〉,《네이버블로그》, 2017-07-17</ref>
−
*처음으로 타입스크립트(TypeScript)가 사용되고, 구성방식, 아키텍처 사용하는 툴 등의 변경으로 새로운 앵귤러(Angular.JS)가 됐다.
+
* Angular 5 : 새로운 기능과 향상된 기능이 번들로 제공되었다.<ref>Susan May, 〈[https://www.zeolearn.com/magazine/whats-new-in-angular-5 What's New In Angular 5?]〉,《zeomag》, 2018-05-10 </ref>
−
=== Angular 3 ===
+
* Angular 6 : 툴 체인에 대한 자세한 내용과 Angular로 보다 쉽게 이동할 수 있도록 하는 데 초점을 맞춘다.<ref>Stephen Fluin, 〈[https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4 Version 6 of Angular Now Available]〉,《Angular 공식 블로그》, 2018-05-04</ref>
−
*라우터 패키지 버전을 잘못 정렬해 Angular 4로 바로 넘어갔다.
+
* Angular 7 : 툴 체인의 새로운 기능이 포함되어 있으며 몇 가지 주요 파트너 출시가 가능하다.<ref>Stephen Fluin, 〈[http://a.to/19h13CX Version 7 of Angular - CLI Prompts, Virtual Scroll, Drag and Drop and more]〉,《Angular 공식 블로그》, 2018-10-19</ref>
−
=== Angular 4 ===
+
* Angular 8 : 최신 브라우저에서 [[애플리케이션]]의 구동 시간을 단축시키고, [[CLI]]와 함께 사용할 수 있는 새로운 [[API]]를 제공한다.<ref>Stephen Fluin, 〈[http://a.to/19WXNaE Version 8 of Angular - Smaller bundles,CLI APIs,and alignment with the ecosystem]〉,《Angular 공식 블로그》, 2019-05-29</ref>
−
*새로운 프레임워크가 아닌 오류와 성능개선에 목표를 둔 버전(앵귤러 2와 하위호환 가능, 타입스크립트 상위호환 가능 등)이다.
 
  
 
== 기능 ==
 
== 기능 ==
 
=== 크로스 플랫폼 지원 ===
 
=== 크로스 플랫폼 지원 ===
−
*앱과 비슷한 사용자 경험을 제공한다.
+
*[[앱]]과 비슷한 사용자 경험을 제공한다.
−
*웹 기술로 네이티브 앱 만들기 가능하다.
+
*[[웹]] 기술로 [[네이티브]] 앱 만들기 가능하다.
−
*웹에서 사용하던 Angular 코드를 있는 그대로 사용하면서, 네이티브 OS에서 제공하는 API를 활용 가능하다.
+
*웹에서 사용하던 Angular 코드를 있는 그대로 사용하면서, 네이티브 [[OS]]에서 제공하는 [[API]]를 활용 가능하다.
 
=== 최적화된 성능 ===
 
=== 최적화된 성능 ===
−
*플랫폼에 최적화된 코드 생성이 가능하다.
+
*[[플랫폼]]에 최적화된 코드 생성이 가능하다.
 
*유니버설이 지원된다.
 
*유니버설이 지원된다.
 
*실행하는데 필요한 코드만 로드된다.
 
*실행하는데 필요한 코드만 로드된다.
 
=== 최고의 생산성 제공 ===  
 
=== 최고의 생산성 제공 ===  
 
*간결하고 효율적인 탬플릿 문법이다.
 
*간결하고 효율적인 탬플릿 문법이다.
−
*프로젝트 생성, 컴포넌트 추가, 테스트, 빌드, 배포까지 활용할 수 있는 커맨드 라인 툴 제공한다.
+
*프로젝트 생성, [[컴포넌트]] 추가, 테스트, 빌드, 배포까지 활용할 수 있는 커맨드 라인 툴 제공한다.
−
*최신 에디터와 IDE에서 코드 자동 완성, 에러 감지 등 개발에 도움이 되는 기능 제공한다.
+
*최신 에디터와 [[IDE]]에서 코드 자동 완성, 에러 감지 등 개발에 도움이 되는 기능 제공한다.
 
=== 그 외 기능 ===
 
=== 그 외 기능 ===
 
*Karma로 유닛 테스트를 실행하면 문제를 찾는 데 드는 시간 감소된다.
 
*Karma로 유닛 테스트를 실행하면 문제를 찾는 데 드는 시간 감소된다.
39번째 줄: 41번째 줄:
  
 
== 특징 ==
 
== 특징 ==
−
*작성해야 하는 자바스크립트 코드량을 줄여준다.
+
*작성해야 하는 [[자바스크립트]] 코드량을 줄여준다.
−
**MVC 구조를 제공하므로, MVC 구조를 위한 코드를 작성할 필요가 없다.
+
#[[MVC]] 구조를 제공하므로, MVC 구조를 위한 코드를 작성할 필요가 없다.
−
**DOM을 선택하고 조작하는 자바스크립트 코드를 작성하지 않아도 된다.
+
#[[DOM]]을 선택하고 조작하는 자바스크립트 코드를 작성하지 않아도 된다.
−
**모델은 단순 자바스크립트 객체이고, setter, getter 함수를 작성할 필요가 없다.
+
#모델은 단순 자바스크립트 객체이고, setter, getter 함수를 작성할 필요가 없다.
−
**화면과 모델 사이의 양방향 데이터 바인딩을 지원하여, 서로를 동기화하는 코드를 작성할 필요가 없다.
+
#화면과 모델 사이의 [[양방향 데이터 바인딩]]을 지원하여, 서로를 동기화하는 코드를 작성할 필요가 없다.
 
*AngularJS의 데이터 모델은 단순 자바스크립트 객체이다.
 
*AngularJS의 데이터 모델은 단순 자바스크립트 객체이다.
−
**대부분의 MVC 프레임워크는 기본 모델 클래스를 상속하여 모델 클래스를 만들지만, AngularJS는 그렇지 않다.
+
#대부분의 MVC [[프레임워크]]는 기본 모델 클래스를 상속하여 모델 클래스를 만들지만, AngularJS는 그렇지 않다.
−
**모델의 데이터와 뷰 데이터가 양방향 데이터 바인딩이 되어, 모델이 바뀌면 뷰 데이터도 같이 변경되고 반대 경우에도 마찬가지로 동작한다.
+
#모델의 데이터와 뷰 데이터가 양방향 데이터 바인딩이 되어, 모델이 바뀌면 뷰 데이터도 같이 변경되고 반대 경우에도 마찬가지로 동작한다.
−
*재사용하기 편한 정적인 UI 컴포넌트를 만들 수 있다.
+
*재사용하기 편한 정적인 UI [[컴포넌트]]를 만들 수 있다.
−
**기본 HTML에서 제공하지 않는 복잡도가 높은 UI 컴포넌트(지도, 그래프, 정렬 가능한 테이블 등)를 <map>, <graph>, <tablesortable="true">와 HTML 태그로 만들 수 있게 해준다.
+
#기본 [[HTML]]에서 제공하지 않는 복잡도가 높은 UI 컴포넌트(지도, 그래프, 정렬 가능한 테이블 등)를 <map>, <graph>, <tablesortable="true">와 HTML 태그로 만들 수 있게 해준다.
−
**위처럼 만들어진 UI 컴포넌트를 HTML 엘리먼트나 애트리뷰트를 이용해서 사용할 수 있게 해준다는 것이다.
+
#위처럼 만들어진 UI 컴포넌트를 HTML 엘리먼트나 [[애트리뷰트]]를 이용해서 사용할 수 있게 해준다는 것이다.
 
*의존관계 주입을 이용해 웹 애플리케이션을 개발할 수 있다.
 
*의존관계 주입을 이용해 웹 애플리케이션을 개발할 수 있다.
−
**단위 테스트가 가능하고, 분리된 형태로의 개발이 가능하다.
+
#단위 테스트가 가능하고, 분리된 형태로의 개발이 가능하다.
−
*HTML&CSS 개발자와 자바스크립트 개발자를 명확하게 분리해준다.
+
*HTML&[[CSS]] 개발자와 자바스크립트 개발자를 명확하게 분리해준다.
−
**기존엔 DOM 조작과 이벤트 처리를 위해 자바스크립트가 HTML을 잘 알고 있어야 했고, 자바스크립트 개발자와 HTML&CSS 개발자가 분리되기 어려웠다.
+
#기존엔 DOM 조작과 이벤트 처리를 위해 자바스크립트가 HTML을 잘 알고 있어야 했고, 자바스크립트 개발자와 HTML&CSS 개발자가 분리되기 어려웠다.
−
**AngularJS는 자바스크립트가 HTML 구조를 알고 있을 필요가 없고, 뷰 코드와 로직 코드가 명확히 분리된다.
+
#AngularJS는 자바스크립트가 HTML 구조를 알 필요가 없고, 뷰 코드와 로직 코드가 명확히 분리된다.
 +
*싱글 페이지 애플리케이션(SPA) 프레임 워크이다. (SPA : 서버에서 새로운 페이지로 이동, 현재 페이지에서 동적으로 다시 로드하는 응용 프로그램)
 +
*고성능 프레임워크이다.
 +
#Angular는 모바일 환경에서도 구동할 수 있는 것을 목표로 두는 프레임워크이기 때문에 적은 용량으로 더욱 빠르게 프레임워크를 로딩하기 위해 튜닝을 진행한다.
 +
#대표적인 방식으로 애플리케이션 실행시 모든 모듈을 로딩하는 것이 아닌 현재 페이지에 필요한 부분의 모듈만 로딩하는 지연로딩(Lazy Loading) 방식이 있다.
 +
*Aot compile(Ahead of time compilation) 사전 컴파일 방식이다.
 +
#HTML 템플릿과 CSS 파일을 컴파일하여 코드로 삽입하는 방식으로 Angular에서 지원하는 특정 지시자를 브라우저 레벨에서 실행하지 않고 미리 실행 가능한 Javascript 코드로 변환해놓는다.<ref>green, 〈[http://www.incodom.kr/Angular_%ED%8A%B9%EC%A7%95_%EB%B0%8F_%EC%B2%A0%ED%95%99 Angular 특징 및 철학]〉,《incodom》, 2018-03-29 </ref>
 +
 
 +
== 주요 개념 ==
 +
* '''지시어'''(directives) : 앵귤러의 기능을 적용하기 위한 특정 [[HTML]] 함수로 사용자 지정을 할 수 있다는 특징이 있다. 지시어는 ng로 시작하는 것들이 많다. (예: ng-controller, ng-app 등)
 +
* '''필터'''(filters) : 표현 식이 화면에 표기되는 포맷에 있어서 원하는 데이터만을 필터링하여 사용할 수 있게 해준다.
 +
* '''데이터 바인딩'''(data binding) : 모델과 뷰의 데이터를 양방향으로 지속적, 실시간 연동하여 업데이트한다. 데이터를 원하는 위치에 편리하게 사용할 수 있도록 바인딩해 준다.
 +
* '''컨트롤러'''(controller) : 모델 생성, 메소드를 통해 뷰로 퍼블리싱을 담당하는 등 [[자바스크립트]]로 된 제어 로직이다. 메인 컴포넌트로서 기능별로 묶어 사용할 수 있도록 해준다.
 +
* '''모듈'''(module) : 응용 프로그램의 서로 다른 기능을 구성하는 컨테이너로 지시어, 필터, 컨트롤러, 서비스 등을 포함한다. 모든 자바스크립트의 기능들은 모듈 단위로 관리된다.
 +
* '''서비스'''(service) : 특정 기능을 담당하는 객체와 공통된 특정 작업을 수행하는 singleton 객체들을 사용해 컨트롤러 간의 통신을 제어하거나 또는 이 객체들을 리턴해서 컨트롤러로 [[CRUD]]를 수행하여 사용된다.
  
 
== 문제점 ==
 
== 문제점 ==
−
#학습 분량 : Angular는 여러 가지 언어를 제공하지만, 주력 언어는 TypeScript이다. 그러므로 대부분의 Angular 앱은 TypeScript로 쓰여있으며, 이를 활용하기 위해서는 Angular가 지닌 여러가지 개념들을 알아야 하고, 그 개념들이 어떻게 TypeScript로 표현되는지도 알아야 한다.
+
* '''학습 분량''' : Angular는 여러 가지 언어를 제공하지만, 주력 언어는 [[타입스크립트]](TypeScript)이다. 그러므로 대부분의 Angular 앱은 타입스크립트(TypeScript)로 쓰여있으며, 이를 활용하기 위해서는 Angular가 지닌 여러가지 개념들을 알아야 하고, 그 개념들이 어떻게 TypeScript로 표현되는지도 알아야 한다.
−
#초기 로딩속도 : Angular로 만든 SPA의 초기 로딩속도는 다소 느린 편이다. 성능이 좋은 데스크탑이나 모바일에서는 큰 문제가 아니라고 생각할 수 있으나, 성능이 좋지 않은 모바일에서는 로딩 시간이 1초 이상 걸리기도 하므로 생각보다 큰 문제이다. 물론 초기화면이 로딩된 후 웹페이지 내에서의 이동은 매우 빠르다.
+
 
−
#검색엔진 인덱싱 : Angular로 만든 SPA를 제대로 인덱싱하지 못하는 크롤러가 생각보다 많아서, 모든 검색엔진에 검색되게 하기 위해서는 다른 방법을 사용해야 한다. SPA를 포기하고 서버 측에서 렌더링 할 수 있게 도와주는 Angular Universal을 사용하는 것도 방법의 하나다. 하지만 이러한 방법을 사용하게 되면, Angular를 사용해서 얻는 이점이 적어질 수밖에 없다.
+
* '''초기 로딩 속도''' : Angular로 만든 SPA의 초기 로딩속도는 다소 느린 편이다. 성능이 좋은 [[데스크탑]]이나 [[모바일]]에서는 큰 문제가 아니라고 생각할 수 있으나, 성능이 좋지 않은 모바일에서는 로딩 시간이 1초 이상 걸리기도 하므로 생각보다 큰 문제이다. 물론 초기화면이 로딩된 후 [[웹페이지]] 내에서의 이동은 매우 빠르다.
 +
 
 +
* '''검색엔진 인덱싱''' : Angular로 만든 [[SPA]]를 제대로 인덱싱하지 못하는 크롤러가 생각보다 많아서, 모든 검색엔진에 검색되게 하기 위해서는 다른 방법을 사용해야 한다. SPA를 포기하고 서버 측에서 렌더링 할 수 있게 도와주는 Angular Universal을 사용하는 것도 방법의 하나다. 하지만 이러한 방법을 사용하게 되면, Angular를 사용해서 얻는 이점이 적어질 수밖에 없다.<ref>green, 〈[http://www.incodom.kr/Angular_%EC%9E%A5%EB%8B%A8%EC%A0%90 Angular 장단점]〉,《incodom》, 2018-05-04</ref>
  
 
== 전망 ==
 
== 전망 ==
74번째 줄: 92번째 줄:
 
* green, 〈[http://www.incodom.kr/Angular_%EC%9E%A5%EB%8B%A8%EC%A0%90 Angular 장단점]〉,《incodom》, 2018-05-04
 
* green, 〈[http://www.incodom.kr/Angular_%EC%9E%A5%EB%8B%A8%EC%A0%90 Angular 장단점]〉,《incodom》, 2018-05-04
 
* siliconindia, 〈[http://a.to/19vc1YV Angular JS-The robust Java Script Platform with New Features and Updates]〉,《siliconindia News》, 2019-06-11
 
* siliconindia, 〈[http://a.to/19vc1YV Angular JS-The robust Java Script Platform with New Features and Updates]〉,《siliconindia News》, 2019-06-11
−
 
+
* SD아카데미 공식 홈페이지 - http://a.to/19MEbf7
 +
* green, 〈[http://www.incodom.kr/Angular_%ED%8A%B9%EC%A7%95_%EB%B0%8F_%EC%B2%A0%ED%95%99 Angular 특징 및 철학]〉,《incodom》, 2018-03-29
 +
* Susan May, 〈[https://www.zeolearn.com/magazine/whats-new-in-angular-5 What's New In Angular 5?]〉,《zeomag》, 2018-05.10
 +
* Stephen Fluin, 〈[https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4 Version 6 of Angular Now Available]〉,《Angular 공식 블로그》, 2018-05-04
 +
* Stephen Fluin, 〈[http://a.to/19h13CX Version 7 of Angular - CLI Prompts, Virtual Scroll, Drag and Drop and more]〉,《Angular 공식 블로그》, 2018-10-19
 +
* Stephen Fluin, 〈[http://a.to/19WXNaE Version 8 of Angular - Smaller bundles,CLI APIs,and alignment with the ecosystem]〉,《Angular 공식 블로그》, 2019-05-29
  
 
== 같이 보기 ==
 
== 같이 보기 ==
 
* [[구글]]
 
* [[구글]]
  
−
{{프로그래밍|토막글}}
+
{{솔루션|검토 필요}}

2020년 8월 28일 (금) 10:49 기준 최신판

앵귤러제이에스(AngularJS)
앵귤러제이에스(AngularJS)

앵귤러제이에스(AngularJS)는 구글(Google)이 관리하는 오픈소스 기반의 웹 어플리케이션 프레임워크이다. 간략히 앵귤러(Angular) 또는 앵귤러닷제이에스(Angular.js)라고도 한다.

개요[편집]

앵귤러제이에스(AngularJS)는 자바스크립트로 제작되었으며 기본적으로 MVC(Model-View-Controller) 모델 지원과 같은 다른 웹 애플리케이션 프레임워크]]에서도 지원하는 기능을 제공할 뿐만 Two-way data binding이나 directive 같은 새로운 개념의 기술도 지원하여 웹 개발자들이 해야 할 많은 일의 단축 및 좀 더 테스트가 용이한 웹 애플리케이션 제작에 도움을 주는 기능을 제공하고 있다.[1]

탄생 배경[편집]

앵귤러제이에스(AngularJS)는 2009년 구글(Google)의 직원인 MiskioHeavery의 개인 프로젝트에서 시작했다. 개인 차원에서 시작한 프로젝트였지만 초기 아이디어에 대한 반응이 좋아서 현재는 구글의 공식 지원 프로젝트가 됐다.[2]

버전[편집]

  • Angular 1  : 기존에 자바스크립트로 코딩했던 $scope를 사용한다.
  • Angular 1. x : 컴포넌트(Component)가 도입됐다.
  • Angular 2 : 처음으로 타입스크립트(TypeScript)가 사용되고, 구성방식, 아키텍처 사용하는 툴 등의 변경으로 새로운 앵귤러(Angular.JS)가 됐다.
  • Angular 3  : 라우터 패키지 버전을 잘못 정렬해 Angular 4로 바로 넘어갔다.
  • Angular 4  : 새로운 프레임워크가 아닌 오류와 성능개선에 목표를 둔 버전(앵귤러 2와 하위호환 가능, 타입스크립트 상위호환 가능 등)이다.[3]
  • Angular 5 : 새로운 기능과 향상된 기능이 번들로 제공되었다.[4]
  • Angular 6 : 툴 체인에 대한 자세한 내용과 Angular로 보다 쉽게 이동할 수 있도록 하는 데 초점을 맞춘다.[5]
  • Angular 7 : 툴 체인의 새로운 기능이 포함되어 있으며 몇 가지 주요 파트너 출시가 가능하다.[6]
  • Angular 8 : 최신 브라우저에서 애플리케이션의 구동 시간을 단축시키고, CLI와 함께 사용할 수 있는 새로운 API를 제공한다.[7]

기능[편집]

크로스 플랫폼 지원[편집]

  • 앱과 비슷한 사용자 경험을 제공한다.
  • 웹 기술로 네이티브 앱 만들기 가능하다.
  • 웹에서 사용하던 Angular 코드를 있는 그대로 사용하면서, 네이티브 OS에서 제공하는 API를 활용 가능하다.

최적화된 성능[편집]

  • 플랫폼에 최적화된 코드 생성이 가능하다.
  • 유니버설이 지원된다.
  • 실행하는데 필요한 코드만 로드된다.

최고의 생산성 제공[편집]

  • 간결하고 효율적인 탬플릿 문법이다.
  • 프로젝트 생성, 컴포넌트 추가, 테스트, 빌드, 배포까지 활용할 수 있는 커맨드 라인 툴 제공한다.
  • 최신 에디터와 IDE에서 코드 자동 완성, 에러 감지 등 개발에 도움이 되는 기능 제공한다.

그 외 기능[편집]

  • Karma로 유닛 테스트를 실행하면 문제를 찾는 데 드는 시간 감소된다.
  • Protractor로 시나리오 테스트 수행한다.
  • 복잡한 애니메이션도 Angular에서 제공하는 직관적 API를 활용하면 간단한 코드로 구현 가능하다.
  • 웹 접근성을 테스트할 수 있는 환경 제공한다.

특징[편집]

  1. MVC 구조를 제공하므로, MVC 구조를 위한 코드를 작성할 필요가 없다.
  2. DOM을 선택하고 조작하는 자바스크립트 코드를 작성하지 않아도 된다.
  3. 모델은 단순 자바스크립트 객체이고, setter, getter 함수를 작성할 필요가 없다.
  4. 화면과 모델 사이의 양방향 데이터 바인딩을 지원하여, 서로를 동기화하는 코드를 작성할 필요가 없다.
  • AngularJS의 데이터 모델은 단순 자바스크립트 객체이다.
  1. 대부분의 MVC 프레임워크는 기본 모델 클래스를 상속하여 모델 클래스를 만들지만, AngularJS는 그렇지 않다.
  2. 모델의 데이터와 뷰 데이터가 양방향 데이터 바인딩이 되어, 모델이 바뀌면 뷰 데이터도 같이 변경되고 반대 경우에도 마찬가지로 동작한다.
  • 재사용하기 편한 정적인 UI 컴포넌트를 만들 수 있다.
  1. 기본 HTML에서 제공하지 않는 복잡도가 높은 UI 컴포넌트(지도, 그래프, 정렬 가능한 테이블 등)를 <map>, <graph>, <tablesortable="true">와 HTML 태그로 만들 수 있게 해준다.
  2. 위처럼 만들어진 UI 컴포넌트를 HTML 엘리먼트나 애트리뷰트를 이용해서 사용할 수 있게 해준다는 것이다.
  • 의존관계 주입을 이용해 웹 애플리케이션을 개발할 수 있다.
  1. 단위 테스트가 가능하고, 분리된 형태로의 개발이 가능하다.
  • HTML&CSS 개발자와 자바스크립트 개발자를 명확하게 분리해준다.
  1. 기존엔 DOM 조작과 이벤트 처리를 위해 자바스크립트가 HTML을 잘 알고 있어야 했고, 자바스크립트 개발자와 HTML&CSS 개발자가 분리되기 어려웠다.
  2. AngularJS는 자바스크립트가 HTML 구조를 알 필요가 없고, 뷰 코드와 로직 코드가 명확히 분리된다.
  • 싱글 페이지 애플리케이션(SPA) 프레임 워크이다. (SPA : 서버에서 새로운 페이지로 이동, 현재 페이지에서 동적으로 다시 로드하는 응용 프로그램)
  • 고성능 프레임워크이다.
  1. Angular는 모바일 환경에서도 구동할 수 있는 것을 목표로 두는 프레임워크이기 때문에 적은 용량으로 더욱 빠르게 프레임워크를 로딩하기 위해 튜닝을 진행한다.
  2. 대표적인 방식으로 애플리케이션 실행시 모든 모듈을 로딩하는 것이 아닌 현재 페이지에 필요한 부분의 모듈만 로딩하는 지연로딩(Lazy Loading) 방식이 있다.
  • Aot compile(Ahead of time compilation) 사전 컴파일 방식이다.
  1. HTML 템플릿과 CSS 파일을 컴파일하여 코드로 삽입하는 방식으로 Angular에서 지원하는 특정 지시자를 브라우저 레벨에서 실행하지 않고 미리 실행 가능한 Javascript 코드로 변환해놓는다.[8]

주요 개념[편집]

  • 지시어(directives) : 앵귤러의 기능을 적용하기 위한 특정 HTML 함수로 사용자 지정을 할 수 있다는 특징이 있다. 지시어는 ng로 시작하는 것들이 많다. (예: ng-controller, ng-app 등)
  • 필터(filters) : 표현 식이 화면에 표기되는 포맷에 있어서 원하는 데이터만을 필터링하여 사용할 수 있게 해준다.
  • 데이터 바인딩(data binding) : 모델과 뷰의 데이터를 양방향으로 지속적, 실시간 연동하여 업데이트한다. 데이터를 원하는 위치에 편리하게 사용할 수 있도록 바인딩해 준다.
  • 컨트롤러(controller) : 모델 생성, 메소드를 통해 뷰로 퍼블리싱을 담당하는 등 자바스크립트로 된 제어 로직이다. 메인 컴포넌트로서 기능별로 묶어 사용할 수 있도록 해준다.
  • 모듈(module) : 응용 프로그램의 서로 다른 기능을 구성하는 컨테이너로 지시어, 필터, 컨트롤러, 서비스 등을 포함한다. 모든 자바스크립트의 기능들은 모듈 단위로 관리된다.
  • 서비스(service) : 특정 기능을 담당하는 객체와 공통된 특정 작업을 수행하는 singleton 객체들을 사용해 컨트롤러 간의 통신을 제어하거나 또는 이 객체들을 리턴해서 컨트롤러로 CRUD를 수행하여 사용된다.

문제점[편집]

  • 학습 분량 : Angular는 여러 가지 언어를 제공하지만, 주력 언어는 타입스크립트(TypeScript)이다. 그러므로 대부분의 Angular 앱은 타입스크립트(TypeScript)로 쓰여있으며, 이를 활용하기 위해서는 Angular가 지닌 여러가지 개념들을 알아야 하고, 그 개념들이 어떻게 TypeScript로 표현되는지도 알아야 한다.
  • 초기 로딩 속도 : Angular로 만든 SPA의 초기 로딩속도는 다소 느린 편이다. 성능이 좋은 데스크탑이나 모바일에서는 큰 문제가 아니라고 생각할 수 있으나, 성능이 좋지 않은 모바일에서는 로딩 시간이 1초 이상 걸리기도 하므로 생각보다 큰 문제이다. 물론 초기화면이 로딩된 후 웹페이지 내에서의 이동은 매우 빠르다.
  • 검색엔진 인덱싱 : Angular로 만든 SPA를 제대로 인덱싱하지 못하는 크롤러가 생각보다 많아서, 모든 검색엔진에 검색되게 하기 위해서는 다른 방법을 사용해야 한다. SPA를 포기하고 서버 측에서 렌더링 할 수 있게 도와주는 Angular Universal을 사용하는 것도 방법의 하나다. 하지만 이러한 방법을 사용하게 되면, Angular를 사용해서 얻는 이점이 적어질 수밖에 없다.[9]

전망[편집]

AngularJs 모듈의 시작부터 급격한 변화와 새로운버전이 정기적으로 등장하면서 이 분야는 전문가들에게 좋은 미래 전망을 제공하고 많은 관심을 불러일으키고 있다. AngularJS 과정은 기능적 CV에 엄청난 가치를 더할 수 있고 좋은 보수를 줄 수 있기 때문에 충분히 고려할 가치가 있다.[10]

각주[편집]

  1. ↑ 개발은 전투다, 〈앵귤러JS (AngularJS)란?〉,《티스토리》, 2018-08-29
  2. ↑ ShabangBoy, 〈Angular 탄생 배경 및 역사〉,《incodom》, 2018-07-04
  3. ↑ 에이콘아카데미, 〈(프론트엔드)업그레이드 된 앵귤러(Angular JS)4.2 제대로 알기 〉,《네이버블로그》, 2017-07-17
  4. ↑ Susan May, 〈What's New In Angular 5?〉,《zeomag》, 2018-05-10
  5. ↑ Stephen Fluin, 〈Version 6 of Angular Now Available〉,《Angular 공식 블로그》, 2018-05-04
  6. ↑ Stephen Fluin, 〈Version 7 of Angular - CLI Prompts, Virtual Scroll, Drag and Drop and more〉,《Angular 공식 블로그》, 2018-10-19
  7. ↑ Stephen Fluin, 〈Version 8 of Angular - Smaller bundles,CLI APIs,and alignment with the ecosystem〉,《Angular 공식 블로그》, 2019-05-29
  8. ↑ green, 〈Angular 특징 및 철학〉,《incodom》, 2018-03-29
  9. ↑ green, 〈Angular 장단점〉,《incodom》, 2018-05-04
  10. ↑ siliconindia, 〈Angular JS-The robust Java Script Platform with New Features and Updates〉,《siliconindia News》, 2019-06-11

참고자료[편집]

같이 보기[편집]


  검수요청.png검수요청.png 이 앵귤러제이에스 문서는 솔루션에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.  

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션 □■⊕, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인
솔루션 CMS • CRM • DRM • ERP • HMS • LCMS • LMS • PMS • SCM • VOC • 그룹웨어 • 모니터링 솔루션 • 솔루션 • 웹빌더 • 위키 • 지식관리시스템(KMS) • 커스터마이징 • 패키지 소프트웨어 • 패키지 제품
프레임워크 넥스코어 • 노드제이에스(node.js) • 닷넷(.NET) • 라프제이(Laf/J) • 레일즈 • 마이바티스(MyBatis) • 맵리듀스 • 스트럿츠 • 스프링 프레임워크 • 아두이노 • 아이바티스(iBatis) • 아파치 스파크 • 애니프레임 • 앵귤러제이에스(Angular.js) • 에이에스피닷넷(ASP.NET) • 인텔리제이 아이디어(IntelliJ IDEA‎) • 장고 • 전자정부 표준 프레임워크 • 하둡 • 하이버네이트
콘텐츠관리시스템 iCS • 드루팔 • 아사프로 • 오픈웍스 • 워드프레스 • 윅스 • 줌라 • 지니웍스 • 콘텐츠와이즈 • 홈스토리 • 홍익인간
홈페이지 솔루션 GPKI • LBS • PKI • 게시판 • 공인인증서 • 구글 애널리틱스 • 구글 애드센스 • 그누보드 • 네이버 애널리틱스 • 넷퍼넬 • 달력 • 대댓글 • 댓글 • 덱스트업로드 • 마토모 • 방명록 • 블로그 • 비즈니스 애널리틱스 • 선플 • 설문조사 • 소셜로그인 • 스킨 • 아이핀 • 악플 • 에이스카운터 • 웹로그 • 위젯 • 익스프레스엔진(제로보드XE) • 인증 • 접속통계 • 제로보드 • 지핀(G-PIN) • 카운터 • 커뮤니티 • 테크노트 • 투표 • 파일업로드 • 회원관리
이메일 솔루션 깨비메일 • 메일플러그 • 썬더메일 • 에어즈락메일
쇼핑몰 솔루션 고도몰 • 굿모닝샵 • 메이크샵 • 카페24 쇼핑몰 • 퍼스트몰 • 후이즈몰
동영상 솔루션 1그램플레이어 • 5K플레이어 • ACG플레이어 • KM플레이어 • VLC미디어플레이어 • 곰플레이어 • 디코더 • 와우자 • 웹엑스 • 인코더 • 코덱 • 코디 • 팟플레이어
검색 솔루션 검색 • 검색엔진 • 독크루저 • 레피아 • 루씬 • 마리너 • 미르서치 • 서치포뮬러원 • 아이트리니티 • 엑스텐 • 엑스퍼서치 • 일래스틱서치
리포팅툴 사이냅 • 알메이트차트 • 오즈리포트 • 유비리포트 • 차트 • 크로닉스리포트(리포트 디자이너) • 클립리포트(렉스퍼트)
BI 솔루션 BI • BI매트릭스 • OLAP • 옥타곤 • 코그너스 • 태블로
연계 솔루션 메심 • 비즈위버 • 웹크롤러 • 이크로스 비즈아이 스위트 • 인디고 • 코어브릿지 • 크롤러 • 프로버스
데이터 솔루션 BTL 데이터 인테그레이터 • ETL 솔루션 • 딥솔루션 • 아이샤크 • 이노쿼츠 • 인포매티카 • 탈렌드 • 탈렌드 오픈스튜디오 • 테라스트림
자료공유 솔루션 구글 드라이브 • 나스 • 드롭박스 • 시놀로지 나스 • 원드라이브 • 웹하드
그룹웨어 거래처 관리 • 구글 워크스페이스 • 규정관리 • 근태관리 • 노츠 • 노트 • 다우오피스 • 다이렉트 클라우드 • 더존 솔루션 • 메일플러그 • 브레인스톰 • 비즈메카 • 엘지 유플러스 그룹웨어 • 연락처 • 연락처 관리 • 오피스365 • 온타임 • 웍스모바일 • 위하고 • 인사관리 • 일정관리 • 전자결재 • 지스위트 • 지투웍스 • 코디네이터 • 팀포커스 • 하이웍스 • 핸디 • 헬로윈
클라우드 솔루션 오픈네뷸라 • 오픈스택 • 유칼립투스 • 클라우드스택 • 클라우드잇
지도 솔루션 구글 지도 • 네이버 지도 • 바이두 지도 • 지도 • 지도 API • 카카오 지도 • 티맵
모바일 솔루션 모피어스
기타 솔루션 딥오씨알 • 리무트콜 • 스카우터 • 알서포트
위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반
원본 주소 "http://wiki1.kr/index.php?title=앵귤러제이에스&oldid=353272"