Coding Log


Angular Framework 포스팅을 하기 전에

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

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

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

참고 Angular 공식 사이트

Angular 아키텍쳐

dasf

위의 그림은 Angular의 전체적인 아키텍쳐다.

Angular는 Component(컴포넌트) 를 중심으로 개발하며 컴포넌트는 Template(템플릿) 과 Class(클래스) 로 구성된다.

Template(템플릿)

템플릿은 컴포넌트의 UI 즉 보이는 화면을 나타내며, 이 UI는 별도의 Virtual DOM에 저장된다.

참고 DOM 은 Document Object Model의 약자로 객체 지향 모델로써 구조화된 문서를 표현하는 형식을 말한다.

각 컴포넌트마다 Virtual DOM을 이용하므로 컴포넌트간 스타일에 특별한 영향을 받지 않는 것이 특징이다.

템플릿은 Declarative Templating 방식으로 Directive(지시자) 와 템플릿 문법을 활용하여 개발한다.

Class(클래스)

클래스는 컴포넌트의 로직을 관리하며 템플릿과는 바인딩을 통해 연결된다.

바인딩은 템플릿에서 클래스로 이벤트를 전달하거나 템플릿과 클래스 사이에서 데이터를 교환할 수 있게 해준다.

만약 구성요소가 동일한 변수로 바인딩하고 있다면 특정 엘리먼트들의 상태를 변경하기 위해 모든 엘리먼트에 접근하여 데이터를 변경할 필요없이 구성요소 중 하나의 값만 변경되어도 모든 엘리먼트의 데이터를 변경할 수 있다.

참고 위와 같은 기능을 변화 감지 (Change Detection)이라 한다.

Routing(라우팅)

컴포넌트는 자식 컴포넌트를 포함하거나 다른 컴포넌트로 URL을 라우팅할 수 있다.

컴포넌트마다 라우팅할 URL 주소를 할당할 수 있으며 특정 컴포넌트 A에서 B로 전환이 가능하다.

자식 컴포넌트를 포함하는 경우 자식 컴포넌트의 Directive(지시자)를 현재 컴포넌트의 템플릿에 입력하는 방식으로 처리한다.

Module(모듈)

컴포넌트는 라이브러리와 같은 프로젝트 외부로부터 기능을 추가하거나 중복을 줄일 수 있다.

이때 기능을 추가하는 방법으로 모듈을 이용하며, Angular Framework 자체에서 제공하는 내장 모듈과 외부의 커스텀 모듈로 구분할 수 있다.

Service(서비스)

중복해서 렌더링하는 경우가 많은 컴포넌트의 경우 중복 로직 코드를 최소화하기위해 서비스를 외부에 작성한다.

서비스는 DI를 통해 컴포넌트에 주입할 수 있으며, 이를 통해 서비스 클래스를 객체화시켜 특정 클래스에게 제공한다.

참고 DI : Dependency Injection, 의존성 주입


본 포스팅에선 아키텍쳐의 구성요소를 살펴보았다. 다음 포스팅에선 이 구성요소들을 좀 더 자세히 알아보도록 한다.

DISQUS 로드 중…
댓글 로드 중…

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

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