Angular 17의 최신 개선 사항: 알아야 할 모든 것

Statista에서 실시한 연구에 따르면 Angular는 응답자의 17.46%가 활용하는 가장 많이 사용되는 웹 개발 프레임워크입니다 ^[i] . 이러한 위치를 유지하고, 성능을 개선하고, 코딩을 단순화하기 위해 Angular 팀은 2023년 9월 11일에 새 버전인 Angular 17을 출시했습니다.

새로워진 Angular 프레임워크는 Google 엔지니어링 이사이자 Angular 팀장인 Sarah Drashner의 비전에 따라 진행됩니다. 점진적인 개선을 통해 프런트엔드 프레임워크의 최신 동향에 맞춰 이전 버전과의 호환성을 보장합니다.

Angular 17을 사용하면 기업과 개발자는 향상된 개발 경험을 상상할 수 있습니다. 여기에는 새로운 제어 흐름 구문, 향상된 SSR(서버 측 렌더링) 지원, esbuild로 강화된 CLI 및 기타 업데이트가 더욱 원활하고 동적인 개발 워크플로에 기여합니다.

이 블로그 게시물에서는 Angular 17 웹 개발 프레임워크의 새로운 개선 사항과 업데이트를 디코딩할 수 있습니다. 또한 개발자가 이를 활용하여 협업을 촉진하고 코드 재사용성을 장려하고 확장 가능하고 유지 관리 가능한 웹 애플리케이션 생성을 보장해야 하는 이유도 이해하게 됩니다.

의 시작하자!

Angular 17의 주요 기능 및 개선 사항

1. 미래를 위한 문서화

Angular 17은angular.dev에 새로운 홈을 개발하여 문서화를 크게 향상시켰습니다. 이번 점검에는 개선된 구조, 업데이트된 가이드, 풍부한 콘텐츠, 그리고 Angular 및 Angular 명령줄 인터페이스(CLI)에 대한 대화형 학습 여정을 촉진하는 최첨단 플랫폼이 포함됩니다.

Angular.dev의 베타 프리뷰는 버전 18에서 Angular의 기본 웹사이트로 만들 계획과 함께 새로운 시대의 시작을 의미합니다. 하이라이트에는 WebContainers가 통합되어 있어 사용자가 최신 웹 브라우저 내에서 Angular CLI의 강력한 기능을 직접 활용할 수 있습니다. 이는 미래 지향적인 몰입형 문서 경험을 더욱 약속합니다.

2. 내장된 제어 흐름

Angular 17에서 주목할 만한 개선 사항은 *ngIf, *ngFor 및 *ngSwitch와 같은 기존 구조 지시어를 대체하는 새로운 제어 블록 구문의 도입입니다. 이러한 발전은 개발자에게 템플릿 코드의 유연성과 가독성을 향상시킵니다.

예를 들어 @if 및 @else 블록은 논리 표현식을 사용하여 조건부로 콘텐츠를 렌더링하는 더 깔끔한 방법을 제공합니다. @for 블록은 컬렉션 반복을 단순화하여 보다 표현력 있고 간결한 코드를 가능하게 합니다. 또한 @switch, @case 및 @default 블록은 효율적인 제어 흐름을 촉진하여 여러 조건 처리를 향상시킵니다.

이러한 개선 사항을 수용하기 위해 개발자는 제공된 회로도를 사용하여 기존 템플릿을 마이그레이션할 수 있습니다. 이는 Angular 17의 템플릿 개발에 대한 보다 현대적이고 간소화된 접근 방식으로 이어질 것입니다.

3. 내장된 @for 루프

Angular 17에 내장된 @for 루프 기능은 개발자 경험과 렌더링 속도 모두에서 상당한 개선을 보여줍니다. 이 구문은 효율적인 변경 감지를 위해 "추적" 사용을 의무화하여 *ngFor를 사용하는 애플리케이션에서 나타나는 일반적인 성능 병목 현상을 해결합니다. 또한 더 빠른 렌더링 프로세스를 보장합니다.

