Angular 배우기 - 코딩 강좌

첫 번째 component부터 서버와 통신하는 실제 웹 앱까지, 단계별로 Angular를 학습하세요. 3개 패널로 구성된 워크벤치에서 TypeScript, 템플릿, 스타일을 작성하고 휴대폰에서 component가 실시간으로 렌더링되는 모습을 확인하세요.

실습 중심으로 구성된 웹 개발 과정입니다. 프론트엔드 개발자가 사용하는 방식 그대로, component, 서비스, 템플릿 안에서 TypeScript를 학습합니다.

학습 내용

• 초급(A1)부터 고급(C1)까지 38개 과정과 짧은 144개 레슨

• component.ts, template.html, styles.css를 나란히 배치하고 작성한 코드를 실행하는 미리보기를 제공하는 실시간 워크벤치

• 여러 파일로 구성된 작업 공간, 안내형 프로젝트 트랙, 버전 기록을 제공하는 Projects 탭

• 세 가지 난이도의 TypeScript 코딩 미션 60개와 힌트 및 풀이

• 최종 시험과 이름이 표시된 수료증

• 앱은 22개 언어로 제공됩니다

완전한 프론트엔드 개발자 학습 경로

• 독립형 component, 템플릿, 내장 제어 흐름(@if, @for)

• signal():, computed(), effect(), signal 입력 및 쿼리를 포함한 Signals

• 데이터 바인딩, 양방향 바인딩, 파이프, 생명주기 훅

• 의존성 주입과 공유 서비스

• 고급 라우터 패턴을 포함한 라우팅 및 탐색

• 템플릿 기반 및 반응형 폼, 사용자 지정 폼 컨트롤

• RxJS 기초와 연산자

• 실제 API 데이터를 위한 HttpClient 및 인터셉터

• NgRx 및 NgRx SignalStore를 활용한 상태 관리

• 단위, component, 엔드투엔드 테스트

• 변경 감지, 성능, 서버 측 렌더링 및 하이드레이션

• 마이크로 프론트엔드, 라이브러리, i18n 및 보안

꾸준히 익히는 연습

• 자주 잊는 개념을 위한 미니 퀴즈와 플래시카드 복습

• 구문, 데코레이터, 디렉티브를 한 페이지에 정리한 치트시트

• 열어 보고 실행하고 수정할 수 있는 짧은 예제 component 모음

• 프론트엔드 개발자 면접 전에 유용한 명확한 답변이 포함된 면접 질문 50개

• 월드 코딩 챌린지: 하나의 공통 문제와 모두의 풀이

• 코딩 습관을 이어 가도록 돕는 연속 학습 기록, XP, 리더보드, 일일 알림

AI 도구 (PRO)

• AI 튜터: 오류, 개념 또는 자신의 코드를 질문하고 명확한 설명을 받기

• AI 레슨 생성기: 아직 이해하지 못한 주제에 대한 맞춤형 레슨

• AI 플레이그라운드: 페이지를 설명하고 코드가 만들어지는 모습을 확인하기

대상

• 웹 개발과 프론트엔드 작업을 처음 시작하는 초보자

• 첫 프레임워크를 배우는 JavaScript 및 TypeScript 개발자

• 직장에서 이 프레임워크로 전환하는 React 또는 Vue 개발자

• 웹 개발자 취업을 준비하는 학생 및 커리어 전환자

무료 및 PRO

첫 번째 과정과 실시간 워크벤치는 무료입니다. PRO에서는 모든 과정, 모든 코딩 미션, AI 도구를 이용할 수 있으며 광고가 제거됩니다.

참고: 실시간 미리보기를 사용하려면 인터넷 연결이 필요합니다.

이 앱은 CoddyKit의 독립적인 학습 과정입니다. Google 또는 Angular 팀과 제휴하거나 Google 또는 Angular 팀의 보증을 받지 않습니다.

오늘 시작하여 자신의 속도로 Angular를 배우고 몇 분 만에 첫 component를 만들어 보세요.