내용으로 건너뛰기
Angular 구성 요소 아키텍처가 쉬워졌습니다.

Angular 구성 요소 아키텍처가 쉬워졌습니다.

Infragistics: Angular (이전의 Angular 2)은 Angular JS (이전의 Angular 1)에서 크게 벗어났음을 나타냅니다. Angular JS는 모델과 뷰 간의 상호 작용을 제어하는 컨트롤러에 주로 의존하는 보다 전통적인 MVC 아키텍처를 사용했지만 Angular는 보다 독립적이고 구성 가능한 구성 가능한 구성 요소 기반 접근 방식을 취했습니다.

7min read

JS가 취한 접근 방식에 반드시 잘못된 것은 없었지만 Angular에서 채택한 구성 요소 기반 아키텍처는 다양한 배경의 개발자가 쉽게 이해하고 적용할 수 있는 매우 유연한 패러다임임 Angular 입증되었습니다. "컴포넌트"와 "사용자 컨트롤"의 유사점을 인식하면 재사용 및 구성 기회의 방대한 배열과 이것이 제공하는 힘이 분명해집니다.

지금 당장 무료로 다운로드할 수 있는 Infragistics의 eBook인 Angular Essentials를 제외하고는 Angular 구성 요소 아키텍처와 플랫폼에서 사용할 수 있는 다양한 시설에 대한 높은 수준의 소개를 통해 최신 웹을 위한 복잡한 애플리케이션을 구축하는 데 도움이 됩니다.

Angular 응용 프로그램 구조

Angular 는 구성 요소를 광범위하게 사용합니다. 일반적인 Angular 응용 프로그램은 페이지의 모든 부분을 정의하는 구성 요소로 구성됩니다. 구성 요소가 Angular 모듈에 추가됩니다.

Angular 응용 프로그램을 구성 요소의 트리로 생각하십시오. 이러한 구성 요소는 서로 연결되어 있습니다. 맨 위에 있는 구성 요소는 다른 모든 구성 요소를 포함하는 루트 구성 요소이며 Angular 부트스트래퍼에서 응용 프로그램을 시작하는 데 사용됩니다.

다음은 Angular 애플리케이션의 일반적인 구성 요소 트리입니다.

 

Angular 응용 프로그램의 일반적인 구성 요소 트리

Angular 응용 프로그램의 구성 요소 트리 구조

모든 구성 요소는 UI, 화면 또는 경로의 자급자족 부분입니다. 구성 요소는 뷰와 해당 뷰 모델의 조합입니다. 서비스를 사용하여 데이터를 가져오고 해당 데이터를 뷰에 표시합니다.

응용 프로그램이 여러 보기로 나뉘고 현재 URL을 기반으로 보기를 로드해야 하는 경우 각 경로는 구성 요소로 처리됩니다. 경로는 로드해야 할 때 이 구성 요소를 호출합니다.

Angular 애플리케이션은 모듈식입니다. Angular는 소스 코드를 모듈화한 상태로 유지하기 위해 여러 ES6 모듈을 사용하며, 자체 모듈 시스템을 사용하여 관련 Angular 블록 세트를 함께 그룹화합니다. ES6 모듈러 시스템의 목적은 Angular 모듈 시스템의 목적과 다르다는 것을 이해하는 것이 중요합니다.

ES6 모듈 시스템은 소스 파일을 가능한 한 간결하게 유지하는 데 도움이 됩니다. 각 파일에는 구성 요소, 지시문, 서비스 또는 기타 블록이 포함되어 있습니다. 이러한 파일은 export 키워드를 사용하여 객체를 내보내고, import 키워드를 사용하여 다른 모듈에서 가져옵니다. 응용 프로그램에 사용된 타사 라이브러리도 ES6 모듈로 로드됩니다. 반면에 Angular 모듈은 Angular 블록 집합을 함께 그룹화하는 데 사용됩니다. 이러한 모듈은 블록 집합의 기능에 따라 응용 프로그램을 여러 모듈로 분할하는 데 사용할 수 있습니다. 한 모듈은 다른 모듈에 액세스하여 해당 기능을 사용할 수 있습니다.

