1. 프로젝트 파일 구조
/MyBlazorApp │ ├── /Data │ └── ApplicationDbContext.cs // Entity Framework DbContext 클래스 (데이터베이스와 연결) │ ├── /Pages │ └── Index.razor // Blazor 페이지 (기본 페이지) │ └── _Host.cshtml // Blazor Server의 Host 페이지 (Blazor 앱이 렌더링되는 HTML) │ ├── /Shared │ └── MainLayout.razor // 공통 레이아웃 (애플리케이션의 전반적인 레이아웃) │ └── NavMenu.razor // 네비게이션 메뉴 컴포넌트 │ ├── /wwwroot │ └── css │ └── js │ └── favicon.ico // 정적 파일 (이미지, CSS, JS 등) │ ├── /Models │ └── User.cs // 사용자 모델 클래스 (Entity 모델) │ └── Product.cs // 상품 모델 클래스 │ ├── /Services │ └── UtilityService.cs // 비즈니스 로직이나 헬퍼 기능을 제공하는 서비스 클래스 │ ├── /wwwroot │ └── css │ └── js │ └── favicon.ico // 정적 파일 (이미지, CSS, JS 등) │ ├── appsettings.json // 애플리케이션 설정 파일 (DB 연결 문자열, 로깅 설정 등) ├── BlazorApp.csproj // 프로젝트 파일 (패키지, 참조, 빌드 설정) └── Startup.cs // 애플리케이션의 시작 및 서비스 등록 파일
2. /Data
- ApplicationDbContext.cs
- Entity Framework에서 사용하는 DbContext 클래스
- 데이터베이스와의 연결을 설정, 모델을 데이터베이스 테이블에 매핑
- 예를 들어, DbSet<User>: User 엔티티에 해당하는 테이블
3. /Pages
- Index.razor
- Blazor Server 애플리케이션에서 렌더링되는 기본 페이지 Blazor의 라우팅 시스템에 의해 기본 페이지로 표시
- Blazor 컴포넌트 파일 Razor 구문을 사용하여 C# 코드와 HTML 혼합
- _Host.cshtml
- Blazor Server에서 앱이 렌더링되는 호스트 페이지 HTML 페이지에서 Blazor 애플리케이션을 로드하는 역할
- Blazor Server 앱은 이 HTML 파일을 통해 클라이언트와 서버 사이의 실시간 연결을 유지
4. /Shared
- MainLayout.razor
- 애플리케이션의 공통 레이아웃을 정의 대부분의 Blazor 애플리케이션에서는 공통적인 레이아웃을 제공 페이지에서 반복적으로 사용하는 UI 구조를 담고 있음
- NavMenu.razor
- 애플리케이션 내에서 사용되는 네비게이션 메뉴 사이드바나 상단 메뉴 바로 구현되며, 페이지 간 이동을 처리
5. /Models
- User.cs
- 애플리케이션에서 사용하는 데이터 모델 Entity Framework가 이 클래스를 사용하여 데이터베이스 테이블과 매핑
6. /Services
- UtilityService.cs
- 애플리케이션에서 필요한 유틸리티 기능이나 비즈니스 로직을 구현한 서비스 클래스 예를 들어, 날짜 형식을 변환하거나, 외부 API와 통신하는 등의 작업을 처리할 수 있음
7. wwwroot
- css, js, favicon.ico
- 애플리케이션에서 사용하는 정적 파일들을 보관하는 폴더
- CSS 파일은 스타일을 정의 JS 파일은 클라이언트 측 스크립트를 정의
- favicon.ico는 웹사이트의 아이콘 파일
8. appsettings.json
- 애플리케이션 설정을 담고 있는 JSON 파일
- 데이터베이스 연결 문자열, 로깅 설정, API 키 등 다양한 설정을 관리
9. BlazorApp.csproj
- 프로젝트 파일 프로젝트의 메타데이터, 의존성, 빌드 설정 등을 포함 .NET Core 애플리케이션을 빌드하고 실행하는 데 필요한 설정 정의
10. Startup.cs
- Blazor 애플리케이션의 초기화 설정을 담당 애플리케이션에 필요한 서비스나 미들웨어를 등록하고, 라우팅 등을 설정
11. /APIs
- API 관련 코드들은 보통 컨트롤러로 구현 / ASP.NET Core Web API를 구현하는 부분
- Blazor Server에서는 기본적으로 API를 RESTful 서비스로 구축하는 경우는 드물지만, 외부와 데이터 통신을 위해 Web API를 사용하는 경우에는 이 폴더에 API 관련 컨트롤러를 추가
- API 컨트롤러는 ControllerBase 를 상속받아 HTTP 요청을 처리 Blazor와 다른 클라이언트 간의 데이터 통신을 담당
12. /Components
- Blazor 컴포넌트는 razor 파일로 구성 /Pages 폴더에서 페이지 컴포넌트 정의 /Shared폴더에서는 공통적으로 사용하는 UI 컴포넌트 정의
- 예를 들어, 로그인 폼, 데이터 표시 테이블, 사용자 등록 폼 등은 Blazor 컴포넌트로 구현됩니다.
- razor 파일 안에서 C# 코드와 HTML을 함께 작성할 수 있으며, 이는 UI를 구성하는 핵심 단위입니다.
13. /Controllers
- ASP.NET Core MVC나 Web API에서 클라이언트 요청을 처리하는 역할
- Blazor Server에서는 일반적으로 API나 웹 요청을 처리하는 Controller를 작성 ControllerBase를 상속받으며, 클라이언트와의 HTTP 통신을 관리
- Blazor 애플리케이션에서 서버 측 로직을 구현하는 부분 데이터베이스 CRUD 연산, 파일 처리, 외부 API 호출 등을 수행 가능
14. /DTOs (Data Transfer Objects)
- 데이터 전송 객체 클라이언트와 서버 간에 데이터를 교환할 때 사용하는 객체
- 엔티티 모델과 다르게, 필요한 데이터만 포함, 보통 API 응답에서 사용 엔티티 모델을 그대로 외부로 노출하는 것은 보안상 좋지 않기 때문 DTO를 사용하여 필요한 데이터만 노출
- DTO 클래스를 정의, API 컨트롤러에서 사용하여 데이터 전송
15. /Migrations
- Entity Framework Core에서 데이터베이스 스키마를 변경하는 기능
- Add-Migration 명령을 실행할 때 자동으로 생성되는 파일들이 포함
- 데이터베이스 구조를 업데이트하는 SQL 명령을 포함 새로운 테이블이나 필드를 추가하거나 기존 테이블을 수정 가능
- 데이터베이스와의 상호작용을 정의하는 데 중요한 역할을 함
dotnet ef migrations add InitialCreate # 마이그레이션 추가 dotnet ef database update # 데이터베이스 업데이트
16. /Snippets
- 자주 사용하는 코드 조각이나 템플릿을 미리 정의 Visual Studio에서 코드 스니펫을 활용하여 반복적인 작업을 빠르게 처리할 수 있음
- 자주 사용하는 코드 구문을 템플릿 형태로 저장, 재사용
17. /Study
- 보통 개발자가 새로운 기술을 학습하거나 실험할 때 사용하는 공간
- 실험적인 코드, 학습을 위한 샘플 코드, 문서화된 자료 등이 포함
Share article