Angular 배우기 - 코딩 강좌 — 휴대폰에서 컴포넌트를 작성하고 실시간으로 렌더링되는 모습을 확인하세요

편집할 수 있는 세 개의 창이 있어요. TypeScript 클래스를 위한 component.ts, 마크업을 위한 template.html, 스타일 지정을 위한 styles.css예요. 이 세 창 중 어느 곳을 편집하든 컴포넌트를 렌더링하는 preview가 옆에 표시돼요. 클래스에서 signal 값을 변경하고 template이 즉시 업데이트되는 모습을 보는 것은 책의 정적인 코드 예제로는 보여 줄 수 없는 부분이에요. 그래서 이 과정은 읽기만 하는 예제가 아니라 이 기능을 중심으로 구성되어 있어요.

JavaScript를 어느 정도 알면 도움이 되지만, 먼저 반드시 끝내야 하는 선수 조건은 아니에요. Angular는 TypeScript로 작성되며, TypeScript는 type system이 추가된 JavaScript예요. 이 과정에서는 이미 알고 있다고 가정하지 않고 type annotation과 interface가 등장할 때 함께 소개해요. Angular 배우기 - 코딩 강좌는 첫 standalone component부터 시작하며 그 과정에서 TypeScript도 함께 설명해요.

signal은 signal()로 생성하는 반응형 값으로, template이 이를 직접 읽어요. computed()는 기존 signal에서 새로운 signal을 파생하고, effect()는 의존하는 signal이 변경될 때마다 코드를 자동으로 실행해요. signals는 컴포넌트 상태를 보관하는 현재 Angular 권장 방식으로, 이전 버전에서 필요했던 수동 change-detection 작업을 상당 부분 대체해요. 그래서 Signals Fundamentals 과정이 고급 주제가 아니라 학습 경로 초반에 배치되어 있어요.

React는 렌더링 library이므로, 그 주변에 사용할 router, forms 처리 방식, HTTP client, state management를 직접 선택해야 해요. Angular는 full framework로, components, dependency injection, router, RxJS, 그리고 이제는 signals까지 이러한 요소를 기본으로 제공해요. React는 시작하기에 더 가볍고 Angular는 더 무겁게 느껴지는 편이지만, 대규모 팀에서는 Angular codebase가 회사마다 더 비슷한 형태를 보여요. 대기업에서 Angular를 계속 사용하는 이유 중 하나예요.

네. 특히 목표가 사이드 프로젝트가 아니라 취업이라면 그래요. Angular는 대기업과 enterprise tooling에서 많이 사용되며, 이런 환경에서는 새로움보다 Angular의 명확한 구조, 기본 제공 testing 지원, 장기 지원 일정이 더 중요해요. 그래서 Angular 관련 채용 공고는 비교적 안정적인 편이에요. 이 과정의 signals와 SignalStore 내용도 framework의 실제 현재 방향을 반영하며, 오래된 상태를 다루지 않아요.

전체 학습 시간보다 꾸준함이 더 중요해요. workbench에서 매일 짧은 레슨을 학습하면 대부분의 초보자는 몇 주 안에 컴포넌트 몇 개를 만들고 연결하며, signals로 컴포넌트 간에 데이터를 전달하고 API를 호출할 수 있어요. Dependency injection, RxJS operators, NgRx state management는 보통 두 번째 학습이 필요한 부분이라, 이 과정에서는 처음부터 다루지 않고 기초 이후에 배치했어요.

Angular 배우기 - 코딩 강좌는 App Store에서 iPhone과 iPad용으로, Google Play에서 Android용으로 이용할 수 있어요. 인터페이스는 22개 언어를 지원하며 4+ 연령 등급이에요. 완전한 초보자, 학생, 커리어 전환자, 그리고 JavaScript를 어느 정도 알고 Angular를 첫 framework로 배우거나 React 또는 Vue에서 Angular로 전환하려는 개발자를 위한 앱이에요.

앱은 App Store와 Google Play에서 무료로 다운로드할 수 있어요. 첫 번째 과정과 live workbench는 무료예요. Pro는 유료 업그레이드로, 모든 과정과 60개의 coding missions, AI tutor, lesson generator, playground를 잠금 해제하고 광고를 제거해요.

아니요. 적어도 preview 자체는 작동하지 않아요. 컴포넌트를 실시간으로 렌더링하려면 연결이 필요하며, 앱은 이 사실을 조용히 기능을 제한하는 대신 명확하게 알려 줘요. 레슨과 읽기 자료는 불안정한 연결에서도 계속 로드되고 이용할 수 있지만, 완전한 오프라인 workbench가 필요하다면 이 앱의 live preview는 제공되지 않아요.

아니요. Angular 배우기 - 코딩 강좌는 CoddyKit의 독립적인 학습 과정이며 Google 또는 Angular 팀과 제휴하거나 이들의 승인을 받은 앱이 아니에요. Google이 유지 관리하고 배포하는 framework를 가르치지만, 앱 자체는 공식 제품이 아닌 third-party 과정이에요.