Angular는 DI(Dependency Injection)를 광범위하게 사용하여 필요한 개체를 코드 블록에 로드합니다. 복잡한 애플리케이션에 필요한 모든 기능과 함께 제공되는 DI용 단일 API를 제공합니다. 모듈성과 DI의 조합으로 Angular 코드를 훨씬 더 깔끔하게 읽고 테스트할 수 있습니다.

Angular 응용 프로그램은 여러 구성 요소, 서비스, 지시문, 파이프 및 기타 부분을 사용하여 구축됩니다. 각각이 무엇을하는지 살펴 보겠습니다.

지시문

지시문은 Angular에서 새로운 기능은 아니지만 Angular JS 이후로 개선되었습니다. Angular의 지시문 아키텍처는 더 나은 바인딩 시스템을 제공하여 직접 DOM 조작의 필요성을 줄입니다. 지시문 Angular 카멜식 대소문자 표기법으로 이름을 지정하고 UI에서 점선 표기법으로 사용해야 하는 JS와 달리 Angular 에는 지시문의 이름을 지정하고 사용하는 통일된 방법이 있습니다.

Angular 2 has three types of directives:

구성요소

Angular 응용 프로그램은 구성 요소로 시작합니다. 모든 경로는 구성 요소와 연결되며 구성 요소를 사용하여 응용 프로그램의 다양한 수준을 정의합니다. 구성 요소는 HTML 템플릿과 이 템플릿에 대한 보기 모델을 빌드하는 논리로 구성됩니다. HTML 템플릿은 Angular의 바인딩 구문을 사용하여 뷰에서 뷰 모델의 속성과 메서드를 바인딩합니다. 구성 요소는 템플릿에 다른 구성 요소를 로드하고 상호 작용할 수 있습니다.

구성 요소에는 응용 프로그램이 구성 요소의 주요 수명 주기 이벤트에 응답할 수 있도록 하는 ngOnInit(), ngOnDestroy()와 같은 수명 주기 후크가 있습니다.

Decorator Directives

데코레이터 지시문은 기존 HTML 요소 또는 기존 구성 요소의 동작을 확장합니다. 이것은 가장 간단한 종류의 지시문입니다. 그들은 작은 일련의 작업을 수행하지만 때때로 이러한 작은 기능은 비즈니스에 매우 중요합니다. 데코레이터 지시문은 이벤트를 통해 호스트와 상호 작용할 수 있습니다. 이러한 이벤트를 효율적으로 사용하면 수행해야 하는 DOM 조작의 양을 줄일 수 있습니다.

구조적 지침

structural 지시문은 요소 내부에 렌더링된 템플릿을 처리합니다. 필요에 따라 템플릿을 조작할 수 있습니다. 대상 내부의 DOM을 직접 조작하지 않고 Angular에서 제공하는 ViewComponentRef 서비스를 사용하여 대상 내부에 요소를 추가하거나 제거합니다. 이 동작은 지시문 플랫폼을 불가지론적으로 만듭니다.

Change Detection

모든 프론트엔드 프레임워크의 핵심은 개체에 대한 변경 사항을 감지하는 기술입니다. UI 변경에 개체 값이 바인딩될 때마다 이러한 변경 사항을 반영하도록 UI를 업데이트할 수 있도록 프레임워크에 알려야 합니다. 이 기술을 변경 감지 라고 합니다. Angular 개체의 변경 사항을 감지하는 훨씬 더 강력하고 효율적인 방법을 제공합니다. 변경 감지 메커니즘이 내장되어 있으며 프레임워크에 구축된 응용 프로그램도 타사 기술을 사용할 수 있습니다. 프레임워크는 변경 사항을 감지하는 더 나은 메커니즘을 제공하는 개체를 사용할 수 있도록 하는 개방형 끝을 가지고 있습니다.