이전 버전과 달리 "추적" 기능은 템플릿 내의 표현식으로 원활하게 통합되므로 구성 요소 클래스에 추가 메서드가 필요하지 않습니다. 특히 내장된 @for 루프는 선택적인 @empty 블록을 통해 항목이 없는 컬렉션을 처리하기 위한 편리한 단축키도 제공합니다. 이 기능은 개발을 간소화할 뿐만 아니라 Angular 애플리케이션의 성능을 크게 향상시켜 프레임워크 발전에 있어 주목할 만한 이정표를 세웁니다.

4. 연기 가능한 뷰

Angular 17에서는 지연 로드 구성 요소, 지시문 및 파이프에 대한 직관적인 메커니즘에 대한 Angular 커뮤니티의 요청에 따라 Deferrable Views라는 중요한 향상된 기능이 도입되었습니다.

이 새로운 기능은 종속성의 지연 로드 프로세스를 보다 직관적이고 편리하게 만드는 것을 목표로 합니다. 지연 가능한 뷰를 사용하면 개발자는 필요할 때까지 템플릿의 일부를 선언적으로 지연 로드하여 초기 번들 크기를 최적화하고 애플리케이션의 초기 로드 시간을 향상시킬 수 있습니다. 이는 템플릿에서 새로운 "@-syntax" 제어 흐름 구문을 사용하여 달성됩니다.

Deferrable Views는 지연 로딩을 위한 내장형 및 관리형 솔루션을 제공하므로 개발자는 자세한 동적 가져오기, 교차 관찰자 또는 이벤트 처리기를 관리하지 않고도 자신의 의도를 표현할 수 있습니다. 이 기능은 더 빠른 리소스 가용성을 위해 프리페칭도 지원합니다.

또한 개발자는 통합된 트리거와 사용자 지정 조건을 사용하여 지연 로드가 발생하는 시기와 방법을 지정할 수 있습니다. 또한, Deferrable Views는 상용구 코드를 줄여 뒤에서 종속성 관리를 자동으로 처리합니다.

5. 향상된 서버 측 렌더링(SSR)

Angular 17의 서버 측 렌더링 기능을 통해 개발자는 애플리케이션 성능과 사용자 경험을 향상시킬 수 있습니다. Hydration Boost 기능은 클라이언트 측 JavaScript 하이드레이션 프로세스를 간소화하여 깜박임을 최소화하고 대화형 웹 페이지로 보다 원활하게 전환되도록 합니다.

Angular 17은 또한 SSR용 표준화된 EcmaScript 모듈(ESM) 형식을 채택하여 빌드를 단순화하고 널리 사용되는 도구와의 호환성을 향상시킵니다. 또한 코드 분할 기술을 통해 SSR 번들 크기를 줄이는 데 중점을 두어 서버 응답 속도를 높이고 검색 엔진 최적화를 강화합니다. 이러한 발전으로 인해 Angular 17은 고성능 및 SEO 친화적인 웹 애플리케이션을 구축하기 위한 강력한 선택이 되었습니다.

6. 안정적인 신호

Angular 17은 반응형 애호가를 위한 중추 도구인 신호 안정화를 통해 획기적인 개발을 도입했습니다. "개발자 미리 보기"라는 라벨을 벗은 Signals는 이제 상태를 관리하고 구성 요소 업데이트를 촉진하는 강력한 솔루션으로 자리매김했습니다.

변경 감지.OnPush와 신호의 통합은 어느 정도의 정확성을 제공합니다. 이를 통해 특정 신호가 변경될 때만 구성요소를 새로 고치고 불필요한 재렌더링을 방지하여 성능을 최적화합니다. 불변 업데이트를 위해 mutate 메서드를 폐기함으로써 상태 기록 유지 관리의 예측 가능성과 청결성이 더욱 향상되었습니다. Signals가 주목을 받는 동안, 아직 개발자 프리뷰 상태인 Effects는 비동기 작업을 위한 강력한 기능을 제공하여 Angular 상태 관리의 미래를 엿볼 수 있습니다.

본질적으로 Angular 17은 개발자에게 안정적인 신호, OnPush 통합, 불변 업데이트 및 진화하는 Effects 잠재력을 포함한 세련된 도구 세트를 제공합니다. 이는 궁극적으로 잘 구조화된 애플리케이션의 생성을 촉진합니다.

