웹 애플리케이션 생성

Blazor Web App를 사용하는 프론트엔드

프론트엔드를 생성할 때 Lino는 자동으로 Blazor Web App 프로젝트를 생성하며 다음과 같이 구성됩니다:

• 간소화된 라우팅 → 기본 내비게이션 구조가 이미 구성되어 있음.
• Minimal APIs와 네이티브 통합 → 생성된 엔드포인트를 직접 사용.
• 재사용 가능한 CRUD 컴포넌트 → 목록, 생성, 편집 페이지가 표준화됨.
• 인증 및 권한 부여 지원 → 서비스가 보안 설정된 경우.

이 프론트엔드는 이미 애플리케이션 모듈에서 생성된 API를 소비할 수 있도록 준비되어 있으며, 강력한 타입과 타입화된 HttpClient를 통한 자동 통합을 제공합니다.

여러 프론트엔드

하나의 프로젝트는 필요한 만큼의 프론트엔드를 포함할 수 있습니다. 각 프론트엔드는 솔루션 내 새로운 Blazor 프로젝트로 추가되며, 백엔드에서 노출하는 동일한 API를 공유합니다.

시나리오 예시:

• 공개 사이트 → 고객 또는 방문자가 접근 가능한 페이지.
• 백오피스/관리 → 운영자 또는 관리팀용 내부 관리 패널.
• 파트너 포털 → 파트너, 리셀러 또는 공급업체 전용 접근.

이러한 분리는 인터페이스 전문화를 용이하게 하면서 API 사용에 대한 아키텍처 일관성을 유지합니다.

웹 페이지 생성

인터페이스 개발을 가속화하기 위해, Lino CLI는 다음 명령을 제공합니다:

lino page new

이 명령은 백엔드에 이미 연결된 Blazor 페이지를 생성하며, 정해진 규칙을 따릅니다:

• 폼 컴포넌트 생성 → 생성 및 편집 페이지.
• 자동 목록 → 인덱스 페이지(페이지네이션된 목록).
• API 직접 통합 → 해당 엔드포인트와 자동 연결.

이를 통해 전체 CRUD(프론트엔드 → API → CQRS → 데이터베이스)를 수동 코드 반복 없이 생성할 수 있습니다.

예를 들어 Order 엔터티용 페이지를 생성하면 다음과 같은 구조가 만들어집니다:

MyApp/
└── src/
    └── WebApps/
        └── MySite/
            └── Services/
                └── Pages/
                    └── Orders/
                        └── Registration/
                            ├── Order.razor
                            ├── Order.razor.cs
                            └── Components/
                                ├── Form/
                                │   ├── OrderForm.razor
                                │   ├── OrderForm.razor.cs
                                │   ├── OrderFormExtensions.cs
                                │   └── OrderFormViewModel.cs
                                └── Grid/
                                    ├── OrderGrid.razor
                                    ├── OrderGrid.razor.cs
                                    ├── OrderGridExtensions.cs
                                    └── OrderPagedQueryParams.cs

또한 OrdersEndpoints의 엔드포인트를 소비하기 위한 통합 서비스가 생성되어 엔드 투 엔드 통신을 보장합니다:
프론트엔드 → API → Commands/Queries → 데이터베이스

이를 통해 Lino는 전체 스택 개발 흐름을 제공하며, 새로운 기능을 생성하는 데 필요한 시간을 크게 줄여줍니다.