서비스

서비스는 API에서 데이터 가져오기, 서버와 상호 작용하기 위한 WebSocket 연결 유지 관리, 비즈니스 로직 또는 재사용 가능한 로직 처리와 같은 작업을 수행하는 간단한 ES6 또는 TypeScript 클래스입니다. 서비스는 다른 서비스, 구성 요소, 지시문 또는 Angular 코드 블록에 삽입할 수 있습니다. 서비스는 SRP(Single Responsibility Principle)를 달성하고 코드를 더 명확하게 유지하는 데 도움이 됩니다.

양식

사용자 입력을 수락하는 것은 모든 응용 프로그램에서 가장 중요한 부분 중 하나입니다. 때때로 비즈니스에서 사용자가 채워야 하는 많은 필드가 필요하고 수행해야 할 유효성 검사가 많은 경우 사용자 입력을 처리하는 것이 어려워집니다. Angular 는 Forms에 대한 좋은 지원을 제공합니다. Angular 응용 프로그램의 폼으로, 템플릿 또는 모델에 의해 구동될 수 있습니다.

라우팅

단일 페이지 응용 프로그램 개발을 지원하는 프레임워크를 사용하면 전체 페이지를 새로 고치지 않고도 클라이언트 측에서 보기를 전환할 수 있습니다. 페이지의 일부를 업데이트하고 URL을 변경하여 북마크하고 첫 번째 페이지에서 탐색을 다시 시작하는 대신 특정보기로 돌아올 수 있습니다. 이를 클라이언트 측 라우팅이라고 합니다. 모든 SPA 프레임워크와 마찬가지로 Angular는 라우팅을 지원합니다. Angular 에는 Component Router라는 라우터가 있는데, 이 라우터는 구성 요소를 로드하기 때문에 이름이 지정됩니다.

Modules

앞에서 언급했듯이 Angular의 모듈은 관련 구성 요소, 지시문, 파이프 및 서비스 집합을 함께 그룹화하는 데 사용됩니다. Angular의 모듈 시스템은 ES6 모듈 시스템과 다릅니다. ES6 모듈 시스템은 파일의 내용을 캡슐화하고 Angular 2 모듈 시스템은 Angular 블록 세트를 캡슐화합니다. 모듈의 몇 가지 기능은 다음과 같습니다.

  • 모듈에 추가된 블록은 모듈 내에서 사용할 수 있습니다.
  • 모듈은 하나 이상의 모듈을 가져와서 해당 모듈의 코드를 사용할 수 있습니다.
  • Angular 라이브러리는 모듈을 사용하여 해당 기능을 전 세계로 내보낼 수 있습니다.
  • Angular 애플리케이션은 모듈로 부트스트랩합니다.
  • 모듈은 하나 이상의 구성 요소를 부트스트랩 구성 요소로 선언할 수 있습니다.
  • 모듈의 실행은 부트스트랩된 구성 요소에서 시작됩니다.

결론

Angular 에는 여러 가지 새로운 기능과 일부 Angular JS 기능의 향상된 버전이 포함되어 있습니다. 이러한 각 기능은 사용 편의성과 유지 관리 용이성을 염두에 두고 설계되었습니다. 우리는 앞으로 나아가면서 이러한 각 개념에 대해 더 깊이 파고들 것입니다.

Angular Essentials eBook의 이 샘플이 마음에 들었기를 바랍니다. 전체 책을 다운로드할 수 있으며, 방금 배운 정보를 적용하는 방법과 JavaScript Angular Components의 Ignite UI가 모든 비즈니스 애플리케이션을 위한 놀라운 고성능 애플리케이션을 작성하는 데 어떻게 도움이 되는지 보여주는 새로운 샘플 애플리케이션 및 단원을 확인하십시오. 그리고 JavaScript용 Ignite UI의 30일 무료 평가판을 받으십시오! 

데모 요청