Course Outline

소개

  • Angular이란 무엇입니까?
  • Angular 대 React 대 Vue
  • Angular 17 기능 및 아키텍처 개요
  • 개발 환경 설정

시작하기

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

구성요소

  • Angular 17에서 구성 요소의 역할 이해
  • 구성요소 생성 및 사용
  • 입력과 출력을 사용하여 구성요소 간에 데이터 전달
  • 구성요소 수명주기 후크 사용

지시문

  • 구조 지시문과 속성 지시문의 차이점 이해
  • ngIf, ngFor, ngSwitch 등과 같은 내장 지시어 생성 및 사용
  • 사용자 정의 지시어 생성 및 사용

파이프

  • Angular 17의 파이프 목적 이해
  • 날짜, 통화, json 등 내장 파이프 생성 및 사용
  • 커스텀 파이프 생성 및 사용

서비스

  • Angular 17의 서비스 역할 이해
  • 서비스 생성 및 사용
  • 공급자를 사용하여 종속성 주입

모듈

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

데이터 바인딩

  • 단방향 데이터 바인딩과 양방향 데이터 바인딩의 차이점 이해
  • 속성 바인딩, 이벤트 바인딩, Banana-in-a-box 구문 생성 및 사용
  • 템플릿 참조 변수 사용

라우팅

  • Angular 17에서 라우팅의 역할 이해
  • 경로 생성 및 구성
  • routerLink 및 router.navigate()를 사용하여 경로 간 탐색
  • 경로 매개변수, 쿼리 매개변수, 프래그먼트 사용

양식

  • 템플릿 기반 양식과 반응형 양식의 차이점 이해
  • 양식 컨트롤, 양식 그룹, 양식 배열 등을 사용하여 양식 생성 및 유효성 검사
  • 필수, minLength, maxLength 등과 같은 내장 유효성 검사기 사용
  • 사용자 정의 유효성 검사기 생성 및 사용

HTTP 클라이언트

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

새로운 선언적 제어 흐름

  • 새로운 템플릿 제어 블록 구문을 설명하고 조건부 렌더링, 반복, 빈 컬렉션 처리와 같은 일반적인 작업을 단순화하는 방법
  • @if, @else, @switch, @case, @default, @for 및 @empty와 같은 새 블록 사용 예제 제공
  • *ngIf, *ngSwitch 및 *ngFor와 같은 이전 구문과 새 구문 비교
  • 새로운 제어 블록이 신호를 사용하여 구역 없는 애플리케이션을 지원하는 방법 언급

지연된 로딩 블록

  • 지연 로딩의 개념과 이것이 웹 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있는 방법을 설명합니다.
  • 블록 콘텐츠와 해당 종속성의 지연 로딩을 가능하게 하는 새로운 @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를 사용합니다.

요약 및 다음 단계

Requirements

  • HTML, CSS, Java스크립트에 대한 이해
  • TypeScript과 RxJS에 대한 경험
  • 웹 개발 경험

청중

  • Angular 17을 사용하여 동적이고 반응이 빠른 웹 애플리케이션을 만드는 방법을 배우고 싶은 개발자
  • Angular 이전 버전보다 실력을 업그레이드하고 싶은 개발자
  • Angular 17의 새로운 기능과 개선 사항을 살펴보고 싶은 프로그래머

 28 Hours

Number of participants



Price per participant

회원 평가 (6)

Related Courses

Related Categories