[Angular] 01. Angular 시작하기

교재 : [Angular Development with TypeScript]

링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159

*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다.

angular란? : 

Angular는 Google에서 주관하는 오픈 소스 프레임워크이며, 개발자들에게 큰 인기를 끌었던 AngularJS를 전반적으로 검토해서 새롭게 재구축된 프레임워크입니다. Angular 애플리케이션은 ECMAScript 5, 또는 6 버전의 JavaScript나 Dart, TypeScript를 사용해서 작성할 수 있습니다. 개발자가 코드를 적게 작성하도록 돕는 것이 좋은 프레임워크이며, 그런 점에서 Angular도 좋은 프레임워크 중 하나입니다. Angular 애플리케이션은 TypeScript나 JavaScript로 개발할 수 있습니다.

Chapter01. Angular 시작하기

학습목표 : 

1. Angular와 AngularJS의 차이에 대해 설명할 수 있다.

→Angular가 AngularJS보다 단순한 점은 다음과 같다.

- 애플리케이션을 구성하는 각 컴포넌트는 뷰, 컨트롤러, 변화 감지 메커니즘의 관점에서 보면 온전히 캡슐화되어 있다.
- 컴포넌트 클래스는 어노테이션을 지정해서 원하는 용도로 바꿔서 사용할 수 있다.
- 스코프 계층에 대해 신경 쓸 필요가 없다.
- 의존성이 있는 컴포넌트는 컴포넌트 생성자를 통해서만 주입된다. 
- 데이터 바인딩은 기본적으로 단방향 바인딩이며, 필요한 경우에만 양방향 바인딩을 사용한다. 
- 변화 감지 메커니즘이 새로워졌고, 이전보다 빠르다.


2. npm의 개념에 대해 설명할 수 있다.

→npm은 JavaScript 라이브러리나 프레임워크를 설치할 수 있는 패키지 매니저다. npm 저장소에는 수천 개의 항목이 있으며, 개발 환경에 맞게 TypeScript 컴파일러, Angular, jQuery 등과 같은 개발 툴을 손쉽게 설치할 수 있다. npm 스크립트를 작성해서 서버를 실행하거나 빌드를 자동화할 수도 있다. npm과 거의 비슷하지만 좀 더 속도가 빠른 yarn 패키지 매니저도 있다.


3. Angular 애플리케이션의 구성 요소에 대해 설명할 수 있다.

→모듈은 관련된 컴포넌트나 서비스, 디렉티브 등을 편하게 사용하기 위해 하나로 모은 것이다. 작은 애플리케이션에서는 모든 앨리먼트가 하나의 모듈(루트 모듈)에 속할 수도 있고, 더 큰 앱에서는 여러 개의 모듈이 있을 수도 있다. 컴포넌트는 Angular 애플리케이션을 구성하는 기본 요소이며, 화면을 정의하는 뷰와 컴포넌트의 동작을 정의하는 클래스로 구성된다. Angular의 디렉티브를 사용하면 AngularJS의 디렉티브와 마찬가지로 HTML 엘리먼트에 사용자가 원하는 동작을 추가할 수 있으며, @Directive 어노테이션을 클래스에 붙여서 선언한다.

학습내용  : 

이번 차시에서는 Angular 시작하기에 대해 학습합니다.

1차시 학습에서 중요한 키워드는 [Angular], [Jasmine], [npm]입니다.

각 키워드에 대한 설명은 다음과 같습니다.

[Angular]
Angular는 Google에서 주관하는 오픈 소스 프레임워크이며, 개발자들에게 큰 인기를 끌었던 AngularJS는 전반적을 검토해서 새롭게 재구축된 프레임워크다.

[Jasmine]
Jasmine은 JavaScript 코드 테스트에 사용되는 오픈 소스 프레임워크다.

[npm]
npm은 JavaScript 라이브러리나 프레임워크를 설치할 수 있는 패키지 매니저다.

학습요약 : 

 

