2021 Angular 모범 사례 > 시티즌 인사이트

본문 바로가기

시티즌 커뮤니티

시티즌 인사이트

IT&개발 정보 2021 Angular 모범 사례

페이지 정보

작성자 GrapeCity 작성일 21-09-23 15:07 조회 144회 댓글 0건

본문

Google 개발자들이 TypeScript를 사용하여 빌드한 Angular는 프론트엔드 응용 프로그램을 빌드하기 위해 개발된 오픈 소스 JavaScript 프레임워크입니다.

Angular 2+는 Angular.js의 뒤를 잇는 제품으로, JavaScript가 아닌 TypeScript를 사용하여 처음부터 다시 작성되었기 때문에 JavaScript와 관련된 많은 문제를 피했으며, TypeScript의 정적 입력과 클래스 기반 지향 개체 기능 덕분에 IDE와의 통합 및 다음 모범 사례를 보장합니다.

Angular는 단순한 프레임워크가 아니라 프론트엔드 웹 및 모바일 개발을 보다 관리 가능하게 만들어 주는 기능으로 구성된 전체 플랫폼입니다. 또한 커뮤니티의 프로젝트 덕분에 모바일(Ionic 및 NativeScript) 및 데스크톱(Electron) 장치를 위한 네이티브 앱을 빌드할 수 있습니다.

Angular는 다른 모던 JavaScript 라이브러리(React 및 Vue.js)와 마찬가지로 많은 공유 개념을 사용합니다. React가 전 세계 웹 개발자 사이에서 좀 더 유명하지만 Angular는 엔터프라이즈 앱에 적합합니다.

이 포스팅에서는 Angular 응용 프로그램을 빌드할 때 개발자가 따라야 하는 몇 가지 모범 사례에 대해 다룹니다.

Angular CLI 사용

웹 응용 프로그램 개발 시 가장 먼저 고려해야 할 것은 개발 툴입니다. 요즘에는 프론트엔드 웹 개발을 보다 간단하게 만들어 주는 모던 툴들이 있습니다. Angular의 경우에도 많은 툴이 있지만 무엇보다 중요한 것은 공식 Angular CLI와 스마트하고 확장 가능한 빌드 프레임워크인 Nx입니다.

공식 CLI를 사용하지 않아도 Angular 프로젝트를 만들 수 있다고 하더라도 이는 학습을 위한 경우 유용합니다. 실제 개발 시에는 Angular CLI를 사용해야 합니다. Angular CLI는 Angular공식 팀에서 Node.js를 기반으로 만든 커맨드라인 인터페이스입니다. 이 인터페이스를 사용하면 Webpack과 같은 빌드 도구를 구성하는 번거로움 없이 처음부터 완전히 작동하는 Angular 응용 프로그램을 매우 쉽게 초기화할 수 있습니다. 모듈 및 컴포넌트와 같은 구성을 마련하기 위한 명령을 제공하고, 테스트하며(장치, 통합 및 e2e 테스트), 최종 프로덕션 번들을 빌드하고, 최종 앱 배포까지 도와주어 개발 중에 지원합니다.

팀에서 권장하는 모범 사례와 함께 제공되는 Angular CLI를 사용하여 프로젝트를 생성하거나 전체 스택 응용 프로그램을 빌드하는 경우 Nx를 사용합니다.

Angular CLI를 설치하기 전에 최신 버전의 Node.js 및 npm이 설치되어 있어야 합니다. 그렇지 않은 경우 다음 방법 중 하나를 사용할 수 있습니다.

  • 공식 웹사이트에서 운영 체제에 적합한 설치 프로그램을 다운로드하십시오.

  • 대상 시스템의 공식 패키지 관리자를 사용하십시오.

  • NVM과 같은 노드 버전 관리 도구를 사용하면 시스템에서 여러 버전의 노드를 관리할 수 있습니다. 또한 Linux 또는 MAC에서 추가 구성 없이 sudo를 사용하지 않고 시스템에 패키지를 전역적으로 설치할 경우에도 도움이 됩니다.

이제, 다음 명령을 사용하여 Angular CLI를 설치합니다.

npm install -g @angular/cli


이 명령은 CLI를 시스템에 전역적으로 설치합니다.

ng 명령을 실행하여 사용 가능한 모든 명령을 원하는 대로 가져온 후 ng 다음에 특정 명령과 --help 옵션을 실행하여 해당 명령에 대한 도움말 파일을 표시할 수 있습니다.

다음 명령을 사용하면 설치된 버전을 확인할 수 있습니다.

ng version


다음으로, 아래 명령을 실행하면 새 프로젝트를 생성할 수 있습니다.

ng new angular-practices-demo


