Angular 요약 소개

Angular

Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크이다. 웹 애플리케이션은 물론 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있다. 정적 타입을 제공하는 TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경을 제공한다.

[AngularJS는 구글에서 운용, 유지 중인 JavaScript 웹 프레임워크이다. React, Vue.js와 함께 프론트엔드 삼대장으로 불린다.

버전 1~2 동안 jQuery 급으로 빠른 속도로 쓰이기 시작했다. 현재는 버전 7까지 등장하였으며 Node.js 등의 npm 설치를 지원한다. 버전 1.x를 AngularJS, 버전 2 이상부터 Angular로 지칭한다.[1] Angular는 AngularJS와 달리 TypeScript 기반이다.]

출처 : 나무위키

Angular의 버전이 자주 바뀌어서 개발자들에게 혼란을 발생시켰다.

버전 1 -> AngularJS

버전 2 ~ -> Angular

 

현재 stable 버전 : v8.1.0-next.3

 

Angular 특징

 

한 번의 개발로 모든 플랫폼에 적용하기(크로스 플랫폼 지원)

Angular로 개발하면 모든 플랫폼에 재사용할 수 있는 애플리케이션을 개발할 수 있습니다. 웹, 모바일 웹, 네이티브 애플리케이션, 네이티브 데스크탑까지

 

-프로그레시브 웹 앱

앱과 비슷한 사용자 경험을 제공합니다. 성능은 극대화되고 오프라인에서도 동작하며, 설치할 필요도 없습니다.

 

-네이티브 앱

웹 기술로 네이티브 앱도 만들 수 있습니다. Ionic, NativeScript, React Native를 확인해 보세요.

 

-데스크탑 앱

맥이나 윈도우, 리눅스에 설치해서 사용하는 데스크탑 애플리케이션을 만들어보세요. 웹에서 사용하던 Angular 코드를 그대로 사용하면서, 네이티브 OS에서 제공하는 API를 활용할 수 있습니다.

 

 

빠른 성능(최적화된 성능)

현존하는 웹 플랫폼 중 최고의 성능을 자랑합니다. 웹 워커와 서버 사이드 렌더링을 사용하면 더 빨라질 수 있습니다.

대규모 클라우드에도 활용할 수 있습니다. 대용량 데이터 구조는 RxJS, Immutable.js, 푸시 모델을 활용해서 처리할 수 있습니다.

 

- 플랫폼에 최적화된 코드 생성

개발자가 작성한 코드는 애플리케이션이 동작하는 JavaScript 가상 머신의 최신 버전에 맞게 최적화됩니다. 프레임워크가 제공하는 생산성 높은 코드를 자유롭게 활용해보세요.

 

- 유니버설 지원

HTML과 CSS로만 렌더링된 페이지와 마찬가지로, Angular 애플리케이션의 정적 페이지를 node.js나 .NET, PHP와 같은 서버 플랫폼에서 제공할 수 있습니다. Angular Universal은 SEO에도 활용할 수 있습니다.

 

- 실행에 필요한 코드만 로드

Angular 애플리케이션을 빠르게 실행하기 위해 새로운 컴포넌트 라우터를 활용합니다. 이 라우터는 사용자가 요청한 뷰를 렌더링 하는 데에 꼭 필요한 단위로 코드를 분할해서 사용자에게 전송합니다.

 

강력한 개발 지원(최고의 생산성)

IDE에서도 Angular 구성요소를 간단하게 추가할 수 있습니다. 커스텀 컴포넌트를 자유롭게 추가할 수 있고, Angular에서 제공하는 컴포넌트를 활용할 수도 있습니다. 이제 거의 모든 IDE와 에디터가 Angular에 특화된 도움말을 제공합니다. 훌륭한 앱을 만드는 것에만 집중하세요.

 

- 템플릿

간결하고 효율적인 템플릿 문법으로 UI 뷰를 빠르게 만들어 보세요.

 

- Angular CLI

프로젝트 생성, 컴포넌트 추가, 테스트, 빌드, 배포까지 활용할 수 있는 커맨드 라인 툴을 제공합니다.

 

- IDE 지원

최신 에디터와 IDE에서 코드 자동 완성, 에러 감지 등 개발에 도움이 되는 기능을 다양하게 지원합니다.

 

 

그외

테스트

