Sort

Oldest Recently updated Least recently updated

예제 만들어보기

3 Open

4 Closed

1. 간단한 To-Do 리스트 애플리케이션

• 목표: Blazor의 기본적인 컴포넌트 구조와 데이터 바인딩을 학습

• 포인트
  • 컴포넌트 생성 및 렌더링
  • 데이터 바인딩 (@bind)
  • 이벤트 핸들링

• 설명: 사용자가 할 일을 입력하고, 목록에서 완료된 할 일을 삭제하는 간단한 애플리케이션

2. Form 처리 및 유효성 검사 예제

• 목표: Blazor의 폼 처리와 유효성 검사 기능을 익힘

• 포인트
  • 폼 데이터 바인딩
  • 데이터 유효성 검사 (Validation)

• 설명: 사용자 입력 폼을 만들어서 기본적인 유효성 검사를 진행. 예를 들어, 사용자 이름과 이메일 주소 입력 폼을 구현해 보세요.

3. Dependency Injection (DI)를 사용하는 블로그 앱

• 목표: Blazor의 DI 패턴을 이해하고 데이터 관리

• 포인트
  • @inject 사용
  • 서비스 라이프사이클 관리 (싱글턴, 트랜지언트, 스코프드)

• 설명: 블로그 포스트를 추가, 삭제, 수정할 수 있는 간단한 블로그 앱을 만들어보세요. 데이터를 관리하는 서비스 클래스를 DI로 주입해 데이터를 처리합니다.

4. Blazor와 SignalR을 이용한 채팅 애플리케이션

• 목표: 실시간 데이터 전송 및 SignalR 사용 학습

• 포인트
  • SignalR 허브와 클라이언트 간의 실시간 통신
  • 클라이언트와 서버 간 양방향 데이터 전송

• 설명: 사용자가 채팅 메시지를 실시간으로 주고받는 간단한 채팅 애플리케이션을 만들어보세요.

5. Flight Seat Selection Screen

• 목표: 사용자 인터페이스 커스터마이징 및 고급 컴포넌트 처리

• 포인트
  • 이미지 위에 버튼 오버레이
  • 사용자의 좌석 선택 기능 구현

• 설명: 좌석 선택을 위한 UI를 구현하며, 복잡한 사용자 인터페이스를 다루는 방법을 연습할 수 있습니다.

6. Blazor State Management 프로젝트

• 목표: 상태 관리(State Management) 방법을 학습

• 포인트
  • Cascading Parameters, Application State
  • LocalStorage 또는 SessionStorage 사용

• 설명: 상태 관리가 필요한 쇼핑 카트 시스템을 만들어서 사용자가 선택한 상품을 저장하고, 해당 데이터를 세션이나 애플리케이션 전반에 걸쳐 유지하는 예제를 구현해보세요.