• Angular는 Google에서 주관하는 오픈 소스 프레임워크이며, 개발자들에게 큰 인기를 끌었던 AngularJS는 전반적을 검토해서 새롭게 재구축된 프레임워크다.
• Ember.js는 웹 애플리케이션 개발에 사용되는 MVC 기반의 오픈 소스 프레임워크다. Ember.js에서는 라우팅 기능을 제공하며 양방향 데이터 바인딩을 지원한다. 
• Jasmine은 JavaScript 코드 테스트에 사용되는 오픈 소스 프레임워크다. Jasmine은 DOM 객체가 없어도 동작하며, 애플리케이션 코드가 원하는 대로 동작하는지 검사할 수 있는 함수들을 제공한다. 
• jQuery는 DOM 객체를 찾거나 조작하는 기능을 제공하며, 브라우저에서 이벤트를 처리하거나 브라우저의 호환성을 맞추는 데에도 사용된다. 
• Bootstrap은 Twitter에서 만든 오픈 소스 UI 컴포넌트 라이브러리다. Bootstrap에서 제공하는 컴포넌트들은 반응형 웹 디자인 철학을 기반으로 만들어졌기 때문에 화면 크기나 사용자의 디바이스 크기에 맞게 레이아웃을 자동으로 조정해야 하는 웹 애플리케이션을 개발할 때 최선의 선택이 될 것이다. 
• Facebook에서 만든 React는 사용자 인터페이스 구현에 사용되는 오픈 소스 라이브러리다. 
• Google에서 만든 Polymer는 웹 컴포넌트 표준을 기반으로 커스텀 컴포넌트를 만드는 데에 사용하는 라이브러리다. 
• RxJS는 옵저버블 컬렉션을 컬렉션을 사용하며, 비동기 이벤트 기반 프로그래밍에 특화된 라이브러리다. 
• Angular는 다음과 같은 점에서 AngularJS보다 단순하다.
 애플리케이션을 구성하는 각 컴포넌트는 뷰, 컨트롤러, 변화 감지 메커니즘의 관점에서 보면 온전히 캡슐화되어 있다.
 컴포넌트 클래스는 어노테이션을 지정해서 원하는 용도로 바꿔서 사용할 수 있다.
 스코프 계층에 대해 신경 쓸 필요가 없다.
 의존성이 있는 컴포넌트는 컴포넌트 생성자를 통해서만 주입된다. 
 데이터 바인딩은 기본적으로 단방향 바인딩이며, 필요한 경우에만 양방향 바인딩을 사용한다. 
 변화 감지 메커니즘이 새로워졌고, 이전보다 빠르다.
• npm은 JavaScript 라이브러리나 프레임워크를 설치할 수 있는 패키지 매니저다. npm 저장소에는 수천 개의 항목이 있으며, 개발 환경에 맞게 TypeScript 컴파일러, Angular, jQuery 등과 같은 개발 툴을 손쉽게 설치할 수 있다. npm 스크립트를 작성해서 서버를 실행하거나 빌드를 자동화할 수도 있다. npm과 거의 비슷하지만 좀 더 속도가 빠른 yarn 패키지 매니저도 있다.
• Angular 프레임워크에는 여러 모듈이 있는데, 보통 한 파일이 한 모듈이다. 어떤 모듈은 단순하게 라이브러리로 사용되며, 논리적으로 연관된 것들끼리 묶여서 @angular/core, @angular/common과 같이 패키지로 구성되기도 한다. 
• yarn 패키지 매니저에서 패키지를 전역에 설치하는 명령은 yarn global add [패키지명]이다.
• 모듈은 관련된 컴포넌트나 서비스, 디렉티브 등을 편하게 사용하기 위해 하나로 모은 것이다. 작은 애플리케이션에서는 모든 앨리먼트가 하나의 모듈(루트 모듈)에 속할 수도 있고, 더 큰 앱에서는 여러 개의 모듈이 있을 수도 있다.
• 컴포넌트는 Angular 애플리케이션을 구성하는 기본 요소이며, 화면을 정의하는 뷰와 컴포넌트의 동작을 정의하는 클래스로 구성된다. 
• Angular 애플리케이션은 모듈 안에 컴포넌트로 계층을 구성해서 만들기 때문에 모든 앱은 최소한 하나의 모듈(루트 모듈)과 하나의 루트 컴포넌트를 갖는다. 
• Angular의 디렉티브를 사용하면 AngularJS의 디렉티브와 마찬가지로 HTML 엘리먼트에 사용자가 원하는 동작을 추가할 수 있으며, @Directive 어노테이션을 클래스에 붙여서 선언한다. 
• baseURL
 System.import() 함수에 파일의 이름만 전달되면 이 옵션으로 설정된 위치에서 모듈을 찾는다. import() 함수에 모듈 이름을 지정하거나 상대 주소, 절대 주소를 지정하는 경우에는 무시한다. 
System.config({ baseURL : ‘app’ });
System.import(‘es6module.js’); // Get / app / es6module.js
System.import(‘./es6module.js’); // Get / es6module.js
System.import(‘http//example.com/es6module.js’); 
• defaultJSExtension
 defaultJSExtension 값을 true로 설정하면 System.import() 함수로 전달하는 인자에 .js 확장자가 자동으로 붙는다. 인자에 다른 확장자가 있는 경우에도 이 확장자가 .js가 아니라면 한번 더 붙는다.
System.config({ defaultJSExtension : true});
System.import(‘es6module’); // GET /es6module.js
System.import(‘./es6module.js’); // GET / es6module.js
System.import(‘http//es6module.js//GET / es6module.ts.js’); map
 map 옵션을 설정하면 미리 지정한 이름으로 모듈을 참조할 수 있는 맵을 만든다. 이 맵은 System.import() 함수에 상대 주소나 절대 주소를 전달하는 경우에는 사용되지 않으며,  baseURL 설정의 영향을 받는다.
System.config({ defaultJSExtension : true});
System.import(‘es6module’); // GET /es6module.js
System.import(‘./es6module.js’); // GET / es6module.js
System.import(‘http//es6module.js/es6module.ts.js’);