Angular

목적

백엔드 개발자라고 할지라도, 프론트엔드의 가장 트렌드 기술의 최소한의 구동원리는 알고 있어야 팀프로젝트의 View를 자연스럽게 익힐 수 있을 것이라고 판단해서 정리했다.

Angular란?

앵귤러(Angular)는 클라이언트 (웹) 애플리케이션을 개발을 위해 만들어진 프레임워크이다.

즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 프레임워크로 볼 수 있다.

앵귤러(Angular)는 두가지 서로 다른 버전이 존재한다 바로 Angular.js와 Angular 이다.
이름만 들었을때는 같은것이라 생각할 수 있지만 구버전 버전2 이상은 Angular라고 명명한다.
두 버전의 가장 큰 차이점은 TypeScript 기반으로 하는 신버전과 JavaScript 기반으로 동작하는 구버전 AngularJS 이다.

신버전 Angular / 구버전 AngularJS

Angular는 Google에서 만든 SPA(singule page application) 방식의 프론트엔드 개발을 위한 JS 프레임워크이다.

웹 어플리케이션은 물론 모바일 웹, 네이티브 모바일과 데스크탑 어플리케이션까지 프론트 엔드 개발에 필요한 대부분의 기능을 탑재했다.

React의 필요성

1. Javascript 코드량 감소

• MVC 제공과 양방향 바인딩 제공

2. 재사용 가능한 UI 컴포넌트 작성 가능

• Dirctive를 이용한 HTML태그 확장 기능을 제공

3. 의존관계 주입

4. JQuery 지원

5. Google의 지원

Angular의 장점

Angular는 SPA(Single Page Application)방식의 프론트엔드 개발을 위한 프레임워크이므로,
웹 어플리케이션은 물론 모바일 웹, 네이티브 모바일과 데스크탑 어플리케이션까지 개발에 필요한 대부분의 기능을 탑재했다.

가장 큰 장점은,
컴포넌트 기반의 기능에 따라 코드 분리와 재사용성이 증가합니다.
SPA 특성상 네트워크에 의한 딜레이가 적어 다른 웹페이지로의 전환이 빠르다.

Angular의 단점

Angular 버전 2 이상은 TypeScript가 주 언어인데 TypeScript의 학습량이 많이 요구되며,
TypeScript뿐 아니라 Angular가 가지고 있는 여러 개념과 TS사이의 연결된 표현도 익혀야 하며
어느정도 숙련성을 요구한다.
SPA 특성의 단점으로는 초반 딜레이 시간이 느린편이며 이후 웹페이지 전환 시에는 빠르게 이동하는 점이 있다.

SPA란 Single Page Application의 약자이다.
단일 페이지 어플리케이션(SPA)는 현재 웹개발의 트랜드이다.
기존 웹 서비스는 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식이다.
SPA형태는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만
Ajax를 통해 데이터를 바인딩하는 방식이다.

Angular의 특징

• 완전한 프레임 워크로, 프로젝트의 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공합니다.
• TypeScript를 사용합니다. 초기에는 JavaScript로도 할 수 있다고 광고했지만 사실상 과대광고라고 생각됩니다.
• Angular CLI를 제공하여 개발환경을 지원합니다. 파일 생성, 빌드, 패키징, 라이트 서버 기능 등 개발에 필요한 거의 모든 기능을 자체적으로 제공합니다.
• 모듈과 컴포넌트 기반으로 동작합니다.
• 웬만한 기능의 라이브러리는 모두 포함시켜서 자체적으로 제공합니다. (라우팅, HTTP, Form 등등)
• 기본적으로는 단일 페이지 애플리케이션 (SPA, Single Page Application) 개발을 위한 프레임워크입니다. 다만, Server Side Rendering을 위한 기능을 구비하고 있습니다.

1. Angular Module(NgModule)

Angular 는 JS모듈과 다르지만 서로 보완할 수 잇는 ngMoule체계를 마련해 두었다.
ngModule은 기능적으로 관련되거나 작업 흐름이 연관된 컴포넌트를 묶어서 선언하고,

ngmodule에는 컴포넌트 외에 서비스나 폼 기능을 포함하기도 한다.
모든 Angular 앱에는 보통 AppModule이라는 이름으로 선언하는 최상위 모듈이 존재한다.
애플리케이션의 부트스트랩 방법은 이 모듈에서 지정하며, 이 모듈 아래로 여러 기능 모듈을 포함할 수 있다.

JavaScript 모듈과 비슷하게 NgModule도 다른 NgModule을 불러오거나 다른 NgModule을 위해 모듈의 기능 일부를 외부로 공개할 수 있다.

Ex) 애플리케이션에서 라우터 서비스를 사용하려면 router NgModule을 불러와야 한다.
비슷한 코드를 하나의 기능 모듈로 관리하면 코드를 더 효율적으로 관리할 수 있다.
이렇게 만든 모듈은 코드를 재사용하는 측면에서도 더 효율적이며, 복잡한 애플리케이션을 개발할수록 체감할 수 있는 효율이 증가한다.

그리고 코드를 모듈로 관리하면 애플리케이션이 실행될 때 모든 모듈을 한 번에 불러오지 않고, 필요할 때 불러오는 지연 로딩 을 활용할 때도 유리하다.

지연 로딩을 활용하면 애플리케이션의 초기 실행 속도를 최소화할 수 있다.

2. Component 기반 구조

@Component({
	selector: 'app-bms-cleansing',
    templateUrl:'./bms-cleansing.component.html',
    styleUels: ['./bms-cleansing.component.css']
    })

Angular 애플리케이션에는 페이지 DOM의 최상위에 위치하는 컴포넌트가 존재하는데, 이 컴포넌트를 최상위 컴포넌트 라고 한다.

그리고 모든 컴포넌트는 컴포넌트 클래스와 템플릿으로 구성하는데, 컴포넌트 클래스는 애플리케이션 데이터와 로직을 처리하고 템플릿은 화면에 표시할 HTML을 정의한다.

Angular 컴포넌트는 컴포넌트 클래스에 @Component() 데코레이터를 사용해서 컴포넌트에 대한 메타데이터를 지정하면서 템플릿도 함께 지정한다.

3. Angular Temple

템플릿은 HTML 문법과 Angular 마크업 문법을 조합해서 구성한다. Angular 마크업 문법은 HTML 엘리먼트를 확장하는 역할을 한다.

Component는 View 를 렌더링하는 주체가 되기 때문에 어떻게 View를 렌더링해야 하는지에 대한 정보를 가지고 있어야 한다.

Template은 렌더링에 필요한 HTML 요소와 Angular 문법요소, 클라이언트에 의해 발생하는 이벤트 처리 코드를 가지고 있다.

References (참고 자료)

• https://coding-start.tistory.com/214?category=811388
• https://ko.wikipedia.org/wiki/AngularJS