angular v18이 출시 되었습니다. (Angular v18 is now available)

오랫동안 angular를 사용했지만 정리를 하지 못했는데 조금씩 정리해 볼까 합니다.
angular가 초기 러닝커브가 매우 가파릅니다. 지금도 어렵습니다.

벌써 18 버전까지 나왔다니 이걸 다 이해하기란 거의 불가능하고 봅니다. 가장 쉽게
정리해 보겠습니다.

웹사이트도 참조하고 AI의 도움도 받았습니다. 같이 공부해 봅시다 Go Go~~

---

Angular 18의 새로운 기능

안녕하세요, 미래의 웹 개발자 여러분! 이 글에서는 웹 개발 프레임워크인 Angular의 최신 버전, Angular 18에 대해 자세히 알아볼 거예요. 2024년 5월 22일에 출시된 이 버전은 웹 애플리케이션 개발 방식을 크게 개선했습니다. 하나씩 상세히 살펴보겠습니다.

 

 

1. 새로운 제어 흐름 문법

Angular 18에서는 템플릿^[1]의 구조를 제어하는 새로운 방법이 도입되었습니다. 이전 버전에서 사용하던 *ngIf, *ngFor, *ngSwitch 같은 구조 지시자^[2] 대신, 더 직관적이고 읽기 쉬운 새로운 문법을 사용할 수 있게 되었습니다.

조건부 렌더링 (이전의 *ngIf)

이전 방식:

<div *ngIf="user">{{ user.name }}</div>

새로운 방식:

@if(user) {
  <div>{{ user.name }}</div>
}

리스트 렌더링 (이전의 *ngFor)

이전 방식:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

새로운 방식:

<ul>
  @for(item of items) {
    <li>{{ item }}</li>
  }
</ul>

이 새로운 문법은 코드의 가독성을 크게 향상하며, JavaScript의 기본 문법과 더 유사해져 학습 곡선을 낮추었습니다.

 

2. 지연 로딩 (@defer)

웹 애플리케이션의 성능 최적화를 위해, Angular 18은 @defer라는 새로운 기능을 도입했습니다. 이 기능을 사용하면 페이지의 특정 부분을 필요한 시점에 로드할 수 있어, 초기 로딩 시간을 크게 단축할 수 있습니다.

예제:

@defer(when showChart) {
  <app-complex-chart />
}@placeholder {
  <div>차트를 준비하고 있습니다...</div>
}@loading(minimum 300ms) {
  <app-loading-spinner />
}

이 예제에서는:

1. showChart 조건이 충족될 때만 복잡한 차트 컴포넌트를 로드합니다.
2. 로드되기 전에는 플레이스홀더 메시지를 표시합니다.
3. 로딩 중에는 최소 300ms 동안 로딩 스피너를 보여줍니다.

이 기능은 특히 대규모 애플리케이션에서 초기 로딩 속도를 크게 개선할 수 있습니다. [3]

 

 

3. 변경 감지 메커니즘 개선

Angular의 핵심 기능 중 하나인 변경 감지 메커니즘이 Angular 18에서 대폭 개선되었습니다. 이전 버전에서는 'Zone.js'라는 라이브러리에 전적으로 의존했지만, 이제는 Angular 자체적으로 변경을 감지할 수 있는 새로운 스케줄러를 도입했습니다.

주요 변경사항:

1. Zone.js 의존도 감소: 애플리케이션의 전반적인 성능 향상
2. 새로운 ChangeDetectionScheduler: 더 효율적인 변경 감지
3. 옵션 제공: provideZoneChangeDetection과 provideExperimentalZonelessChangeDetection 함수를 통해 개발자가 변경 감지 방식을 선택할 수 있음

이 변경으로 Angular 애플리케이션의 성능과 반응성이 크게 향상되었습니다. [4]

 

 

4. HTTP 클라이언트 모듈 변경

서버와의 통신을 담당하는 HTTP 클라이언트 모듈에도 큰 변화가 있었습니다. 기존의 HttpClientModule이 더 간단하고 유연한 provideHttpClient 함수로 대체되었습니다.

이전 방식:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule]
})
export class AppModule { }

새로운 방식:

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

이 변경으로 애플리케이션의 구조가 간소화되고, HTTP 관련 기능의 설정이 더욱 유연해졌습니다. [5]

 

 

5. ng-content 개선

컴포넌트 간 콘텐츠 투영(content projection)을 위한 ng-content 기능이 개선되었습니다. 이제 ng-content에 기본 콘텐츠를 지정할 수 있어, 더 유연한 컴포넌트 설계가 가능해졌습니다.

예제:

<button>
  <ng-content select=".icon">
    <i aria-hidden="true" class="material-icons">send</i>
  </ng-content>
  <ng-content></ng-content>
</button>

이 예제에서는. icon 클래스를 가진 콘텐츠가 제공되지 않았을 때 기본 아이콘을 표시합니다. 이는 재사용 가능한 컴포넌트를 만드는 데 매우 유용합니다.

 

 

6. 폼 이벤트 그룹화

