데스크톱에서 웹으로 마이그레이션: WPF에서 Angular 튜토리얼

WPF에서 Angular 로의 튜토리얼은 desktop에서 web 프레임워크로의 원활한 전환을 위해 취해야 할 첫 번째 단계입니다. 이 튜토리얼은 웹 개발에 첫 발을 내딛는 WPF 개발자를 대상으로 하며 두 프레임워크의 몇 가지 차이점과 유사점(애플리케이션 구조, 데이터 바인딩, 이벤트, 구성 요소 등)을 살펴봅니다.

가이드는 다음 주제로 구분되어 있으며 비디오 튜토리얼이 포함되어 있습니다.

첫 번째 Angular 애플리케이션을 만들어보세요

Angular 학습 경로를 시작하기 전에 Angular 사용하여 최신 웹 앱 개발을 위한 필수 구성 요소를 설치해야 합니다. 이 섹션에서는 Node.js 패키지 관리자 사용, Visual Studio Code IDE 설치 및 최신 웹 개발에 필요한 몇 가지 기본 개념을 다룹니다. 이 주제에 대한 비디오 튜토리얼을 확인하세요.

Angular에서 UI를 만드는 것은 WPF에서 UI를 만드는 방법과 매우 유사합니다. 일반적으로 UserControl 클래스로 표현되는 사용자 컨트롤을 사용합니다. UserControl은 마크업과 코드를 재사용 가능한 컨테이너로 그룹화하여 동일한 인터페이스와 기능을 여러 다른 위치에서 사용할 수 있습니다. Angular의 구성 요소를 이해하는 것은 이 시리즈의 나머지 부분에서 중요합니다. 따라서 WPF 구성 요소가 Angular의 구성 요소로 변환되는 방식을 이해하는 것으로 시작해 보겠습니다. 이 주제에 대한 비디오 자습서를 확인하세요.

Angular 에서의 단방향 데이터 바인딩

WPF에서 가장 강력하고 널리 사용되는 기능 중 하나는 데이터 바인딩입니다. 이 기능은 개발자의 삶을 훨씬 더 편리하게 만들어 주며, 단 한 줄의 추가 코드도 작성하지 않고도 비즈니스 로직을 뷰와 동기화하고 그 반대로도 동기화합니다. 이 기능이 없다면 WPF는 그저 더 보기 좋은 Windows Forms일 뿐입니다. 다행히도 Angular 데이터 바인딩을 지원합니다! 데이터 바인딩에는 단방향 바인딩과 양방향 바인딩의 두 가지 유형이 있습니다. 이 섹션에서는 단방향 데이터 바인딩을 수행하는 방법과 WPF와 비교하는 방법을 보여줍니다. 이 주제에 대한 비디오 자습서를 확인하세요.

Angular 이벤트

사용자 입력 이벤트에 바인딩하는 것은 모든 앱의 핵심입니다. 어떤 유형의 사용자 상호 작용에 어떤 식으로든 응답하지 않는 새 앱을 작성하는 것은 상상하기 어렵습니다. 이를 수행하는 가장 일반적인 방법은 어떤 유형의 이벤트 시스템을 사용하는 것입니다. WPF는 라우트된 이벤트, CLR 이벤트 및 명령을 제공합니다. Angular 에는 DOM 이벤트가 있습니다. 이 섹션에서는 DOM 이벤트와 사용자 입력을 처리하는 방법에 대해 알아봅니다. 이 주제에 대한 비디오 자습서를 확인하세요.

데스크톱에서 웹으로 마이그레이션: WPF에서 Angular 튜토리얼

첫 번째 Angular 애플리케이션을 만들어보세요

Angular 컴포넌트로 UI 만들기

Angular 에서의 단방향 데이터 바인딩

Angular 이벤트

Angular 에서의 양방향 데이터 바인딩

Angular Pipes를 사용한 데이터 변환

Angular의 구조적 지침

레이아웃 요소

테마