0Pricing
Angular Academy icon

Angular Academy

HTMLFrontendWebBeginner

Angular Academy와 함께 확장 가능하고 현대적인 웹 애플리케이션을 구축하기 위해 Angular를 배워보세요.

🤖 AI 기반📚 38개 코스👥 100,000명 이상의 학습자⭐ 4.9 평점
코스 개요

Angular: 프로덕션 규모 웹 앱을 뒷받침하는 프레임워크

Angular는 대규모의 유지보수하기 쉬운 단일 페이지 애플리케이션을 구축하는 데 사용되는 Google의 자견이 강한 TypeScript 우선 프레임워크입니다. 컴포넌트 모델, 의존성 주입 시스템, 그리고 일급 도구들이 엔터프라이즈 팀과 규모에 맞는 구조를 원하는 개발자들이 선택하는 프레임워크입니다. 이 트랙은 레거시 패턴이 아닌 현대 Angular — 스탠드얼론 컴포넌트, Signals, 그리고 새로운 제어 흐름 문법을 갖춘 버전 19 — 을 다룹니다.

배울 내용

Angular CLI, 프로젝트 구조, Angular 19 기초부터 시작한 후 Signals 기반 반응성, 스탠드얼론 컴포넌트, 그리고 의존성 주입으로 나아갑니다. 여기서부터 템플릿 기반 및 반응형 폼, RxJS 연산자, HttpClient 인터셉터, 컴포넌트 라이프사이클 훅, 콘텐츠 프로젝션, 애니메이션, 그리고 라우팅을 다룹니다. 이후 과정에서는 NgRx와 Signal 기반 NgRx SignalStore를 통한 상태 관리, 단위 및 엔드투엔드 테스트, 국제화, 그리고 커스텀 폼 컨트롤을 다룹니다. 트랙은 변경 감지 최적화, 서버사이드 렌더링, 하이드레이션, Module Federation을 통한 마이크로 프론트엔드, 재사용 가능한 Angular 라이브러리 구축, 그리고 Angular 보안 필수 사항으로 마무리됩니다.

학습 경로

37개 과정이 A1부터 C1까지 걸쳐 있습니다. 처음 8개 과정(A1–A2)은 기초를 다집니다: CLI 설정, 스탠드얼론 컴포넌트, 파이프, 라이프사이클 훅, 그리고 양방향 바인딩. B1과 B2 과정은 실무 기술을 개발합니다 — RxJS, 고급 라우팅, 반응형 폼, 지시자 조합, 그리고 전체 테스트 범위. C1 계층은 튜토리얼 Angular와 프로덕션 Angular를 구분 짓는 것을 다룹니다: 변경 감지 및 성능, NgRx SignalStore, Angular SSR로 서버사이드 렌더링, Module Federation으로 마이크로 프론트엔드, Angular 라이브러리 구축, 그리고 Angular 보안 필수 사항.

작동 방식

각 과정은 실시간 피드백과 함께 기본 제공 코드 편집기에서 완료하는 짧고 실무 중심의 레슨으로 나뉩니다. 막힐 때마다 AI 튜터를 이용할 수 있으며, 모든 개념은 브라우저에서 직접 실행되는 연습으로 강화됩니다 — 시작하기 위해 로컬 설정이 필요하지 않습니다.

학습 시작 →

학습 방식

🎯
인터랙티브 레슨
실시간 피드백을 받으며 직접 코딩 연습하기
🤖
AI 튜터
막힐 때마다 AI 튜터에게 즉시 도움받기
💻
내장 에디터
브라우저에서 바로 코드 작성 & 실행하기
🏆
수료증
과정을 완료하면 수료증 취득하기
커리큘럼

38개 코스

Angular Academy 학습 경로의 모든 코스.

01

Angular 입문

A13개 레슨

Angular가 무엇인지, Google이 이를 만들고 유지 관리하는 이유와 대규모 전문 웹 애플리케이션을 만드는 방식을 어떻게 바꾸는지 이해합니다.

02

Angular CLI와 프로젝트 구조

A14개 레슨PRO

