Angular 17 교육 과정

Angular 17 소개

• Angular란 무엇인가?
• Angular vs React vs Vue
• Angular 17의 기능 및 아키텍처 개요
• 개발 환경 설정

시작하기

• Angular CLI를 사용하여 새 Angular 17 프로젝트 생성
• 프로젝트 구조 및 파일 탐색
• 애플리케이션 실행 및 서빙
• 보간법 및 표현식을 사용하여 데이터 표시

컴포넌트

• Angular 17에서 컴포넌트의 역할 이해
• 컴포넌트 생성 및 사용
• 입력(input) 및 출력(output)을 사용하여 컴포넌트 간 데이터 전달
• 컴포넌트 생명주기 훅 사용

디렉티브

• 구조적 디렉티브와 속성 디렉티브의 차이 이해
• ngIf, ngFor, ngSwitch 등 내장 디렉티브 생성 및 사용
• 사용자 정의 디렉티브 생성 및 사용

파이프

• Angular 17에서 파이프의 목적 이해
• date, currency, json 등 내장 파이프 생성 및 사용
• 사용자 정의 파이프 생성 및 사용

서비스

• Angular 17에서 서비스의 역할 이해
• 서비스 생성 및 사용
• 프로바이더를 사용하여 의존성 주입

모듈

• Angular 17에서 모듈의 역할 이해
• 모듈 생성 및 사용
• 모듈 가져오기 및 내보내기

데이터 바인딩

• 일방향 및 양방향 데이터 바인딩의 차이 이해
• 속성 바인딩, 이벤트 바인딩, 바나나인박스(banana-in-a-box) 문법 생성 및 사용
• 템플릿 참조 변수 사용

라우팅

• Angular 17에서 라우팅의 역할 이해
• 루트 생성 및 구성
• routerLink와 router.navigate()를 사용하여 루트 간 탐색
• 루트 파라미터, 쿼리 파라미터, 프래그먼트 사용

폼

• 템플릿 기반 폼과 반응형 폼의 차이 이해
• 폼 컨트롤, 폼 그룹, 폼 어레이 등을 사용하여 폼 생성 및 검증
• required, minLength, maxLength 등 내장 검증기 사용
• 사용자 정의 검증기 생성 및 사용

HTTP 클라이언트

• Angular 17에서 HTTP 클라이언트의 역할 이해
• HTTP 요청 생성 및 사용하여 백엔드 서비스와 통신
• 옵저버블을 사용하여 비동기 데이터 스트림 처리
• 인터셉터를 사용하여 HTTP 요청 또는 응답 수정 및 처리

새로운 선언적 제어 흐름

• 새로운 템플릿 제어 블록 문법 설명 및 조건부 렌더링, 루프, 빈 컬렉션 처리와 같은 일반적인 작업을 단순화하는 방식 이해
• @if, @else, @switch, @case, @default, @for, @empty 등 새 블록 사용 예시 제공
• *ngIf, *ngSwitch, *ngFor 등 기존 문법과 새로운 문법 비교
• 새로운 제어 블록이 시그널을 통한 존리스(zoneless) 애플리케이션을 지원하는 방식 언급

지연 로드 블록

• 지연 로드 개념 설명 및 웹 애플리케이션의 성능과 사용자 경험 향상에 미치는 영향 이해
• 블록의 내용 및 의존성을 지연 로드할 수 있는 새로운 @defer 제어 블록 소개
• 컴포넌트, 디렉티브, 파이프, 애니메이션, 스타일 로드 등 다양한 시나리오에 대한 @defer 블록 사용 예시 제공
• @defer 블록이 새로운 뷰 트랜지션 API와 함께 작동하는 방식 언급

뷰 트랜지션 API

• 개발자가 뷰 간의 애니메이션과 전환을 사용자 지정할 수 있게 하는 뷰 트랜지션 API의 목적과 이점 설명
• 뷰 트랜지션 API 사용이 가능한 새로운 withViewTransitions 디렉티브 소개
• 페이드, 슬라이드, 줌, 플립 등 다양한 전환 유형을 위한 withViewTransitions 디렉티브 사용 예시 제공
• 뷰 트랜지션 API가 Angular 라우터와 브라우저 히스토리과 작동하는 방식 언급

다른 기능 및 개선 사항

• Angular 17이 제공하는 다른 기능 및 개선 사항의 간단한 요약, 예를 들면:
• @Component.styles를 문자열로 전달하도록 지원
• Angular 애니메이션 코드를 지연 로드할 수 있음
• TypeScript 5.2 지원
• 핵심 시그널 API가 이제 안정적임
• Node.js v16 지원이 제거되었으며 최소 지원 버전은 v18.13.0입니다
• Esbuild가 기본 빌더가 되고 기본 개발 서버가 Vite를 사용함