Coding Log

003. 구성 요소

2017.10.20 00:06 - NamhoonKim NE_Leader


Angular Framework 포스팅을 하기 전에

본 카테고리는 구글에서만든 javascript framework인 Angular에 대해 작성한다.

Typescript나 Dart로 개발할 수 있으며 본 블로그의 포스팅에서는 Typescript를 이용해 작성하도록 하겠다.

튜토리얼은 공식 홈페이지에 잘 나와있다.

참고 Angular 공식 사이트

구성요소

앞선 포스팅에서 설명했듯 Angular기반의 Application을 구성요소는 크게 4가지로 나눌 수 있으며 종류는 아래와 같다.

  • Component(컴포넌트)
  • Module(모듈)
  • Service(서비스)
  • Directive(지시자)

하나씩 상세한 내용을 알아보도록 하자.

Component(컴포넌트)

컴포넌트는 Angular Framework의 가장 핵심이 되는 부분이다.

기존 AngularJS에서 템플릿/지시자/컨트롤러를 중심으로 개발해왔다면 Angular에서는 템플릿/지시자/컨트롤러를 하나로 합친 컴포넌트로 애플리케이션을 개발한다.

이 컴포넌트는 크게 지시자, 템플릿, 클래스로 나뉜다. 아래의 코드를 통해 컴포넌트의 구조를 파악하자.

import { Component } from '@angular/core';

@Component({
    selector: 'coding-log-component',
    template: '{{message}}'
})

export class CodingLogComponent {
  message: string = "Hello World!";
}

컴포넌트는 @Component 라는 데코레이터를 이용해 정의할 수 있다.

위의 코드에서 selector 속성에 컴포넌트의 지시자를 지정하며, template 속성에는 해당 컴포넌트의 UI를 지정한다.

하단에 위치한 class 에 해당 컴포넌트에서 사용할 로직을 작성하면 된다,.

위의 템플릿과 클래스는 바인딩을 통해 데이터를 교환하게 되며, 코드를 실행하게 되면 class에 선언된 message 변수가 템플릿의 {{message}}에 바인딩되게 된다.

지시자인 coding-log-component가 선언된 위치에 템플릿의 내용이 출력되므로 결과적으로 Hello World! 라는 텍스트가 출력되게 된다.

각 컴포넌트는 바인딩을 통해 개별적으로 동작하는 것이 아닌 주입된 모듈이나 서비스, 지시자와 함께 동작하게 된다.

Module(모듈)

Angular는 수많은 모듈로 구성되어 있으며 앞서 언급했듯 모듈은 내장 모듈과 커스텀 모듈로 나뉜다.

Angular는 ES6 모듈 시스템을 기반으로 모듈의 정의, 호출 등을 지원하며 아래와 같은 코드를 통해 모듈을 외부에서 접근할 수 있도록 처리한다.

export class MODULE_NAME {}

위의 코드를 통해 외부에서 접근할 수 있게 처리된 특정 모듈은 아래와 같은 코드로 접근할 수 있다.

import { MODULE_NAME } from 'MODULE_PATH';

Angular의 모듈을 좀 더 체계적으로 작성하는 법을 알아보자.

클래스 선언부 위에 데코레이터를 추가하여 모듈을 작성할 수 있다.

모든 Angular 포스팅에서 그랬듯 컴포넌트는 Angular의 핵심이며, 이 컴포넌트를 작성하는 과정도, 컴포넌트를 바탕으로 모듈을 구성하는 과정도 복잡하다.

아래 코드를 통해 다시 한 번 알아보자.

@NgModule({
  imports: [
    // Angular Module,
    // Routing Module,
    // ...
  ],
  decorations: [
    // Component,
    // Directive,
    // Pipe,
    // ...
  ],
  providers: [
    // Service Module,
    // ...
  ],
  // ...
})

export class CodingLogModule { }

위의 코드를 통해 다시 한 번 모듈에 대해 파악해보자.

위와 같은 체계를 Angular의 모듈 시스템이라 하는데, 컴포넌트, 지시자, 파이프와 같은 모듈들을 통합적으로 관리할 수 있게 해준다.

또한 애플리케이션의 규모가 커지게 되더라도 루트 모듈과 하위 모듈을 구성하여 좀 더 체계적으로 모듈을 사용할 수 있게 도와준다.

나중에 별도의 포스팅으로 좀 더 자세히 알아보도록 하자.

Service(서비스)

서비스는 특정 로직을 재사용할 수 있도록 컴포넌트의 외부에 정의한다.

즉 컴포넌트와 직접적으로 연관이 없는 로직의 경우 서비스를 통해 정의하고 @Injectable 데코레이터를 통해 서비스임을 선언할 수 있다.

아래 예시 코드를 보자.

import { Injectable } from '@angular/core';

export class CodingLogService {}

서비스를 이용하면 컴포넌트 내부의 중복 로직을 제거할 수 있는 장점이 있다.

Directive(지시자)

Angular는 명령형 보다는 선언형 프로그래밍을 권장하는 프레임워크다.

이 말은 지시자를 이용해 개발하는 것을 권장하는 프레임워크라는 것이며, 이 지시자를 통해 컴포넌트 내부에 있는 템플릿의 속성값등을 바꿀 수 있다.

아래 예시 코드를 보자.

@Component({
  selector: 'coding-log-component',
  template: '<div codingLogStyle></div>'
})

위의 코드에서 지시자는 CodingLogStyle이라는 이름으로 표현되고 있다.

이 지시자를 이용하면 게시판과 같은 동일한 형태의 UI를 일일이 그리는 것이 아니라 따로 로직을 분리해서 반복적으로 출력할 수 있다.

그 이유는 지시자는 화면을 렌더링할 때 필요한 기능을 외부 모듈로 분리해서 정의할 수 있기때문이다.

아래 코드는 @Directive 데코레이터를 이용해 지시자를 정의한 모습이다.

import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector: '[CodingLogStyle]'
})

export class CodingLogStyleDirective {
  constructor(private element: ElementRef, private renderer: Renderer) {
    // ...
  }
  // ...
}

위처럼 사용자가 직접 커스터마이징한 지시자를 작성하여 사용할 수도 있다.

참고 이해를 돕기위해 지시자 라고 표현하였으나 앞으로는 Directive 라고 표현하겠다.


DISQUS 로드 중…
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다