Karma로 유닛 테스트를 실행하면 문제를 찾는데 걸리는 시간을 대폭 줄일 수 있습니다. Protractor로 시나리오 테스트를 수행할 수도 있습니다.

애니메이션

복잡한 애니메이션도 Angular에서 제공하는 직관적인 API를 활용하면 간단한 코드로 구현할 수 있습니다.

웹 접근성

ARIA를 활용해서 웹 접근성 기능을 지원하는 컴포넌트를 만들어보세요. 웹 접근성을 테스트할 수 있는 환경도 제공합니다.

 

 

Angular CLI : A command line interface for Angular

https://cli.angular.io/

 

Angular CLI는 간단한 명령어를 사용하여 Angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있으며 Angular의 다양한 구성 요소를 선별적으로 추가할 수 있는 커맨드-라인 인터페이스(command line interface)이다. 개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜서 동작을 확인할 수 있다.

프레임워크의 개발환경을 구축하는 것은 쉽지 않은 일이다. 프레임워크 구조에 맞게 프로젝트 구성요소를 하나하나 생성하여야 하며 프로젝트 의존성 관리나 다양한 프로젝트 설정 구성 또한 만만한 작업이 아니다. 또한 익숙치 않은 프레임워크의 파일 구조나 코딩 컨벤션 등의 스타일 가이드를 작성하는 일은 많은 시행착오를 거쳐야 하는 작업이다. Angular CLI는 Angular 프로젝트 스캐폴딩을 간단한 명령어로 생성해 주어 개발환경 구축에 소요되는 시간을 최소화할 뿐 아니라 표준 스타일 가이드를 제공한다.

Angular CLI가 지원하는 기능은 아래와 같다.

• Angular 프로젝트 생성

• Angular 프로젝트에 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성 요소 추가

• LiveReload를 지원하는 내장 개발 서버를 사용한 Angular 프로젝트 실행

• Unit/E2E(end-to-end) 테스트 환경 지원

• 배포를 위한 Angular 프로젝트 패키징

 

 

 

Angular cli  설치

npm install -g @angular/cli

 

기본 예시

ng help

ng generate --help

 

프로젝트 생성

ng new my-first-project

cd my-first-project

ng serve

 

 

자주 사용하는 명령어

ng new : angular 프로젝트 생성

ng generate : 컴포넌트, 라우터, 서비스, 파이프, 지시자를 간단한 명령어로 생성

ng serve : 로컬 서버 실행

 

 

test-angular 프로젝트 만들기

 

ng new test-angular

 

 

서버 실행

ng serve

 

4200번 포트에서 실행됩니다.

localhost:4200

 

공식사이트에 문서가 잘되있습니다. 시작하기와 히어로앱 튜토리얼을 해보시면 어느정도 익히실 수 있습니다.

 

Angular 한국 공식사이트 : https://angular.kr/

Angular 시작해보기 : https://angular.kr/start

Angular Hero앱 : https://angular.kr/tutorial

 

참고

Angular의 컴파일

AoT 컴파일(Ahead of Time compilation)은 사전 컴파일 방식을 의미한다. 예를 들어 ngIf, ngFor, ngSwitch와 같은 구조 디렉티브(Structural directive)를 브라우저가 실행 가능한 코드로 변환해야 하는데 이러한 과정을 런타임에서 실시하지 않고 사전에 컴파일하여 실행 속도를 향상시키는 기법이다. AoT 컴파일의 또 다른 이점은 JIT(Just-In-Time) 컴파일러가 필요 없어서 프레임워크 크기를 기존 AngularJS보다 50% 정도 줄일 수 있다는 것이다.

 

Angular는 두 종류의 컴파일 방식을 제공합니다:

 

1. Just-in-Time (JIT): 브라우저에서 애플리케이션을 실행하면서 코드를 직접 컴파일하는 방식입니다.

2. Ahead-of-Time (AOT): 브라우저에 애플리케이션 코드를 보내기 전에 미리 컴파일하는 방식입니다.

 

 

Angular CLI로 ng build 명령이나 ng serve 명령을 실행하면 기본적으로 JIT 컴파일러가 실행됩니다:

 

ng build

ng serve

 

 

그리고 AOT 컴파일러를 사용하려면 ng build 명령이나 ng serve 명령을 실행할 때 --aot 옵션을 사용하면 됩니다:

 

ng build --aot

ng serve --aot