Angular CLI로 Angular 프로젝트를 효율적으로 골격화하고 빌드하며 관리합니다.

03

내장 제어 흐름

A14개 레슨PRO

템플릿에서 조건문과 반복문을 위해 Angular의 최신 블록 제어 흐름 구문을 사용합니다.

04

Angular 19 기초

A13개 레슨PRO

Angular 19를 소개하고 주요 기능, 아키텍처, 환경 설정을 살펴봅니다.

05

Angular Signals 기초

A24개 레슨PRO

세밀하고 효율적인 상태 관리를 위해 Angular의 반응형 signals 기본 요소를 익힙니다.

06

독립 실행형 컴포넌트 심화

A24개 레슨PRO

독립 실행형 컴포넌트 아키텍처를 사용하여 NgModules 없이 Angular 앱을 구축합니다.

07

의존성 주입 기초

A24개 레슨PRO

Angular의 계층적 의존성 주입 시스템으로 서비스를 제공하고 사용합니다.

08

파이프: 내장 및 사용자 지정

A24개 레슨PRO

내장 파이프로 표시 데이터를 변환하고 직접 사용자 지정 파이프를 만듭니다.

09

컴포넌트 수명 주기 훅

A24개 레슨PRO

Angular 수명 주기 훅으로 컴포넌트 생성, 변경 및 소멸 시점에 연결합니다.

10

양방향 바인딩과 모델 입력

A24개 레슨PRO

양방향 바인딩과 신호 기반 모델 입력으로 부모와 자식 간 데이터를 동기화합니다.

11

컴포넌트 스타일 지정과 캡슐화

A24개 레슨PRO

범위가 지정된 CSS, 뷰 캡슐화 모드 및 호스트 스타일 지정으로 컴포넌트의 스타일을 지정합니다.

12

신호 입력과 쿼리

B14개 레슨PRO

더 깔끔한 컴포넌트를 위해 최신 신호 기반 입력, 출력 및 뷰 쿼리 API를 사용합니다.

13

Signals: 계산과 효과

B14개 레슨PRO

계산된 신호로 반응형 값을 도출하고 effect API로 부수 효과를 실행합니다.

14

Angular를 위한 RxJS 기초

B14개 레슨PRO

Angular 반응성의 기반인 관찰 가능 객체, 구독 및 주제를 이해합니다.

15

콘텐츠 투영과 템플릿

B14개 레슨PRO

콘텐츠 투영, ng-content 및 템플릿 참조로 유연하고 재사용 가능한 컴포넌트를 구축합니다.

16

Angular 애니메이션

B14개 레슨PRO

Angular의 선언적 애니메이션 시스템으로 인터페이스에 생동감을 더합니다.

17

고급 컴포넌트 및 디렉티브

B13개 레슨PRO

고급 컴포넌트 상호작용과 디렉티브, 모범 사례를 살펴봅니다.

18

Angular 라우팅 및 탐색

B13개 레슨PRO

Angular에서 라우팅, 탐색 가드, 경로 리졸버를 배워 보세요.

19

폼 다루기

B13개 레슨PRO

Angular에서 폼을 처리하는 방법을 자세히 다룹니다.

20

RxJS 연산자 심화

B24개 레슨PRO

매핑, 필터링, 결합 및 오류 연산자로 강력한 데이터 흐름을 구성합니다.

21

Angular Router 고급

B24개 레슨PRO

확인자, 경로 데이터, 매개변수 및 함수형 가드로 기본 라우팅을 넘어섭니다.

22

HttpClient 인터셉터

B24개 레슨PRO

함수형 및 클래스 기반 인터셉터로 여러 기능에 걸친 HTTP 관심사를 중앙에서 관리합니다.

23

반응형 폼 심화

B24개 레슨PRO

FormArray, 사용자 지정 컨트롤 및 비동기 검증으로 동적이고 강력한 형식의 반응형 폼을 구축합니다.

24

지시문 구성 API

B24개 레슨PRO

호스트 컴포넌트에 여러 지시문을 적용하여 재사용 가능한 동작을 구성합니다.

25