Angular에서 다음과 같은 메시지가 표시되면 아래와 같이 답변합니다.

  • Angular 라우팅을 추가하시겠습니까?(Would you like to add Angular routing?) → "y"를 입력합니다.

  • 어떤 스타일시트 형식을 사용하시겠습니까?(Which stylesheet format would you like to use?) → 화살표 키를 사용하여 SCSS를 선택합니다.


확장 가능하고 유지 관리 가능한 프로젝트 구조 사용

이전에 웹 개발 경험이 있는 경우 처음부터 편리한 프로젝트 구조 또는 아키텍처를 찾는 것이 항상 쉬운 일은 아니라는 점을 잘 알 것입니다. 하지만 크고 작은 앱을 빌드한 경험이 많아질수록 더 쉬워집니다.

작은 응용 프로그램의 경우 Angular CLI에서 생성하는 기본 구조면 됩니다. 하지만 프로젝트가 커지면 앱을 제대로 유지 관리하고 확장하기 힘들다는 사실을 알게 될 것입니다.

다음은 응용 프로그램의 폴더를 구조화하는 방법에 대한 훌륭한 문서로, 베어본 Angular 프로젝트에서 시작하여 별도의 컴포넌트 및 페이지 폴더로 보다 체계적인 견고한 폴더 구조로 이동합니다. 페이지는 간단히 말해 라우팅된 컴포넌트입니다.

또한 따라야 할 모범 사례는 코어 모듈, 공유 모듈 및 응용 프로그램의 각 기능을 위한 기능 모듈(앱을 부트스트랩하는 루트 응용 프로그램 모듈 추가)을 사용하여 앱을 구성합니다. 그런 다음 앱 모듈의 가져오기를 코어 모듈로 이동하고 앱 모듈은 응용 프로그램 부트스트랩용으로만 남겨 둡니다.

전체 응용 프로그램에 대해 하나의 인스턴스만 있어야 하는 모든 singleton 서비스를 코어 모듈에 배치해야 합니다. 예를 들어, 인증 서비스는 각 응용 프로그램에 대해 하나의 인스턴스만 가져야만 코어 모듈의 일부가 될 수 있습니다.

공유 모듈에서는 여러 모듈에서 사용된 공통 아티팩트(컴포넌트, 지시문, 파이프 등)를 배치해야만 공유 모듈을 가져와 사용할 수 있습니다. 또한 공유 모듈은 서비스를 삽입하지 않고 속성을 통해서만 데이터를 수신할 수 있는 dumb 컴포넌트 및 파이프를 위한 좋은 위치입니다.

Angular Material과 같은 UI 컴포넌트 라이브러리를 사용한다고 가정해 보겠습니다. 이 경우, 해당 라이브러리는 앱 전체에서 사용하려는 컴포넌트를 가져와 다시 내보낼 수 있는 아주 좋은 위치이므로 각 모듈에서 가져오기를 반복할 필요가 없습니다.

이전에 생성한 프로젝트를 계속 작업하려면 다음 명령을 실행하여 코어 모듈과 공유 모듈을 만듭니다.

ng generate module core
ng generate module shared


다음으로, 제품과 장바구니를 위한 기능 두 가지가 필요하다고 가정해 보겠습니다.

같은 명령을 사용하여 제품과 장바구니를 위한 두 가지 기능 모듈을 생성합니다.

ng generate module product
ng generate module cart


다음으로, src/app/shared.module.ts 파일을 열고 다음과 같이 업데이트합니다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
​
@NgModule({
declarations: [],
imports: [
  CommonModule
],
exports: [
  CommonModule,
  FormsModule
]
})
export class SharedModule { }


여기서는 내보내기 배열에 FormsModule 모듈을 추가했습니다. 따라서 해당 배열은 공유 모듈을 가져오는 다른 모듈로 내보냅니다. 하지만 가져오기 배열에는 추가하지 않았습니다. 이러한 방식으로 공유 NgModule로 직접 가져오지 않고 FormsModule에 다른 모듈 액세스 권한을 부여할 수 있습니다.

다음으로, CommonModule에서 NgIfNgFor와 같은 공통 지시문을 사용하기 위해 CommonModuleFormsModule을 다시 내보내고 SharedModule을 가져오는 모듈에서 컴포넌트 속성을 [(ngModel)]과 바인딩합니다.

다음으로, src/app/app.module.ts 파일을 열고 코어 모듈과 공유 모듈을 다음과 같이 가져옵니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
​
​
@NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  CoreModule,
  SharedModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


ProductModuleCartModule에서 CommonModule을 제거하고 이미 CommonModule을 내보냈으므로 SharedModule을 가져옵니다.


최신 상태로 유지

Angular는 6개월마다 새로운 메인 버전이 나오는 유의적 버전 관리(Semantic Versioning)를 따릅니다.