7. esbuild를 통한 성능 구축

Angular 17에서 esbuild를 채택한 것은 Angular 프로젝트의 빌드 성능을 향상시키는 데 있어 중요한 진전입니다. 원래 Webpack에 의존하던 Angular CLI는 사용자 친화적인 특성과 놀라운 속도로 유명하며 매주 20,000회 이상의 다운로드를 자랑하는 최신 도구인 esbuild를 활용하는 것으로 전환했습니다.

esbuild 통합은 Angular 16에서 개발자 프리뷰로 구현되었으며 이제 Angular 17에서 안정적인 구현으로 성숙되었습니다. 이 통합은 Application Builder를 통해 새 프로젝트의 기본 빌더가 되었습니다. 기존 프로젝트의 경우 개발자는angular.json의 빌더 항목을 업데이트하여 esbuild로 전환하는 것을 고려하는 것이 좋습니다.

이러한 통합을 통해 ng Serve 및 ng 빌드 작업 모두 필요한 경우에만 효율적인 npm 패키지 구축을 위해 Vite 개발 서버를 활용하여 속도가 크게 향상되었습니다. CLI 팀의 다양한 성능 최적화 통합은 빌드 프로세스 가속화에 더욱 기여하며, ng 빌드는 종종 2~4배의 속도 향상을 달성합니다. 이러한 전환은 개발자에게 워크플로를 단순화할 뿐만 아니라 프로젝트 빌드 효율성을 크게 향상시키는 도구를 제공하려는 Angular의 노력을 강조합니다.

8. 독립형 구성 요소

"독립형 구성 요소"는 상위 모듈 없이도 구성 요소를 생성하고 활용할 수 있는 Angular 17의 획기적인 기능입니다. 이러한 패러다임 전환에서 "AppComponent"로 예시된 루트 구성 요소는 구성 요소 데코레이터의 "standalone: ​​true" 속성을 사용하여 독립형으로 표시됩니다. 이 속성은 구성 요소가 상위 모듈과 독립적으로 작동함을 나타냅니다. 또한 구성 요소는 모듈에 의존하는 대신 "imports" 배열을 활용하여 라우터 모듈과 같은 필요한 종속성을 가져옵니다.

그런 다음 "bootstrapApplication" 기능을 사용하여 응용 프로그램을 시작합니다. 이는 기존 NgModule 중심 접근 방식에서 벗어남을 보여줍니다. 독립형 구성 요소의 새로 발견된 유연성은 모듈식 및 캡슐화된 개발 스타일을 촉진하여 구성 요소 아키텍처를 발전시키고 향상시키려는 Angular의 노력을 보여줍니다.

Angular 17로 마이그레이션하는 방법은 무엇입니까?

기존 Angular 애플리케이션을 버전 17로 업그레이드하려면 다음 단계를 따르세요.

• 먼저 'npm install -g @angular/cli@17' 명령을 사용하여 Angular CLI를 버전 17로 전체적으로 업데이트합니다.

• 다음으로 'ng update @angular/core'를 실행하여 Angular 코어 패키지를 업데이트하세요.

• 추가 Angular 패키지를 사용하는 경우 Angular Material의 경우 'ng update @angular/material'과 같은 코드를 사용하여 개별적으로 업데이트하세요.

• 그런 다음 애플리케이션을 철저하게 테스트하여 업데이트 후 예상대로 작동하는지 확인하세요.

여기에서 따를 수 있는 몇 가지 팁에는 주요 업데이트 간 마이너 버전 업그레이드, 업그레이드 전 코드 및 데이터베이스 백업, 타사 라이브러리 호환성 확인 등이 있습니다. 또한 업그레이드 프로세스 중에 문제가 발생하는 경우 Angular 문서 및 커뮤니티 포럼을 참조하여 도움을 받아야 합니다. 이러한 간소화된 단계를 통해 잠재적인 문제를 최소화하면서 최신 Angular 버전으로 원활하게 전환할 수 있습니다.

Angular를 사용하여 강력하고 기능이 풍부한 최신 애플리케이션을 만들 준비가 되셨나요? 전문가와 상담하세요!

참고자료:

^[i] 스타티스타