앵귤러제이에스

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

개요

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

탄생 배경

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

버전

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에 엄청난 가치를 더할 수 있고 좋은 보수를 줄 수 있기 때문에 충분히 고려할 가치가 있다.

참고자료

• 개발은 전투다, 〈앵귤러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 디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴 프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반