유의적 버전 관리(Semantic Versioning)는 버전 관리 소프트웨어에 사용되는 규칙입니다. 형식은 major.minor.patch입니다. Angular는 주요 변경 사항, 사소한 변경 사항 또는 패치 변경 사항을 릴리스할 때 각 부분을 증가시킵니다.

여러분은 CHANGELOG에서 Angular의 최신 버전에 대한 새로운 내용에 따라 Angular 버전을 최신 상태로 유지하여 항상 Ivy와 같은 최신 기능, 버그 수정사항, 성능 개선 사항을 가져올 수 있습니다.

하나의 버전에서 다른 버전으로 프로젝트를 업데이트할 때 공식 도구를 사용하는 것도 도움이 될 수 있습니다.


Strict 모드

도입부에서 Angular 2+는 초기 단계부터 TypeScript를 채택하여 프레임워크 및 도구를 비롯한 플랫폼이 종속성 삽입과 같은 모범 사례를 따르도록 보장하여 테스트를 보다 쉽게 ​​관리할 수 있도록 하고 성능 예산을 책정한다고 언급했습니다.

Angular 팀은 Angular 12로 시작하는 모든 프로젝트에 대해 기본적으로 Strict 모드를 활성화하기 위해 Angular 10의 옵션과 함께 점진적으로 strict 모드를 적용하도록 이동했습니다. 이것은 이제 기본적으로 활성화된 모범 사례이지만 학습 목적으로 비활성화해야 하는 경우 새 프로젝트를 만들 때 --no-strict 옵션을 사용합니다.

기존 프로젝트의 경우 tsconfig.json에서 다음과 같이 strict 모드를 활성화해야 합니다.

{
    "compilerOptions": {
          "forceConsistentCasingInFileNames": true,
          "strict": true,
          "noImplicitReturns": true,
          "noFallthroughCasesInSwitch": true,
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
    }
}


또한 Ivy 컴파일러와 언어 서비스 덕분에 strictTemplates를 true로 설정하면 템플릿에서 TypeScript의 유형 시스템을 활용할 수 있습니다. 이는 Angular 12부터 기본값입니다. 자세한 내용은 공식 문서에서 확인하십시오.

Angular 팀의 권장되는 보안 사례를 따르고 자신이 무엇을 하고 있는지 잘 모를 경우 ElementRef 및 innerHTML을 사용하면 안 됩니다!


지연 로드(Lazy loading) 사용

Angular를 사용할 때 SPA(Single Page Application, 단일 페이지 애플리케이션)를 빌드해야 합니다. 이는 앞에서 만든 전통적인 웹 앱과는 다른 모던 앱 유형입니다.

Angular는 서버에서 한 번에 여러 SPA 번들을 로드하여 JavaScript 또는 클라이언트 측 라우팅을 사용하여 사용자가 여러 보기 간에 탐색하도록 합니다.

이는 오늘날 앱을 빌드하기 위한 모던 접근 방식으로, Angular, React, Vue.js 등의 모던 프레임워크를 사용하여 앱을 빌드하는 방식입니다.

Angular에서는 클라이언트 측 라우팅에 사용할 수 많은 기능과 함께 강력한 라우터를 제공합니다. 따라서 필요한 개념만 파악하면 SPA를 쉽게 빌드할 수 있습니다. 그러나 이 방식은 서버에서 전체 앱 번들을 다운로드해야 하기 때문에 성능에 영향을 미칩니다. 따라서 앱 크기가 커지는 경우 응용 프로그램 다운로드 시간이 늘어날 수 있습니다.

다음은 응용 프로그램의 사용자가 액세스할 때 특정 모듈의 로딩을 연기하는 아이디어를 중심으로 하는 지연 로딩의 역할입니다. 이는 응용 프로그램 번들의 실제 다운로드 크기를 줄여 이점을 제공합니다. 또한 지연 로드는 응용 프로그램을 처음 시작하는 경우 사용하지 않는 모듈은 로드하지 않고 사용자가 탐색을 트리거할 때만 로드하여 부팅 시간을 개선합니다.

모범 사례로, 가능한 경우에는 항상 응용 프로그램에서 기능 모듈을 지연 로드해야 합니다. 앱 시작 시 최초 콘텐츠를 표시하려면 기능 모듈 한 개만 로드하면 됩니다. 성능을 개선하고 최초 번들 크기를 줄이기 위해 다른 모든 기능 모듈은 지연 로드해야 합니다.

동적 가져오기 구문과 함께 Angular 라우터의 loadChildren 속성을 사용하여 모듈을 지연 로드할 수 있습니다. 그리고 Ivy 덕분에 컴포넌트도 지연 로드할 수 있습니다. 예를 살펴보겠습니다!

