본문 바로가기

Study/Angular4

[정리] Angular Module 역할적 개념으로 모듈 분리 Angular를 사용한 프로젝트를 개발하기 전 구조를 잡고있을 때 발생한 의문에 대한 글 Q. NgModule(이하 모듈)은 어느 단위로 분리하여 관리하는 것이 맞는가? 모듈의 개념적 분리 약속되어 있는 것은 아니다. 내가 편하게 구분하기 위해 사용하는 개념 분리이다. 루트 모듈 - Angular가 최초로 부트스트랩 되면서 실행되는 최초로 불러지는 모듈. 핵심 모듈 - 애플리케이션 전역에 공통으로 사용되는 구성요소의 집합 - 루트 모듈에 선언하여 싱글턴으로 사용한다. 적용대상 - 애플리케이션 전역으로 자주 사용되고 생명주기가 애플리케이션 실행 내내 유지되어야 하는 서비스들 - ex) 소켓 통신 모듈, 인증 모듈, 데이터베이스 테이블 모듈 공유 모듈 - 애플리케이션 전역에서 공통적으로 자주 사용하는 구성요.. 2020. 9. 21.
[개념] Angular Component 컴포넌트 개념 컴포넌트는 뷰(View)를 구성한다. 컴포넌트에서 정의한 뷰에서 사용될 로직또한 컴포넌트에 정의한다. 뷰는 클래스의 프로퍼티와 메소드를 활용하여 클래스와 상호작용을 한다. (클래스는 컴포넌트 클래스를 의미) 메타데이터 속성 (@Component({}) changeDetection 해당 컴포넌트에 사용할 변경 감지 방식을 정한다. viewProviders 뷰 자식 DOM 에게 표시할 개체 집합을 정의한다. moduleId 컴포넌트를 포함하는 모듈의 모듈 ID입니다. 컴포넌트는 템플릿 및 스타일에 대한 상대 URL을 확인해야 한다. templateUrl Angular 컴포넌트에 대한 템플릿 파일의 상대 경로 혹은 절대 URL이다. template Angular 컴포넌트에 대한 인라인 템플릿 H.. 2020. 9. 9.
[개념] Angular NgModule 모듈 개념 Angular 프로젝트는 하나 이상의 NgModule로 구성되어 있으며, 모든 Angular 애플리케이션에는 최상위 모듈인 AppModule이 존재한다. AppModule은 최초 프로젝트 생성시 app.module.ts 란 파일에 정의된다. 확인해보면 AppModule에서만 @NgModule 메타데이터 속성에 bootstrap 속성이 있는 것을 확인할 수 있다. 모든 NgModule은 @angular/core의 NoModule 을 로드한다. import { NgModule } from '@angular/core'; NgModule 메타 데이터 declarations : 해당 NgModule에 포함될 컴포넌트, 디렉티브, 파이프를 선언한다. exports : 해당 NgModule에 구성요소를 다.. 2020. 9. 9.
[개념] Angular 프레임 워크 컨셉 컨셉 - SPA 클라이언트 응용 프로그램을 빌드하기 위한 플랫폼 or 프레임 워크, Typescript로 작성되었다. - 컴포넌트에 대한 컴파일 컨텍스트를 제공, 관련 코드를 기능 집합으로 수집, NgModule이 모여 Angular 앱을 구성한다. - Angular 앱에는 최소 하나 이상의 루트 Module이 있고, 일반적으로 더 많은 기능 모듈들이 있다. - Angular가 프로그램 논리 및 데이터에 따라 선택하고 수정할 수 있는 화면 요소 집합인 View를 정의한다. - View와 직접 관련이 없는 특정 기능을 제공하는 Service를 사용한다. (Angularjs의 Service와 같은 개념이다.) 데코레이터 모듈, 컴포넌트, 서비스 (MCS)는 데코레이더를 사용하는 클래스이다. 데코레이터를 통해.. 2020. 9. 8.