NgRx를 활용한 상태 관리

B23개 레슨PRO

NgRx를 사용해 애플리케이션 상태를 효율적으로 관리합니다.

26

신호 기반 상태 관리

B24개 레슨PRO

외부 라이브러리 없이 신호, 서비스 및 반응형 패턴으로 애플리케이션 상태를 설계합니다.

27

사용자 지정 폼 컨트롤

B24개 레슨PRO

ControlValueAccessor를 구현하여 사용자 지정 위젯을 Angular 폼과 통합합니다.

28

Angular 단위 및 컴포넌트 테스트

B24개 레슨PRO

TestBed와 Angular 테스트 유틸리티로 컴포넌트, 서비스 및 파이프를 테스트합니다.

29

Angular 종단 간 테스트

B24개 레슨PRO

Playwright와 Cypress를 사용한 종단 간 테스트로 실제 사용자 흐름을 검증합니다.

30

국제화 (i18n)

B24개 레슨PRO

내장 i18n 시스템과 런타임 번역 전략으로 Angular 앱을 현지화합니다.

31

HTTP 및 API 통합

B23개 레슨PRO

Angular에서 HTTP 통신과 API 통합을 익힙니다.

32

변경 감지와 성능

C14개 레슨PRO

OnPush 변경 감지, 영역 없는 모드 및 trackBy 전략으로 렌더링을 최적화합니다.

33

NgRx SignalStore

C14개 레슨PRO

최신 신호 기반 NgRx SignalStore로 복잡한 상태를 관리합니다.

34

Angular SSR을 활용한 서버 측 렌더링

C14개 레슨PRO

더 빠른 첫 화면 표시와 향상된 SEO를 위해 서버에서 Angular를 렌더링합니다.

35

하이드레이션과 성능

C14개 레슨PRO

전체 및 점진적 하이드레이션으로 SSR 앱의 속도를 높이고 클라이언트 작업을 최소화합니다.

36

Module Federation을 활용한 마이크로 프런트엔드

C14개 레슨PRO

독립적으로 배포할 수 있는 마이크로 프런트엔드로 대규모 Angular 앱을 구성합니다.

37

Angular 라이브러리 구축

C14개 레슨PRO

Angular Package Format으로 재사용 가능한 Angular 라이브러리를 패키징하고 게시합니다.

38

Angular 보안 필수 사항

C13개 레슨PRO

필수 기법을 활용해 Angular 애플리케이션을 안전하게 보호합니다.

자주 묻는 질문

자주 묻는 질문

Angular Academy 강의는 무료인가요?

네, Angular Academy 강의를 무료로 시작하고 인터랙티브 레슨을 모두 무료로 완료할 수 있습니다. 선택적 PRO 구독을 통해 고급 AI 도구와 공유 가능한 수료증을 잠금 해제할 수 있습니다.

HTML을(를) 배우기 위해 사전 경험이 필요한가요?

아니요. 강의는 기초부터 시작하여 점차 더 심화된 주제로 나아가므로 HTML 경험이 없어도 시작할 수 있습니다.

CoddyKit에서 HTML은(는) 어떻게 배우나요?

직접 해보면서 배웁니다. 짧은 인터랙티브 레슨은 명확한 설명과 실시간으로 실행되는 실습 코딩 연습을 함께 제공하며, 24시간 AI 튜터가 막힐 때마다 맞춤형 도움을 줍니다.

Angular Academy을(를) 완료하면 수료증을 받나요?

네, PRO 학습자는 시험을 응시하고 Angular Academy 강의의 검증 코드가 포함된 공유 가능한 수료증을 취득할 수 있습니다.

휴대폰에서 HTML을(를) 배울 수 있나요?

네, CoddyKit은 웹과 iOS, Android 네이티브 앱으로 이용 가능하므로 어느 기기에서나 HTML을(를) 배우고 진행 상황이 모든 기기에서 동기화됩니다.

Angular Academy을(를) 지금 시작하기

AI 기반 강의로 프로그래밍을 배우는 수천 명의 학습자들과 함께하세요.

무료로 시작하기 →모든 강의 보기