Angular 18에서는 폼 관련 이벤트를 더 효율적으로 관리할 수 있는 새로운 API가 도입되었습니다. AbstractControl 클래스에 추가된 events 속성을 통해 모든 폼 관련 이벤트를 한 곳에서 처리할 수 있게 되었습니다.

예제:

this.loginForm.events.subscribe(event => {
  if (event instanceof TouchedChangeEvent) {
    console.log('폼이 터치되었습니다');
  } else if (event instanceof StatusChangeEvent) {
    console.log('폼의 상태가 변경되었습니다:', event.status);
  } else if (event instanceof FormSubmitEvent) {
    console.log('폼이 제출되었습니다');
  }
});

이 기능은 복잡한 폼 로직을 더 쉽게 관리할 수 있게 해 줍니다. [6]

 

 

7. 라우팅 개선

Angular의 라우팅 시스템도 개선되어, 리다이렉션 로직을 더 유연하게 작성할 수 있게 되었습니다. 이제 redirectTo 속성에 문자열 대신 함수를 사용할 수 있습니다.

예제:

const routes: Routes = [
  { 
    path: '', 
    redirectTo: (route: ActivatedRouteSnapshot) => {
      const userType = getCurrentUserType();
      return userType === 'admin' ? '/admin-dashboard' : '/user-dashboard';
    },
    pathMatch: 'full'
  }
];

이 변경으로 동적이고 조건부적인 라우팅 로직을 구현하기가 훨씬 쉬워졌습니다.

 

 

8. 서버 사이드 렌더링(SSR) 개선

Angular 18에서는 서버 사이드 렌더링 기능이 크게 개선되었습니다. 특히 두 가지 중요한 기능이 추가되었습니다:

1. 이벤트 리플레이: 페이지가 완전히 로드되기 전의 사용자 상호작용을 기억했다가 나중에 실행할 수 있게 되었습니다.
2. 다국어 지원 개선: 서버 사이드 렌더링에서 다국어 지원이 더욱 강화되었습니다.

이러한 개선으로 SSR을 사용하는 애플리케이션의 사용자 경험이 크게 향상되었습니다. [7]

 

 

9. 국제화(i18n) 지원 강화

Angular 18에서는 국제화 지원이 강화되어, JavaScript의 네이티브 Intl API 사용을 권장하고 있습니다. 이는 날짜, 시간, 숫자 등을 각 지역의 형식에 맞게 표시하는 데 사용됩니다.

예제:

import { formatDate, formatNumber } from '@angular/common';

// 이전 방식 (deprecated)
const formattedDate = formatDate(new Date(), 'mediumDate', 'en-US');

// 새로운 방식 (권장)
const formattedDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date());

이 변경으로 더 정확하고 일관된 국제화 처리가 가능해졌습니다.

 

 

10. 새로운 빌드 패키지

Angular 18에서는 @angular/build라는 새로운 빌드 패키지가 도입되었습니다. 이 패키지는 Vite와 Esbuild라는 최신 도구를 사용하여 빌드 속도와 효율성을 크게 향상했습니다.

주요 변경사항:

• Webpack 의존도 감소
• 빌드 시간 단축
• 번들 크기 최적화

이 새로운 빌드 시스템은 개발 생산성과 애플리케이션 성능을 동시에 개선합니다. [8]

 

 

마치며

쉽게 정리한다고 했는데도 어렵네요, angular 빠른 업그리드 따라가기 벅찹니다.
새로운 개념의 홍수입니다. 조금 더 쉽게 하면 더 많은 User가 사용할 텐데 아쉽네요. 그레도 저는 angular를 사항 합니다. 각설하고...
Angular 18은 다양한 측면에서 큰 발전을 이루었습니다. 새로운 문법, 성능 개선, 그리고 개발자 경험 향상을 통해 Angular는 현대 웹 개발의 요구사항을 더욱 잘 충족시키게 되었습니다.

앞으로 Angular는 '시그널' 기반의 반응성 시스템, 더 강력한 폼 라이브러리, 그리고 더 나은 개발자 도구 등을 통해 계속 발전할 예정입니다.

웹 개발에 관심이 있다면, 이러한 새로운 기능들을 학습하고 실습해 보는 것이 큰 도움이 될 것입니다. 파이팅!

---

각주:

[1] 템플릿: Angular에서 HTML과 유사한 문법으로 UI를 정의하는 부분
[2] 구조 지시자: 템플릿의 DOM 구조를 변경하는 Angular의 특별한 지시자
[3] 초기 로딩 속도 개선: 웹사이트가 처음 열릴 때 더 빠르게 화면에 내용이 나타나는 것을 의미
[4] 변경 감지: Angular가 데이터의 변화를 감지하고 화면을 업데이트하는 과정
[5] HTTP 클라이언트: 서버와 데이터를 주고받는 데 사용되는 Angular의 기능
[6] 폼 이벤트: 사용자가 입력 폼과 상호작용할 때 발생하는 다양한 이벤트들
[7] 서버 사이드 렌더링(SSR): 서버에서 웹페이지를 미리 렌더링 하여 초기 로딩 속도를 개선하는 기술
[8] 빌드 시스템: 개발자가 작성한 코드를 최종 사용자가