의견.png

앵귤러제이에스

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

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

개요

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

탄생 배경

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

버전

Angular 1

  • 기존에 자바스크립트로 코딩했던 $scope를 사용한다.

Angular 1. x

  • 컴포넌트(Component)가 도입됐다.

Angular 2

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

Angular 3

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

Angular 4

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

기능

크로스 플랫폼 지원

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

최적화된 성능

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

최고의 생산성 제공

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

그 외 기능

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

특징

  • 작성해야 하는 자바스크립트 코드량을 줄여준다.
    • 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 구조를 알고 있을 필요가 없고, 뷰 코드와 로직 코드가 명확히 분리된다.

문제점

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

전망

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

각주

  1. siliconindia, 〈Angular JS-The robust Java Script Platform with New Features and Updates〉,《siliconindia News》, 2019-06-11

참고자료


같이 보기


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