Angular 개요 요약 정리 (Angular 12 시작하기 전 개념정리)

 

 

SPA( Single Page Application ) 프레임워크이자 React나 Vue의 근원이된
Angular 프레임워크에대해 간단하게 처음쉽게 접근하며 공부하게 정리해보았습니다.

 

생각한것보다 Angular.Io가 불친절하여서 이곳저곳 찾아다니며 정리하였습니다.

저도 공부 2일차라서 제대로 정리되지 않은 부분이 있고 또한 많은 내용중에 필요했던 부분들을 요약정리한 것이기에

기초 개념정리 느낌으로 훓어보시고 참고자료 링크를 통해 세부사항을 보시면 도움되실 것 같습니다.

 

 

👨‍🏫참고자료

---

 

angular.io (Angular 문서)

poiemaweb.com(모던 자바스크립트)

 

 

 

정의

---

⭐Angular는 HTML과 TypeScript로 클라이언트 애플리케이션을 개발할 때 사용하는 플랫폼이고 프레임 워크입니다.

• Angular 애플리케이션의 구성 요소 중 가장 중요한 부분은 **"컴포넌트"**의 묶음인 **"NgModule"**입니다.
  ( ☝️ NgModule이란 비슷한 기능을 하나로 묶어서 관리하기 위한 모듈입니다.)
  
  
