Angular 프론트엔드 강의

1 수업 • Angular 모듈 및 애플리케이션 부트스트랩

NgModule, 루트 AppModule, 그리고 Angular가 애플리케이션을 부트스트랩하는 방식을 설명합니다. 컴포넌트를 구축하기 전에 필요한 구조적 맥락을 제공합니다.

2 수업 • Angular를 위한 TypeScript 필수 사항

Angular 코드를 작성하는 데 필요한 TypeScript 타입, 인터페이스, 데코레이터를 소개합니다. JavaScript 지식을 Angular의 타입 기반 생태계와 연결합니다.

3 수업 • Angular 프레임워크 소개

현대 프론트엔드 개발에서 Angular의 역할과 MVC에서 영감을 받은 아키텍처를 다룹니다. 이후의 모든 프레임워크 주제에 대한 개념적 기초를 제공합니다.

4 수업 • 개발 환경 설정

Node.js, npm, Angular CLI를 설치하고 구성합니다. 모든 수강생이 일관되고 재현 가능한 로컬 작업 공간을 갖추도록 합니다.

1 수업 • 내장 구조 디렉티브

*ngIf, *ngFor, *ngSwitch를 적용하여 DOM 구조를 동적으로 제어합니다. 디렉티브가 템플릿 표현력을 확장하는 방법을 보여줍니다.

2 수업 • 속성 바인딩과 이벤트 바인딩

속성 바인딩을 통한 단방향 데이터 흐름과 이벤트 바인딩을 통한 사용자 이벤트 처리를 설명합니다. 컴포넌트 로직을 DOM 요소 및 사용자 상호작용과 연결합니다.

3 수업 • 템플릿 문법과 표현식

Angular의 템플릿 표현식 언어, 안전 탐색 연산자, 템플릿 참조 변수를 다룹니다. 컴포넌트 뷰 내에서 동적 콘텐츠 렌더링을 가능하게 합니다.

4 수업 • 컴포넌트 생명 주기 훅

ngOnInit부터 ngOnDestroy까지의 전체 생명 주기 훅 순서를 탐구합니다. 각 훅을 초기화 및 정리에 사용해야 하는 시기와 이유를 설명합니다.

1 수업 • ViewChild 및 ContentChild 쿼리

쿼리를 통해 프로그래밍 방식으로 자식 컴포넌트 인스턴스와 투영된 콘텐츠에 접근합니다. 템플릿 바인딩을 넘어선 고급 컴포넌트 조정을 가능하게 합니다.

2 수업 • @Input을 사용한 부모-자식 통신

@Input을 사용하여 데이터를 컴포넌트 트리 아래로 전달하고 세터로 입력값을 검증합니다. Angular의 기본 하향 데이터 흐름 패턴을 확립합니다.

3 수업 • 사용자 정의 구조 디렉티브 구축

TemplateRef와 ViewContainerRef를 사용하여 구조 디렉티브를 구현하고 DOM을 조작합니다. 재사용 가능한 레이아웃 로직을 생성하는 능력을 확장합니다.

4 수업 • 사용자 정의 어트리뷰트 디렉티브 구축

DOM 구조를 변경하지 않고 호스트 요소의 모양이나 동작을 수정하는 디렉티브를 생성합니다. 2장에서 소개된 디렉티브 패턴을 강화합니다.

1 수업 • Angular 서비스 생성 및 제공

CLI로 서비스를 생성하고 모듈, 컴포넌트 또는 루트 범위에 등록합니다. 서비스 계층을 공유 로직의 본거지로 확립합니다.

2 수업 • HTTP 클라이언트 및 REST API 통합

HttpClientModule을 구성하고 GET, POST, PUT, DELETE 요청을 수행합니다. 서비스 계층을 실제 백엔드 데이터 소스와 연결합니다.

3 수업 • 오류 처리 및 HTTP 인터셉터

catchError를 사용한 전역 오류 처리와 인터셉터를 사용한 요청/응답 변환을 구현합니다. 프로덕션 준비가 된 HTTP 통신 패턴을 생성합니다.

4 수업 • 의존성 주입 심층 분석

DI 계층 구조, 주입 토큰, 제공자 유형을 탐구합니다. 앱 전체에서 의존성이 해결되는 방식을 세밀하게 제어할 수 있게 합니다.