먼저, Angular 라우팅 설정을 사용한 프로젝트가 있는지 확인합니다. Angular CLI를 사용하면 프로젝트를 생성할 때 ng new 명령에 --routing 플래그를 설정하거나 "Angular 라우팅을 추가하시겠습니까?"라는 메시지가 표시되면 "y"로 응답하여 이 문제를 처리합니다.

src/app/app-routing.module.ts 파일을 열고 다음과 같이 제품 및 장바구니 모듈을 지연 로드합니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductModule } from './product/product.module';
import { CartModule } from './cart/cart.module';
​
​
const routes: Routes = [
{ path: 'product', loadChildren: () => import('./product/product.module').then(m => m.ProductModule) },
{ path: 'cart', loadChildren: () => import('./cart/cart.module').then(m => m.CartModule) }
];
​
​
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }


모듈을 지연 로드하기 위해 import 문과 함께 결합하여 경로 구성의 loadChildren 속성을 사용합니다.

이제 이러한 모듈에 추가하는 모든 컴포넌트가 지연 로드됩니다! 그러나 Ivy를 사용하면 모듈 없이 Angular 컴포넌트를 지연 로드할 수 있습니다.

먼저, 다음 명령을 사용하여 컴포넌트를 생성합니다.

ng generate component header --module=core  

코어 모듈이 이 컴포넌트를 가져옵니다.

src/app/app.component.html 파일을 열고 다음과 같이 업데이트합니다.

<button (click)="lazyLoadHeader()">Load header</button>
<ng-container #header></ng-container>


다음으로, src/app/app.component.ts 파일을 열고 다음과 같이 업데이트합니다.

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
​
​
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'angular-practices-demo';
@ViewChild('header', { read: ViewContainerRef }) headerContainer: ViewContainerRef | null = null;
constructor(private factoryResolver: ComponentFactoryResolver) { }
​
​
async lazyLoadHeader() {
  const { HeaderComponent } = await import('./header/header.component');
  const factory = this.factoryResolver.resolveComponentFactory(HeaderComponent);
  this.headerContainer?.createComponent(factory);
}
}


버튼을 클릭하면 "header works!"라는 메시지가 표시되는 데, 요청 시 컴포넌트가 지연 로드되어 렌더링되었음을 의미합니다.


RxJS Observables에서 구독 해제

RxJS Observables에 대한 컴포넌트를 구독 중인 경우 항상 구독 해제해야 합니다. 그렇지 않으면 관찰 가능한 스트림이 열려 있으므로 이를 사용하는 컴포넌트를 제거한 후에도 원치 않는 메모리 누수가 발생합니다.

다음과 같은 여러 가지 방법으로 구독 해제할 수 있습니다.

  • 컴포넌트를 제거한 후 ngOnDestory 이벤트의 컴포넌트를 구독 해제합니다.

  • async pipe를 사용하여 Observables를 구독하고 템플릿에서 자동으로 구독 해제합니다.


trackBy와 함께 ngFor 사용

ngFor 지시문을 사용하여 Angular 템플릿에서 배열을 반복합니다. 배열을 변경하면 전체 DOM 트리가 다시 렌더링되는 데 이는 성능에 도움이 되지 않습니다. 이 문제를 해결하려면 trackBy와 함께 ngFor를 사용해야 합니다. 그러면 각 DOM 요소를 고유하게 식별하고 Angular가 수정된 요소만 다시 렌더링합니다.

@Component({
selector: 'my-app',
template: `
  <li *ngFor="let product of products; trackBy:productById"></li>
`
})
export class App {
products:[];
  {id:0, name: “product 1”},
  {id:1, name: “product 2”}
];
​
​
productById(index, product){
    return product.id;
}


결론

Angular 팀은 Angular 개발에 TypeScript를 사용하여 처음부터 모범 사례를 채택하여 유형 안전성, 더 나은 오류 처리, IDE와의 통합을 보장했습니다 Angular 12에서는 기본적으로 strict 모드를 사용하여 오류 없이 견고한 앱을 빌드하는 데 도움이 되는 엄격한 규칙을 따르도록 합니다. 이 문서에서는 확장 가능하고 쉽게 유지 관리할 수 있는 앱을 빌드하기 위해 따를 수 있는 몇 가지 모범 사례를 살펴보았습니다.

Angular를 완벽 지원하는, 프레임워크에 구애 받지 않는 Excel / UI / 리포팅 컴포넌트를 사용해 보고 싶을 경우 아래 GrapeCity 제품들을 확인해 보세요.

  • ActiveReportsJS: 쉽고 가벼운 웹 애플리케이션용 JavaScript 리포팅 솔루션

  • SpreadJS: 500개 이상의 Excel 기능이 포함된 글로벌 No.1 JavaScript 스프레드시트 컴포넌트

  • Wijmo: 차트, 그리드, 입력 등을 포함하는 고성능 JavaScript UI 컴포넌트

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.