• Angular 애플리케이션은 bootstrap` 을 하기 위하여 최상위 모듈을 꼭 가지고 있습니다.
  ( ☝️여기서 말하는 bootstrap이란 애플리케이션이나 시스템을 초기화하고 실행하는 것을 의미합니다.)
  
  
• 보통 최상위 모듈 이외에 기능 모듈을 정의하여 사용하게 됩니다.
  • 컴포넌트: 화면에 어떤 엘리먼트가 어떤 데이터를 표시할지 view로 정의한다.
• Angular 애플리케이션에서는 여러가지 View를 계층으로 구성합니다.
  
  
• "Router" 서비스를 사용하면 View들을 전환 하면서 페이지를 이동할 수 있습니다.
  
  
  

모듈

---

 

⭐Angular에서는 NgModule이라는 모듈체계를 제공하고 구성됩니다.

• NgModule은 애플리케이션 도메인, 작업의 흐름, 기능이 연관되어있는 구성요소들을 묶어놓은 단위를 뜻합니다.

 

• NgModule에는 컴포넌트,서비스 프로바이더등이 포함될수 있고, 일부를 외부에 공개하거나 가져와서 사용할 수 있습니다.

 

• Angular의 모든 애플리케이션은 최상위 모듈이 무조건 존재하며, app.module.ts 파일에 AppModule이라고 정의합니다.

 

• AppModule의 자식계층으로 기능모듈을 생성하여 구성되어집니다.

 

<세부사항 추가예정>

 

 

 

컴포넌트

---

⭐Angular에서의 컴포넌트란 애플리케이션을 구성하는 기본단위이며 핵심 구성요소로 애플리케이션의 중심(Component Based Development)로 구성됩니다. 컴포넌트는 애플리케이션의 화면을 구성하는 View(뷰)를 제어합니다.

• 컴포넌트의 구성요소
  • 화면을 렌더링하는 HTML 템플릿
  • TypeScript를 이용하여 동작을 정의내린다.
  • 컴포넌트를 템플릿에 추가할때 사용하는 CSS selector
  • 컴포넌트가 표시되는 모습을 정의하는 CSS Style
  • Angular CLI로 컴포넌트를 생성하면 아래와 같은 파일들이 먼저 생성된다.
    (AppModule이 최상위이기에 app.component가 만들어진다.)

  //app.component.ts
  import { Component } from '@angular/core';
  
  @Component({
  //CSS 셀렉터
    selector: 'app-root',
  //HTML템플릿을 정의
    templateUrl: './app.component.html',
  //컴포넌트 템플릿에 지정될 스타일파일
    styleUrls: ['./app.component.css']
  })
  //컴포넌트 클래스를 정의하는 class구문
  export class AppComponent {
  }​

  
  
  
• 컴포넌트 트리
  • 컴포넌트는 재사용이 용이한 구조로 분할하여 조립하여 중복없는 UI를 생성할 수있다.
    

    

  • 위와같은 블록구조를 컴포넌트형태로 변경하면 아래와 같이 DOM 트리와 비슷한 구조를 갖게된다.
    

    

템플릿

---

1. 템플릿 설명

 

⭐Angular에서 템플릿(Template)은 HTML 뭉치(chunk)를 이야기합니다. Angular 템플릿에는 Angular의 기능을 활용할 수 있는 특별한 문법을 사용할 수 있습니다.

 

• 템플릿 은 HTML문법과 비슷하며 애플리케이션이나 DOM 데이터에 따라 HTML을 조작하면서 뷰를 원하는대로 표시합니다.

 

• 템플릿은 애플리케이션 데이터나 DOM 데이터를 데이터 바인딩해서 출력할 수 있고 scope를 이용해 원하는 형식으로 표현할 수 있다.

 

(데이터 바인딩 이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다.)

 

---

   2. 데이터 바인딩

---

---

    3. 디렉티브(Directive)종류

---

• Component Directive : 일반적인 Component를 의미한다. selector에서 지정하여사용
  
  
• Attribute Directive : HTML Elemet의 Attribute로 사용되는데 built-in 형태로는 "ngClass" 같은 것이 있다.
  
  
• Structural Directive : DOM의 구성을 제어하기 위한 directive로"ngIf", "ngFor", "ngSwitch" 등이 있습니다.
  (JAVA 진영의 개발을 해보신 분이라면 한번 씩 보신 JSTL과 거의 동일하게 사용되는 느낌)
  
  
• Custom Directive : built-in 형태로 만들어진 directive가 아닌 직접 만들어서 사용하는 directive를 지칭합니다.
  
  
  
  

Structual Directive 사용 예시

---

<div *ngFor="let product of products"> <!-- products라는 List에서 객체를 하나씩  product에 주입후 출력 -->

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name}}
    </a>
  </h3>

  <p *ngIf="product.description">  <!-- 만약 product에 description을 가지고 있다면 출력 -->
    Description : {{ product.description }}
  </p>
</div>

🔻 결과화면     (빨간색 표기 는 product.name 파란색 표기 는 product.desciption)

• 위 사진처럼 상품의 설명에 해당하는 프로퍼티가 존재하지 않으면 Angular는 해당 <p>엘리먼트를 생성 하지않습니다.

 

 

 

 

**서비스, 의존성 주입**

---

💡 Angular에서 서비스는 앱에서 공통으로 사용하는 상수, 함수 기능을 모아놓은 단위를 지칭합니다.

• Angular에서는 컴포넌트와 서비스를 구분하여 **모듈화와 재사용 효율성을 높이는것**을 권장한다.
  
  
• 애플리케이션 공통관심사를 서비스로 분리하면서 구성요소마다 자신의 관심사에 집중하여 **독립성이 보장된 코드**를 작성할수 있다.
  
  
• 컴포넌트는 템플릿이 렌더링된 뷰와 모델을 정의하는 **애플리케이션 로직만을 중개**하는것을 권장한다.
  
  
• 서버에서 데이터를 가져오는 로직, 사용자의 입력을 검증하는로직, 콘솔에 로그를 출력하는 로직은 서비스가 중개하는것을 권장한다.
  
  
  

💡 Angular에서 의존성주입(Dependency Injection,DI)는 서비스와 같은 객체를 Angular프레임워크와 묶는개념으로 의존관계를 긴밀한결함에서 느슨한 결합으로 의존 관계를 전환하기 위해 구성요소간의 의존 관계를 코드 내부가아닌 외부의 설정함으로 정의하는 디자인패턴이다.

• Angular에서는 의존성 주입을 프레임워크에서 지원하는데 애플리케이션이 직접 인스턴스를 생성하는 것이 아니라 Angular프레임워크에게 의존성 인스턴스를 요구하고 생성한 인스턴스를 전달받아서 사용하는 방식이다.

• 의존성 주입을 사용하면 컴포넌트는 필요한 의존성을 요구하고 프레임워크에서 제어권을 갖는 주체로 동작하여 요구된 의존성 인스턴스를 생성하여 전달하는데 이를 제어의 역전(Inversion of Control,IOC) 이라고한다

• 주입될 의존성 인스턴스 생성정보를 Angular에 알려 주입을 지시하여야하는데, 인스턴스 생성정보를 설정하여 의존성 인스턴스에대해 주입을 지시하는것을 프로바이더(Provider)라고 한다.
  ( ☝️ 프로바이더는 의존성으로 주입되는 객체를 어떻게 만드는지 정의한것)

• Angular에 정의하는 서비스 클래스는 @Injectable() 데코레이터를 사용하여 메타데이터를 지정하고, 메타데이터는 Angular가 서비스를 컴포넌트에 의존성으로 주입 할때 활용됩니다.

 

( ☝️ 의존성 객체가 서비스만 가능한 것은 아니고. 함수나 기본 자료형도 의존성 객체가 될 수 있다.)

 

 

 

 

**라우팅**

 

---

( ☝️ 라우팅 즉 화면을 전환함에 있어 웹애플리케이션은 URL문자열을 변경하며 원격 서버에 접근하는 방식으로 접근하였습니다.)

💡 Angular의 경우 SPA (Single Page Application)방식의 앱을 사용하는 프레임워크이기에 화면전환을 위해서는 서버로 이동하는데신 특정 구성요소에 해당하는 디스플레이 부분을 표시하거나 숨기면서 사용자에게 보여주는 내용을 변경합니다.

• Angular에서 제공하는 Router NgModule을 사용하여 네비게이션 주소를 전환하면서 애플리케이션 상태를 변경할 수 있습니다.

• Angular에서 라우터는 페이지 대신 View를 URL과 맵핑시켜 새로운 페이지로 전환하는것이 아니라 라우터에서 View만을 불러와 전환됩니다.

• 로드가 되지 않은 모듈에 있는 페이지로 전환될때에는 라우터가 지연로딩을 사용하여 모듈을 불러오고 난 이후 View를 전환합니다.

• 라우터는 브라우저의 히스토리에 로그를 저장하며, 이 로그를 활용하여 뒤로 가기와 앞으로 가기 버튼에도 반응 할 수 있습니다.