1 수업 • 라우트 가드 및 접근 제어

CanActivate, CanDeactivate, CanLoad 가드를 구현하여 라우트를 보호합니다. 인증 및 권한 부여를 내비게이션 계층에 통합합니다.

2 수업 • 지연 로딩 및 라우트 리졸버

앱을 필요에 따라 로드되는 기능 모듈로 분할하고 리졸버로 데이터를 미리 가져옵니다. 초기 로드 성능과 사용자 경험을 개선합니다.

3 수업 • 중첩 라우트 및 명명된 아울렛

부모 라우트 아래에 자식 라우트를 구성하고 보조 뷰를 위해 명명된 아울렛을 사용합니다. 대규모 애플리케이션의 복잡한 레이아웃 요구 사항을 지원합니다.

4 수업 • Router 설정 및 기본 내비게이션

라우트 정의로 RouterModule을 구성하고 router-outlet과 routerLink를 추가합니다. 모든 내비게이션 기능의 기초를 확립합니다.

1 수업 • FormArray를 사용한 동적 폼

FormArray를 사용하여 가변 길이 데이터에 대한 폼 컨트롤을 런타임에 추가 및 제거합니다. 반복되는 라인 아이템과 같은 실제 시나리오를 처리합니다.

2 수업 • 유효성 검사기 및 사용자 정의 검증

동기 및 비동기 유효성 검사기를 적용하고 재사용 가능한 사용자 정의 유효성 검사기 함수를 생성합니다. 제출 전 데이터 무결성을 보장합니다.

3 수업 • 폼 제출 및 상태 관리

원활한 사용자 경험을 제공하기 위해 폼 제출, 리셋, dirty/touched 상태를 처리합니다. 폼 데이터를 4장에서 소개된 서비스 호출에 연결합니다.

4 수업 • 템플릿 기반 폼

ngForm, ngModel, 내장 유효성 검사기를 사용하여 템플릿에서 선언적으로 폼을 구축합니다. 최소한의 TypeScript 오버헤드로 폼 개념을 소개합니다.

1 수업 • NgRx Entity 및 DevTools

NgRx Entity로 컬렉션 관리를 단순화하고 Redux DevTools로 상태를 검사합니다. 스토어 중심 기능의 개발 및 디버깅을 가속화합니다.

2 수업 • NgRx Store 소개

NgRx를 설치하고 기능 슬라이스에 대한 액션, 리듀서, 스토어를 정의합니다. Angular 생태계 내에서 Redux 패턴을 확립합니다.

3 수업 • BehaviorSubject를 사용한 서비스 기반 상태

서비스에서 BehaviorSubject를 사용하여 상태를 저장하고 컴포넌트 간에 공유합니다. NgRx를 도입하기 전에 가벼운 상태 솔루션을 제공합니다.

4 수업 • NgRx Effects를 사용한 부수 효과 처리

NgRx Effects를 사용하여 리듀서 외부에서 HTTP 호출과 같은 비동기 작업을 처리합니다. 리듀서를 순수하게 유지하고 부수 효과 로직을 중앙 집중화합니다.

1 수업 • 배포 전략 및 CI/CD 통합

Angular 빌드를 정적 호스팅에 배포하고 지속적 전달을 위한 자동화된 파이프라인을 통합합니다. 코드에서 프로덕션까지의 개발 수명 주기를 마무리합니다.

2 수업 • 컴포넌트 및 서비스 단위 테스트

Jasmine과 TestBed를 사용하여 컴포넌트, 서비스, 파이프에 대한 단위 테스트를 작성합니다. 통합 전에 개별 단위를 격리하여 검증합니다.

3 수업 • 번들 최적화 및 빌드 구성

최적의 번들 크기를 위해 프로덕션 빌드, 트리 쉐이킹, 차등 로딩을 구성합니다. 실제 배포 제약 조건에 대비하여 앱을 준비합니다.

4 수업 • Cypress를 사용한 엔드 투 엔드 테스트

Cypress로 사용자 흐름 테스트를 자동화하여 전체 애플리케이션 동작을 검증합니다. 현실적인 브라우저 기반 시나리오로 단위 테스트를 보완합니다.