Angular 19: 프로젝트 업데이트와 최신 기능 활용하기
2025-01-17 05:15:34Angular 19로의 업데이트: 프로젝트와 최신 기능 활용하기
Angular 19가 출시되었습니다! 이번 버전은 개발자 경험과 성능을 크게 향상시키는 다양한 기능들을 제공합니다. 이 글에서는 Angular 19의 주요 업데이트 사항을 살펴보고, 자신의 Angular 애플리케이션에서 이러한 기능들을 어떻게 활용할 수 있는지 알아보겠습니다.
Angular 19 업데이트 시작하기
Angular 프로젝트를 최신 버전으로 업데이트하는 것은 언제나 흥미로운 일입니다. Angular CLI의 업데이트 명령어를 사용하면 쉽게 프로젝트를 업데이트할 수 있습니다:
ng update @angular/cli @angular/core
버전 19에서는 모든 컴포넌트가 기본적으로 스탠드얼론으로 제공되기 때문에, 더 이상 standalone: true를 선언할 필요가 없습니다. 이전에 사용했던 NgModules를 정리하고, 스탠드얼론 API로 앱을 부트스트랩할 수 있습니다. 프로젝트에서 스탠드얼론 API를 강제하려면 tsconfig.json에 다음과 같이 컴파일러 플래그를 설정합니다:
{
"angularCompilerOptions": {
"strictStandalone": true
}
}
또한, 생성자 기반의 의존성 주입을 inject() 함수로 변환하고, 사용하지 않는 임포트를 정리하며, eagerly 로드된 컴포넌트 경로를 lazy 로드로 변환할 수 있는 마이그레이션을 사용할 수 있습니다. 경로를 lazy로 전환할 때에는 주의를 기울이는 것이 중요합니다:
ng generate @angular/core:inject
ng generate @angular/core:cleanup-unused-imports
ng generate @angular/core:route-lazy-loading
Angular 19의 주요 기능 살펴보기
서버 사이드 렌더링(SSR) 향상: 서버 경로 구성
Angular 19는 서버 사이드 렌더링을 강화하여, 개발자가 각 경로가 렌더링되는 방식을 구성할 수 있도록 합니다. 예를 들어, 특정 경로가 프리렌더링될지, 서버 사이드 렌더링될지, 클라이언트 사이드 렌더링될지를 지정할 수 있으며, 프리렌더링 중에 경로 파라미터를 해결할 수도 있습니다.
서버 경로 구성 예시
import { RenderMode, ServerRoute } from '@angular/ssr';
export const routes: ServerRoute[] = [
{
path: '',
renderMode: RenderMode.Prerender,
},
{
path: 'post/:id',
renderMode: RenderMode.Prerender,
async getPrerenderParams() {
const dataService = inject(DataService);
const ids = await dataService.getIds(); // ['1', '2', '3'] 가정
return ids.map(id => ({ id }));
},
},
{
path: 'blog',
renderMode: RenderMode.Server,
},
{
path: '**',
renderMode: RenderMode.Client,
},
];
서버 경로를 구성하면 로딩 시간을 최적화하고 SEO를 향상시킬 수 있습니다. 콘텐츠가 클라이언트에게 도달하기 전 렌더링할 필요가 있을 수 있기 때문입니다.
신호 기반 리소스 API
Angular 19의 새로운 기능으로 신호 기반 리소스 API가 도입되었습니다. 이는 개발자들이 애플리케이션 상태와 HTTP 요청을 신호를 통해 보다 효과적으로 관리할 수 있게 해주며, 상태 관리를 위한 반응형 패러다임을 제공합니다.
신호 기반 리소스 API 예시
import { signal, resource } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class DataService {
private paramsSignal = signal({ limit: 20, offset: 0 });
dataResource = resource<DataResponse, { limit: number; offset: number }>({
request: this.paramsSignal,
loader: async (params) => {
const { limit, offset } = params.request;
const response = await fetch(`/api/data?limit=${limit}&offset=${offset}`);
return await response.json();
},
});
updateParams(limit: number, offset: number) {
this.paramsSignal.set({ limit, offset });
}
}
새롭게 도입된 신호 기반 리소스 API를 사용하면, 컴포넌트의 신호가 외부 API와 상호작용하는 방식을 매끄럽게 처리할 수 있게 됩니다.
뷰 전환 지원: withViewTransitions 활용
Angular 19의 또 다른 흥미로운 기능은 withViewTransitions API를 통한 뷰 전환 지원입니다. 이는 경로 간의 부드러운 전환을 가능하게 하여 사용자 경험을 향상시켜 줍니다.
뷰 전환 활성화 예시
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app.component';
import { appRoutes } from './app.routes';
bootstrapApplication(AppComponent, {
providers: [
provideRouter(appRoutes, withViewTransitions())
]
});
뷰 전환을 프로젝트에 활성화하면, 각 경로 간 이동 시 부드러운 전환 효과를 경험할 수 있습니다.
점진적 하이드레이션 (개발자 프리뷰)
Angular 19는 서버 사이드 렌더링의 새로운 차원을 선보입니다: 점진적 하이드레이션. 이는 @defer 문법을 사용해 템플릿의 특정 부분을 주석 처리하고, 특정 트리거에서 하이드레이션하도록 Angular에게 지시할 수 있게 해줍니다.
점진적 하이드레이션 활성화 예시
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
// ...
provideClientHydration(withIncrementalHydration());
점진적 하이드레이션 예시 사용
@defer (hydrate on viewport) {
<blog-post/>
}
애플리케이션이 로드될 때, Angular는 blog-post 컴포넌트가 뷰포트에 들어올 때까지 다운로드 및 하이드레이션을 하지 않습니다.
개발 서버 및 핫 모듈 교체 (HMR)
Angular 19는 스타일을 위한 핫 모듈 교체(HMR)를 지원하며, 템플릿 HMR에 대한 실험적 지원을 제공합니다. 스타일과 템플릿 수정 사항을 저장할 때, Angular CLI가 애플리케이션을 재빌드하고 브라우저에 알림을 보내는 대신, 수정된 스타일 및 템플릿을 컴파일하여 브라우저로 전송하고 애플리케이션을 패치하여 페이지를 갱신하지 않고도 수정 사항을 반영할 수 있게 되었습니다.
스타일을 위한 HMR은 기본적으로 v19에서 활성화되어 있으며, 템플릿 HMR을 체험하려면 다음 명령어를 실행하면 됩니다:
NG_HMR_TEMPLATES=1 ng serve
업데이트 및 새 기능 시연
본인의 프로젝트를 Angular 19로 업데이트 하고 싶으신가요? Angular 19는 이번 버전을 통해 개발자에게 많은 것을 선사합니다. 최신 기능들을 활용하여 프로젝트를 개선해보세요!
참고할 만한 링크: