[Angular] standalone 적용하기

기존에 개발되어있는 Angular 프로젝트를 고도화하는 과정에서 겪었던 standalone 적용 기를 적어봅니다.

Angular를 17버전대로 버전업을 진행하면서 바꿀 거면 성능까지 고려해서 적용을 해보자 마음을 먹었습니다.

---

| Standalone Components

Standalone Components는 Angular 14 버전부터 도입된 기능으로 16 버전에서는 정식 기능으로 채택됐고 독립적으로 사용할 수 있는 컴포넌트를 의미합니다. 

기존에는 컴포넌트를 생성하면 NgModule에 등록해서 써야 했지만 이제는 모듈에 등록 없이 사용할 수 있습니다.

 

| 왜 바꿔야하나?

독립적으로 사용할 수 있기 때문에 코드 분할 및 지연 로딩을 보다 효과적으로 구현할 수 있고 초기 로딩 속도를 향상할 수 있습니다.

 

번들링 될 때 꼭 필요한 종속성만 포함하므로 불필요한 모듈과 의존성이 제거되면서 메모리 사용량 감소를 노려 볼 수 있습니다. 그래서 전반적인 성능개선이 이뤄질 수 있죠.

 

모듈로 인해 발생되는 문제들을 해결해 줍니다.

예를 들어 모듈에 등록해서 쓰는 컴포넌트들이 다른 모듈로 이동해야 하는 상황이 있을 수 있습니다. 이때 기존에는 이 컴포넌트들의 의존성을 정확히 파악하기 어렵습니다. 기존에 컴포넌트들끼리 단단히 모듈에 엉켜있는 상황에서는 리팩토링 하기 더 어려워집니다. 

공통으로 사용하고 있던 SharedModule에 들어간 걸 빼야 하면 더 어려워져요

 

| standalone 사용하기

기존 컴포넌트가 이렇게 있습니다.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  // 컴포넌트 로직
}

 

standalone을 사용하려면 

1. 컴포넌트 파일에 standalone: true 를 추가합니다.

2. 컴포넌트에서 사용하는 모든 모듈(입력폼 모듈, 라우팅 모듈 등)을 imports에 추가합니다.

3. 컴포넌트에서 사용하는 모든 종속성을 providers(서비스, 파이프 등)에 추가합니다.

 

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  imports: [CommonModule, FormsModule],
  standalone: true
})
export class MyComponentComponent {
  // 컴포넌트 로직
}

 

4. BrowserModule 대신에 bootstrapApplication을 사용하도록 해야 합니다.

import { bootstrapApplication } from '@angular/platform-browser';
import { MyComponentComponent } from './my-component/my-component.component';

bootstrapApplication(MyComponentComponent);

 

| 한방에 적용하기

저처럼 기존에 이미 모듈 형식으로 개발된 프로젝트를 standalone으로 바꾸고 싶을 때 하나하나 바꾸기에는 시간이 너무 오래 걸립니다. 

그래서 앵귤러에서는 마이그레이션 스키매틱(schematic)을 제공합니다. 

 

앵귤러 마이그레이션 스키매틱을 더 알아보려면? https://www.angular.kr/guide/standalone-migration

Angular 가이드

 

일단 Angular 버전이 15.2.0 이후 버전이어야 하니 업데이트를 해주셔야 하고요

ng generate @angular/core:standalone

 

이 명령어를 실행하고 진행하면 모든 컴포넌트를 standalone 형식으로 바꿔줍니다.

 

그렇게 끝나면 얼마나 좋을까요?? 🥲 대부분 바꿔주지만 수동으로 변환을 해줘야 하는 게 생각보다 많습니다.

로컬에서 돌려보면 에러가 주르륵 올라오는 걸 확인하실 수 있는데 한 땀 한 땀 수정해줘야 해요.

 

그리고 마지막으로 이제 더 이상 쓰지 않은 모듈들을 제거해 주면 됩니다. Common, Shared 같은 애들요.

 

그렇게 모두 마치고 빌드를 돌려서 띄워보면 메인 로드가 꽤 상당히 빠른 걸 확인할 수 있어요.

 

 

| 참고

https://angular.io/guide/standalone-components

https://www.angular.kr/guide/standalone-migration