Blazor WebAssembly
Go to file
2025-04-17 10:59:15 +09:00
Layout [] init_WEB GIT 2024-11-04 14:51:37 +09:00
Pages [] init_WEB GIT 2024-11-04 14:51:37 +09:00
Properties [📝] 로컬 테스트 위한 오류메세지 중단 처리 2025-04-16 17:37:55 +09:00
wwwroot [] init_WEB GIT 2024-11-04 14:51:37 +09:00
_Imports.razor [] init_WEB GIT 2024-11-04 14:51:37 +09:00
.gitignore [📝] .gitignore 수정 2025-04-14 10:20:21 +09:00
App.razor [] init_WEB GIT 2024-11-04 14:51:37 +09:00
Front.csproj [] init_WEB GIT 2024-11-04 14:51:37 +09:00
Jenkinsfile [📝] Jenkinsfile 수정 2024-11-05 14:40:09 +09:00
Program.cs [] init_WEB GIT 2024-11-04 14:51:37 +09:00
README.md [📝] README.md 수정 - 프로젝트 구조 설정 2025-04-17 10:59:15 +09:00
web.config [] init_WEB GIT 2024-11-04 14:51:37 +09:00

Web Client

Development Environment

Skill

  • Blazor WebAssembly
  • HTML & CSS

IDE

  • JetBrains Rider

Project Rule

구조 < MVVM >

Model

  • 데이터를 정의하는 역할
  • ./Program/Models 에 위치
    • 별도의 DTO 와 엔티티의 클래스로 구성

View

  • UI를 정의하는 역할
  • ./Program/Pages 에 .razor 파일로 선언
    • .razor.css 파일로 스타일을 정의
    • .razor.cs 파일은 View와 Viewmodel을 연결하는 역할만 진행
    • 필요시 하위 디렉토리를 만들어 기능별로 묶어서 사용 할 수 있음

ViewModel

  • UI와 데이터를 연결하는 역할
  • ./Program/ViewModels 에 .cs 파일로 선언
    • VM.cs 파일은 연결하려는 view.razor 의 view와 같은 이름으로 선언해야 함
    • ViewModel은 View와 Model을 연결만 하는 것이 아닌 실제적인 역할을 수행
      • ViewModel의 연결 없이 View에서 직접 Model을 사용하여 데이터를 가져올 수 없음
    • View에 여러개의 ViewModel이 연결될 수 있음
      • 가능한 ViewModel과 View를 1:1로 연결하는 것을 권장
      • 테스트를 고려해 ViewModel은 UI 코드에 의존하지 않도록 작성

그 외

1. 네임스페이스 구조

  • 폴더 구조와 네임스페이스는 반드시 일치해야 함
/Program/Pages/Login.razor 
namespace Front.Program.Pages;

2. Service 를 활용한 별도의 계층 구분

  • 외부의 API와 통신하는 부분은 ViewModel 에서 직접적인 API 호출이 아닌 별도의 Service를 통해 호출

3. 상태 변경과 UI 갱신을 분리

  • View.razor.cs 에서 ViewModel을 통해 상태 변경과 함께 View를 다시 그리는것이 아님
    • ViewModel에서 상태 변경을 하고 ViewModel의 PropertyChanged 이벤트를 통해 View에 알림
    • ViewModle에서 상태 변경시에 INotifyPropertyChanged 방식을 사용

4. 상태 공유 규칙

  • View간 전역 상태를 관리하는 경우에 'AppState' 를 사용하여 관리
    • 해당 클래스가 많아질 경우 도메인 접두어를 붙여서 사용
    • AppState는 ViewModel과 Service에서 사용 가능
    • AppState는 ViewModel과 Service에서 DI를 통해 주입받아 사용 Program.cs 에서 DI를 등록
      • appState는 Scoped으로 등록
    • AppState는 ViewModel과 Service에서 직접적으로 상태를 변경하지 않도록 작성
      • ViewModel과 Service에서 AppState의 상태를 변경하는 경우에는 반드시 AppState의 메서드를 통해서만 변경하도록 작성
    • AppState는 ViewModel과 Service에서 직접적으로 상태를 가져오는 경우에는 반드시 AppState의 메서드를 통해서만 가져오도록 작성
    • AppState에서 상태를 변경시에 event Action? OnChange 방식을 사용

5. DI

  • ViewModel 과 Service는 DI를 통해 주입받아 사용하며 Program.cs 에서 DI를 등록
  • ViewModel은 가급적으로 transient로 등록
    • 하지만 한 View에서 여러 컴포넌트가 하나의 상태를 공유해야 할 경우에는 Scoped로 등록
  • Service는 Scoped으로 등록
    • Service는 ViewModel과 다르게 여러 컴포넌트에서 같은 Service를 사용해야 하는 경우가 많기 때문에 Scoped으로 등록