의견.png

앵귤러제이에스

위키원
eom9522 (토론 | 기여)님의 2019년 7월 24일 (수) 15:34 판
이동: 둘러보기, 검색

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

개요

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

탄생 배경

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

버전

Angular 1

Angular 1. x

Angular 2

  • 처음으로 타입스크립트(TypeScript)가 사용되고, 구성방식, 아키텍처 사용하는 툴 등의 변경으로 새로운 앵귤러(Angular.JS)가 됐다.

Angular 3

  • 라우터 패키지 버전을 잘못 정렬해 Angular 4로 바로 넘어갔다.

Angular 4

  • 새로운 프레임워크가 아닌 오류와 성능개선에 목표를 둔 버전(앵귤러 2와 하위호환 가능, 타입스크립트 상위호환 가능 등)이다.[3]

기능

크로스 플랫폼 지원

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

최적화된 성능

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

최고의 생산성 제공

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

그 외 기능

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

특징

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

주요 개념

지시어(Directives)

  • 앵귤러의 기능을 적용하기 위한 특정 HTML 함수로 사용자 지정을 할 수 있다는 특징이 있다. 지시어는 ng로 시작하는 것들이 많다. (예: ng-controller, ng-app 등)

필터(Filters)

  • 표현 식이 화면에 표기되는 포맷에 있어서 원하는 데이터만을 필터링하여 사용할 수 있게 해준다.

데이터 바인딩(Data Binding)

  • 모델과 뷰의 데이터를 양방향으로 지속적, 실시간 연동하여 업데이트한다. 데이터를 원하는 위치에 편리하게 사용할 수 있도록 바인딩해 준다.

컨트롤러(Controller)

  • 모델 생성, 메소드를 통해 뷰로 퍼블리싱을 담당하는 등 자바스크립트로 된 제어 로직이다. 메인 컴포넌트로서 기능별로 묶어 사용할 수 있도록 해준다.

모듈(Module)

  • 응용 프로그램의 서로 다른 기능을 구성하는 컨테이너로 지시어, 필터, 컨트롤러, 서비스 등을 포함한다. 모든 자바스크립트의 기능들은 모듈 단위로 관리된다.

서비스(Service)

  • 특정 기능을 담당하는 객체와 공통된 특정 작업을 수행하는 singleton 객체들을 사용해 컨트롤러 간의 통신을 제어하거나 또는 이 객체들을 리턴해서 컨트롤러로 CRUD를 수행하여 사용된다.

문제점

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

전망

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

각주

  1. 개발은 전투다, 〈앵귤러JS (AngularJS)란?〉,《티스토리》, 2018-08-29
  2. ShabangBoy, 〈Angular 탄생 배경 및 역사〉,《incodom》, 2018-07-04
  3. 에이콘아카데미, 〈(프론트엔드)업그레이드 된 앵귤러(Angular JS)4.2 제대로 알기 〉,《네이버블로그》, 2017-07-17
  4. ANGULAR 공식 홈페이지 - https://angular.kr/features
  5. green, 〈Angular 특징 및 철학〉,《incodom》, 2018-03-29
  6. green, 〈Angular 장단점〉,《incodom》, 2018-05-04
  7. siliconindia, 〈Angular JS-The robust Java Script Platform with New Features and Updates〉,《siliconindia News》, 2019-06-11

참고자료

같이 보기


  의견.png 이 앵귤러제이에스 문서는 프로그래밍에 관한 토막글입니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 이 문서의 내용을 채워주세요.