TIL_171107 Angular의 구조와 원리

Angular

  • 앵귤러는 컴포넌트, 파이프, 서비스등으로 구성된 모듈의 집합으로, 하나의 어플리케이션을 만들 수 있는 프레임워크
  • 뷰와 자바스크립트가 상태 공유 (서로의 변화를 자동으로 감지)할 수 있어야 자바스크립트가 뷰를 컨트롤 할 수 있음
  • 이러한 역할, 변화감지를 자동화해주는 것이 앵귤러
    • 방향1: 뷰에서 입력되는 상태 -> 자바스크립트가 알고 동작하게
    • 방향2: 자바스크립트에서 변경된 상태 -> 뷰에서 표현되게
  1. 컴포넌트 기반 개발
    • 로직뿐만 아니라 뷰의 부품화까지 가능
  2. TypeScript
    • 다양한 도구 지원의 가능
    • 컴파일 단계에서 에러 검출 가능
  3. Angular CLI
    • 개발환경 구축 자동화 (서버까지)
      ```shell
      // Angular CLI 설치하기
      $ npm install -g @angular/cli

// 프로젝트 폴더 생성 (스캐폴딩됨)
$ ng new

// 컴포넌트 생성시 폴더 구성 조정하며 한번에 만들기 (.ts / .html / .css / .spec.ts)
$ ng new my-app -it -is -spec false -flat
$ ng new my-app -it -is -skip-tests

  1. [-it] .html 템플릿 안생기게
  2. [-is] .css 스타일 안생기게
  3. [-spec false] spec.ts 안생기게
  4. [-flat] 폴더 구성X -> 파일로

// 구동시키기 & 오픈
$ ng serve -o

// 포트 겹칠 시, 포트 바꾸기
$ ng serve –port 4201

// 배포
$ ng build
c

[참고] 앵귤러 명칭

  • 파일명은 케밥케이스로
  • 클래스명은 카멜케이스로

Angular 동작 흐름

  1. index.html에 5개의 리소스만이 포함
    1) inline.bundle.js
    Webpack 유틸리티가 포함된 Webpack loader
    2) polifills.bundle.js
    polyfill 의존성 모듈(core-js, zone.js)을 번들링한 파일
    3) styles.bundle.js
    스타일 정의를 번들링한 파일
    4) vendor.bundle.js
    Angular 의존성 모듈(@angular/*, RxJS)을 번들링한 파일
    5) main.bundle.js
    개발자가 작성한 컴포넌트, 디렉티브, 서비스 등 소스코드를 번들링한 파일

  2. 이 5개 자바스크립트 리소스가 모든 페이지에 관련한 html, css, javascript 정보를 내포

  3. 로딩 시, 서버로 부터 모든 정보를 받아오기 때문에 첫 로딩 시 상대적으로 소요

  4. 로딩 시, (5)main.bundle.js가 angular-cli 설정파일을 봄

  5. angular-cli.json에 메인에 쓰여있는 설정인 main.ts를 가동
  6. main.ts를 구동시켜야 루트모듈이 기동됨
  7. 루트모듈은 루트 컴포넌트를 기동시킴 (부트스트랩)
  8. index.html에 심어놓은 커스텀 코드가 html로 대체된다

Angular의 핵심요소

핵심요소-1. 컴포넌트 (Component)

  • 화면을 구성하는 뷰(view)를 생성하고 관리하는 역할
  • 1개의 화면은 1개 이사의 컴포넌트를 조립하여 구성
  • 3가지 요소로 구성 (템플릿, 메타데이터, 컴포넌트 클래스)

1. import

2. @Component (데코레이터)

  • 새로운 커스텀 태그를 만듬
  • 장식하고자 하는 클래스 바로 위에 위치
  • export의 클래스를 컴포넌트화 하는데에 필요한 설정정보를 기록
  • 이러한 설정정보를 메타데이터 라 함
    1) selector : ‘접두사-명칭’
    • 기본적으로 접두사를 붙여, 중복을 회피
      2) templateUrl : ‘html파일 경로’
      3) styleUrls : [‘css경로’]
    • css파일은 여러개 올수있기 때문에 배열형태
    • template에 적은 html파일에만 적용됨 (전역x, 스코프 분리)

      3. export class

  • html과 연동하여 DOM에 조작할 부분을 변수로
  • 컴포넌트화 될 클래스

핵심요소-2. 디렉티브 (Directive)

  • 각각의 컴포넌트에서 사용되는 공통된 템플릿을 별도로 분리해 놓은것 -> 전역관심사 분리
  • DOM의 표현이나 구조 변경 가능
  • 구조 디렉티브(Structural directive)
  • 어트리뷰트 디렉티브(Attribute directive)
  • 커스텀 디렉티브(Cunstom directive)

핵심요소-3. 서비스 (Service)

  • 각각의 컴포넌트에서 사용되는 공통된 컴포넌트 클래스(컴포넌트 구성요소 중 하나)를 별도로 분리해 놓은 것 -> 전역관심사 분리
  • 즉, 다양한 목적의 애플리케이션 공통 로직을 담당
  • 서버와의 연동

핵심요소-4. 라우터(Router)

  • 컴포넌트를 교체하는 방법
  • 뷰를 전환하여 화면간 이동을 구현

핵심요소-5. 모듈 (NgModule)

  • 기능적으로 관련된 구성요소(컴포넌트, 디렉티브, 파이프, 서비스)를 하나의 단위로 묶는 메커니즘
  • 모듈은 관련이 있는 기능을 응집 -> 블록으로 애플리케이션을 구성하는 하나의 단위를 만듬
  • Angular는 여러 모듈들을 조합하여 애플리케이션을 구성
  • 모듈에 등록되어야만 컴포넌트, 디렉티브, 파이프, 서비스 등의 Angular 구성요소 이용이 가능

파이프란 ?
원본을 건들지 않고 그것을 필터링 해주는 역할