Angular?
Google에서 만든 단일 페이지 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크다.
기존 Angular 1을 AngularJS, Angular 2를 Angular라고 부른다.
단일 페이지 웹 애플리케이션 (SPA : Single Page Application) 방식으로 Ajax요청을 통해 변경되는 부분에 필요한 데이터만 받아와 해당 부분만 렌더링한다.
(일반 웹 애플리케이션은 서버로부터 새로운 페이지를 받아 전체 리소스를 로드하고 처음부터 렌더링한다.)
AngularJS와 Angular의 차이?
- Controller와 $scope 기반 개발에서 Component 기반 개발(CBD, Component Based Development)로 전환되었다.
- AngularJS보다 향상된 모듈 시스템과 DOM 제어 기능을 제공한다.
- AngularJS보다 API가 단순화되었다.
- 주력 개발 언어로서 TypeScript를 도입하여 대규모 개발에 적합한 정적 타입과 인터페이스, 제네릭 등 타입 체크 지원 기능을 제공한다.
- 강력한 개발환경 지원 도구인 Angular CLI를 제공한다.
Angular와 TypeScript?
Angular는 JS를 이용한 개발을 지원하지만 최신 버전의 JS를 모든 브라우저가 지원하지는 않기 때문에
TypeScript를 이용하여 개발한 후, Babel이라는 Transpiler를 이용하여 모든 브라우저에서 호환 가능한 JS로 변환한다.
TypeScript는 JS의 상위집합의 언어로서 아래의 특징을 가진다.
- OOP(상속, 인터페이스 등) 및 정적 타입을 지원
- 기본형(num, string, boolean..)을 지원
- 어노테이션 지원
- 제네릭과 람다 이용 가능
Angular CLI?
Angular 프레임워크의 개발환경 구출을 자동화해주고 프레임워크의 기본 골격을 생성해주는 커맨드라인 인터페이스다.
개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜 동작을 확인할 수 있다.
터미널이나 커널에서 사용가능하고 명령어를 통해 프로젝트를 생성하거나 컴포넌트, 파이브, 서비스, 클래스, 인터페이스 등의 구성 요소를 추가할 수 있다.
Angular CLI를 위한 별도의 홈페이지가 있다. [ https://cli.angular.io/ ]
Node.js 프로젝트이므로 Node.js가 설치되어 있어야한다. [ Node.js 다운로드 : https://nodejs.org/ko/ ]
[ Angular CLI에 대해 정리되어 있는 블로그에서 제가 필요한 부분만 정리한 것입니다. 자세한 내용은 해당 블로그를 참조해 주세요. https://poiemaweb.com/angular-cli ]
Angular CLI의 명령어?
ng help : Angular CLI의 사용법을 보여준다.
ng new 프로젝트이름 : Angular 프로젝트를 생성한다.
ng serve : <cd 프로젝트이름>으로 프로젝트에 접속 후 해당 명령어를 입력하면 로컬 환경에서 프로젝트를 실행한다.
ng serve --open(혹은 축약형 -o) : 프로젝트를 실행할 때 자동으로 브라우저를 실행시켜 준다.
ng generate ~~ : 프로젝트에 새로운 구성요소를 생성하는 명령어다. 구성요소 생성은 아래에 따로 정리한다.
프로젝트 구성 요소 생성 명령어?
| 생성할 구성요소 | 명령어 | 축약형 |
| 컴포넌트 | ng generate compnent 컴포넌트이름 | ng g c 컴포넌트이름 |
| 디렉티브 | ng generate directive 디렉티브이름 | ng g d 디렉티브이름 |
| 파이프 | ng generate pipe 파이프이름 | ng g p 파이프이름 |
| 서비스 | ng generate service 서비스이름 | ng g s 서비스이름 |
| 모듈 | ng generate module 모듈이름 | ng g m 모듈이름 |
| 가드 | ng generate guard 가드이름 | ng g g 가드이름 |
| 클래스 | ng generate class 클래스이름 | ng g cl 클래스이름 |
| 인터페이스 | ng generate interface 인터페이스이름 | ng g i 인터페이스이름 |
| Enum | ng generate enum 이넘이름 | ng g e 이넘이름 |
- component를 생성하면 4개의 파일이 생성된다.
--first-app.component.html : 컴포넌트 템플릿을 위한 HTML파일
--first-app.component.css : 컴포넌트 템플릿의 스타일링을 위한 CSS파일
--first-app.component.ts : 컴포넌트 클래스 파일
--first-app.component.spec.ts : 컴포넌트 유닛 테스트를 위한 스펙 파일
Angular CLI 프로젝트 빌드?
ng build :
프로젝트 개발을 완료한 이후 배포를 위해서는 빌드를 해야한다.
빌드가 완료되면 프로젝트 루트에 빌드 결과물이 포함된 dist 폴더가 생성된다.
Node.js?
Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.
확장성 있는 네트워크 애플리케이션(서버)을 위해 설계된 플랫폼이므로 서버를 구현하는 경우가 많다.
(런타임이란 프로그래밍 언어가 구동되는 환경이다. 예전에는 JavaScript 런타임이 브라우저 밖에 없었지만, 그러한 한계를 극복하고 Node.js가 나왔다.)
[ 참조 : https://perfectacle.github.io/2017/06/18/what-is-node-js/ ]
Angular의 장점?
1. 컴포넌트 기반
- 기능에 따라 코드를 분리하고 재사용하는 것이 매우 쉽다.
- 각각의 Component 클래스는 자신만의 HTML 컴포넌트에 집중할 수 있기 때문에 웹 화면을 구성하는 컴포넌트간 독립이 명확하다.
2. 웹페이지 속도
- 다른 페이지로의 전환 속도가 매우 빠르다.
(일반적인 웹페이지는 링크를 클릭할 때마다 서버에 새로운 페이지를 요청한다. 그러나 Angular는 클라이언트 측에서 화면을 생성하고 필요한 데이터만 Ajax 요청을 통해 서버에서 내려받기 때문에 네트워크에 의한 딜레이가 적다.)
3. 프레임워크
- 프론트엔드 웹 개발을 위한 종합 프레임워크이므로 전체를 아우르는 구조를 제공한다.
Angular의 단점?
1. 학습분량 : 주력언어가 TypeScript이므로 이를 익혀야 한다. 또, Angular가 지니고 있는 여러 개념들과 그 개념들의 TypeScript로 표현되는 방법도 익혀야한다.
2. 초기 로딩속도 : 느린편이다. 성능이 좋은 컴퓨터는 큰 문제가 아니지만, 그런게 아니라면 1초 이상 걸리기도 한다. 그러나 초기화면 로딩 속도가 느릴 뿐, 이후의 웹페이지 내에서의 이동 속도는 매우 빠르다.
3. 검색엔진 인덱싱 : Angular로 만든 SPA를 제대로 인덱싱하지 못하는 크롤러가 생각보다 많다. SPA를 포기하고 서버측에서 렌더링 할 수 있게 해주는 Angular Universial를 사용하는 것도 방법이지만, 이러한 방법을 사용하면 Angular를 사용해서 얻는 이점이 적어질 수 있다.
Angular의 주요개념?
- 컴포넌트 : 재사용 가능한 단위이다. 프론트엔드 프레임워크인 Angular는 View를 만드는 것이 주된 목적이므로, 최종적으로 완성되는 전체 View를 쪼개서 부분적으로 재사용할 수 있는 단위가 필요하다. 이것이 Component다. 하나의 전체적인 View는 세부적으로 Component로 쪼개지고, 이 쪼개진 Component들의 관계가 Tree 형태를 만들게 된다. 이것은 Component Tree라고 한다. Component Tree의 최상단을 Root Component라고 한다.
- 템플릿 : Component는 View를 렌더링하는 주체가 되기 때문에, 어떻게 View를 렌더링해야 하는지에 대한 정보를 가지고 있어야 한다. 이 정보를 Template이라고 한다. Template은 렌더링에 필요한 HTML 요소와 Angular 문법요소 그리고 클라이언트에 의해 발생하는 이벤트 처리 코드를 가지고 있다.
- 데코레이터 및 메타데이터 : Angular의 경우 TypeScript를 주 언어로 사용하기 때문에 코드 기반이 클래스이다. 그래서 Component 정의도 클래스로 하게 되는데, Angular는 프레임워크이기 때문에 특정 클래스가 일반 클래스인지 아니면 프레임워크의 어느 부분을 담당하는 클래스인지 표시할 필요가 있다. 이 역할을 하는 것이 Decorator이다. 클래스에 특정 Decorator를 선언함으로써 Angular가 해당 클래스의 역할을 지정하게 된다. 또한 이 Decorator에 데이터를 추가하여 세부적으로 설정할 수 있는데 이 데이터를 Metadata라고 한다. 이러한 Decorator 역할은 Spring Framework의 Annotation과 비슷하다.
- 모듈 : Module은 Angular 애플리케이션을 구성하는 단위로서 관련된 요소들을 하나로 묶어 놓은 것이다. Angular의 경우, Module 단위로 애플리케이션 코드를 인식하므로 모든 Angular 애플리케이션은 반드시 하나 이상의 Module을 가지게 된다. Module 또한 Tree 형태로 구성되고, 최상단에 위치한 Module을 Root Module이라고 한다.
- 데이터 바인딩 : View와 Component에서 발생한 데이터의 변경 사항을 자동으로 일치시키는 Angular의 기능이다. 방법에 따라 Two-Way(양방향), One-Way(단방향, component->view / view->component)로 분류된다. 세 가지 방식으로 가능하다.
- 서비스 : Component에서 View를 처리하는 로직 이외의 로직은 따로 분리한다는 개념이다. 일반적인 MVC 패턴에서 볼 수 있는 Service의 개념과 비슷하다. Component는 View를 표현하고 처리하는 것이 목적이므로, Component 안에 다른 관심사가 존재하면 Component의 독립성이 보장되지 못하고 중복코드가 발생하게 되므로 코드의 재사용과 유지보수가 힘들어진다. 이런 문제를 해결하기 위해 Component 내의 관심 로직 이외의 로직은 Service로 분리하여 따로 작성한다. Component 내에 Service 작성시 강한 의존관계(Dependency Relationship)가 형성되는 것을 막기 위해 Dependency Injection(DI)패턴을 사용한다. DI 패턴에는 일반적으로 Constructor를 이용하는 방법과 Setter를 이용하는 방법이 있다. Angular의 경우 Constructor Injection을 지원한다. 쉽게 말해 Component가 직접 Service를 new keyword를 이용하여 생성하는 것이 아니라, Angular Framework의 Component가 사용할 수 있도록 Service 객체를 생성해서 Component에게 넣어주는 방식이다. 이 방식을 Inversion of Control (IoC)라고 하고, Angular Framework는 IoC Container이다.
- 디렉티브 : DOM의 모양이나 동작을 지시하기 위한 명령이라고 할 수 있다. 보통 HTML Element 형태로 표현하거나, Element의 속성 형태로 표현한다. 예를 들면, AngularJS에서의 ngIf와 같은 역할이다. DOM을 제어하는 방법으로는 Directive 외에 Component도 있지만, 이 둘을 분리한 이유는 Component는 원칙적으로 자신이 렌더링하는 View에 대해서만 관심이 있다. 그러므로, 여러 View들이 공통적으로 사용하는 Element나 Element의 속성 같은 것들은 따로 Directive로 표현하는 것이 객체지향 설계의 단일책임원칙(SRP)에 위배되지 않고, Component의 복잡도를 낮출 수 있으며, 유지보수와 같은 관리적인 측면에서도 더 나은 형태로 구현할 수 있다. 크게 아래의 4가지 종류로 분류된다.
--Component Directive : Component의 selector에서 직접 지정해 사용하는 디렉티브다.
--Attribute Directive : HTML Element의 속성으로 표현된다. built-in 형태로는 ngClass 등이 있다.
--Structural Directive : DOM의 구성을 제어하기 위한 디렉티브로 built-in 형태로는 ngIf, ngFor, ngSwitch 등이 있다.
--Custom Directive : built-in 형태로 만들어진 것이 아닌 직접 만들어서 사용하는 Directive이다.
- 파이프 : Template 내에서 출력하고자 하는 데이터를 원하는 형식으로 변환하여 출력하는 기능이다. 원본 데이터에는 변형을 가하지 않은 상태로 출력 형태만 변경해 주기 때문에 원치 않은 Side Effect를 없앨 수 있다.
<{{today | date : 'M월 d일'}}>
[ 참조 : https://helloworld-88.tistory.com/36 ]