앵귤러제이에스

앵귤러제이에스(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 구조를 알고 있을 필요가 없고, 뷰 코드와 로직 코드가 명확히 분리된다.

주요 개념

지시어(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를 사용해서 얻는 이점이 적어질 수밖에 없다.

전망

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

참고자료

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

같이 보기

• 구글

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

개발 : 프로그래밍 □■⊕, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인 프로그래밍 언어 ASP • C 언어 • C++ • C# • CSS • D 언어 • HTML • HTML5 • JSP • PHP • R • XHTML • XML • XSLT • 고(Go) • 고급언어 • 기계어 • 델파이 • 러스트 • 루비 • 루아 • 리액트 • 리퀴디티 • 무브 • 미켈슨 • 베이직 • 브이비스크립트 • 비주얼 C++ • 비주얼베이직(VB) • 비주얼베이직닷넷(VB.NET) • 솔리디티 • 스몰토크 • 스위프트 언어 • 스칼라 • 스크립트 언어 • 알골 • 어셈블리 • 언리얼스크립트 • 얼랭 • 에이잭스(Ajax) • 엠에프씨(MFC) • 오브젝티브-C • 오브젝트 파스칼 • 오카멜 • 웹어셈블리(WASM) • 이와즘(eWASM) • 자바 • 자바스크립트 • 저급언어 • 제이슨(JSON) • 제이쿼리(jQuery) • 카멜 • 코볼 • 코틀린 • 콜드퓨전 • 타입스크립트 • 파스칼 • 파워스크립트 • 파이썬 • 펄(Perl) • 포트란 • 프로씨(Pro-C) • 피엘에스큐엘(PL/SQL) • 피엘원(PL/I) • 하스켈 개발방법론 CBD 개발방법론 • EA • 구조적 개발방법론 • 객체지향 개발방법론 • 라이브러리 • 람다 아키텍처 • 모듈 • 모듈화 • 벤치마킹 • 소프트웨어 개발방법론 • 스크럼 • 스프린트 • 아키텍처 • 아키텍트 • 애자일 • 웹개발방법론 • 정보공학 개발방법론 • 컴포넌트 • 테일러링 • 템플릿 • 폭포수 모델 • 프로젝트 • 프로토타입 • 피드백 코딩 EUC-KR • UTF-8 • 값 • 글루웨어 • 노팔로우 링크 • 두팔로우 링크 • 디버깅 • 디코딩 • 마크업 • 버그 • 부트스트랩 • 세이브포인트 • 소스코드 • 시큐어코딩 • 아스키 • 액티브엑스 • 오픈소스 • 유니코드 • 인코딩 • 재컴파일 • 주석 • 컴파일 • 컴퓨터 프로그램 • 코드 • 코딩 • 태그 • 테스트 • 테이블 • 텍스트 • 파싱 • 퍼블리싱 • 퓨니코드 • 하드코딩 • 하이퍼링크 • 하이퍼텍스트 프로그래밍 C 명령어 • 객체 • 객체지향 • 객체지향 프로그래밍 • 거짓 • 관계연산자 • 기본형 변수 • 널 • 논리 • 논리연산 • 논리연산자 • 다중상속 • 다형성 • 대입 • 대입문 • 대입연산자 • 더블 • 도스 명령어 • 디폴트 • 레지스터변수 • 루프 • 리눅스 명령어 • 리턴 • 메모리 주소 • 메소드 • 멤버 • 명령문 • 명령어 • 무한루프 • 문자 • 문자열 • 바이트 • 반복문 • 배열 • 변수 • 분기 • 분기문 • 불린 • 브레이크 • 비교연산자 • 비트연산자 • 산술연산자 • 상속 • 상수 • 생성자 • 선언 • 선언문 • 설정자 • 속성 • 스위치 • 스태틱 • 시프트연산자 • 실행 • 실행문 • 어노테이션 • 에코 • 역참조 • 연산 • 연산문 • 연산자 • 오버로딩 • 오버라이딩 • 외부변수 • 윈도우 명령어 • 유닉스 명령어 • 인스턴스 • 인스트럭션 • 인클루드 • 인터페이스 • 임포트 • 입력 • 입력문 • 입출력 • 입출력문 • 자료형(데이터 타입) • 자바 명령어 • 자바 예약어 • 자바 컬렉션 • 전역변수 • 접근자 • 접근제어자 • 정보은닉 • 정수형 • 정적변수 • 제어 • 제어문 • 제어자 • 조건 • 조건문 • 조건연산자 • 주소 • 증감연산자 • 지역변수 • 참 • 참조 • 참조변수 • 초기화 • 추상메소드 • 추상클래스 • 추상화 • 출력 • 출력문 • 캡슐화 • 케이스 • 클래스 • 파라미터(매개변수) • 파이널 • 패키지 • 퍼블릭 • 포인터 • 프라이빗 • 프로텍티드 • 필드(멤버변수) • 함수 • 환경변수 명령어 abstract • array • boolean • break • byte • case • char • continue • default • double • do while • echo • elif • else • else if • false • final • float • for • gosub • goto • if • if else • import • include • int • join • long • long long • null • print • printf • println • private • protected • public • return • scanf • short • stdio.h • static • string • switch • temp • then • true • unsigned • void • while 디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴 프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반