upgrade and develop

[Blazor Web App] 13. 로그인 흐름을 비동기로 바꾸기 - Task, async, await 이해하기

지난 작업에서는 LoginService가 구체적인 TestUserRepository가 아니라 IUserRepository 인터페이스에 의존하도록 구조를 바꿨다.현재 로그인 호출 흐름은 다음과 같았다.Home.razor↓LoginService.Login()↓IUserRepository.FindByUserId()↓TestUserRepository지금 사용하는 TestUserRepository는 메모리 안의 List를 검색한다.따라서 검색 결과가 거의 즉시 나오고, 반드시 비동기로 만들 필요는 없다.하지만 나중에 실제 DB나 외부 API를 연결하면 결과를 바로 받을 수 없다.💡 실제 DB 비동기 호출 흐름DB에 사용자 검색 요청 ➡️ DB 서버에서 쿼리 실행 ➡️ 검색 결과 반환이 과정에는 기다리는 시간이 ..

[Blazor Web App] 12. Repository에 인터페이스 적용하기 - 생성자 주입과 DI 이해하기

지난 글에서는 테스트 사용자 정보를 LoginService에서 분리해 TestUserRepository로 옮겼다.역할은 다음처럼 나뉘었다.LoginService→ 로그인 입력 검증→ 비밀번호 확인→ 로그인 결과 생성TestUserRepository→ 테스트 사용자 목록 보관→ 아이디로 사용자 검색기능은 잘 동작했지만 LoginService를 다시 보니 특정 Repository 클래스에 직접 의존하고 있었다.private readonly TestUserRepository testUserRepository;생성자도 TestUserRepository를 직접 받았다.public LoginService( TestUserRepository testUserRepository){ this.testUserRe..

지난 작업에서는 로그인에 성공했을 때 사용자 정보를 UserInfo에 담아 LoginResult로 반환하도록 구조를 정리했다.로그인 상태를 보관하는 LoginStateService는 사용자 정보를 직접 만들지 않고, LoginService가 만들어준 결과를 저장만 하도록 바꿨다.구조가 조금씩 정리되고 있었지만, LoginService를 다시 보니 아직 테스트 사용자 정보가 직접 들어 있었다.private readonly string testUserId = "sample-admin";private readonly string testPassword = "1111";로그인에 성공했을 때 표시할 사용자 이름과 등급도 LoginService 안에서 직접 만들고 있었다.userInfo.UserId = loginR..

지난 작업에서는 UserInfo 모델을 만들고, 로그인한 사용자 정보를 LoginStateService에 저장하도록 바꿨다.처음에는 이 구조도 괜찮아 보였다.LoginStateService ├─ IsLoggedIn ├─ CurrentUser └─ StatusMessage그리고 로그인 성공 시 LoginStateService.Login(userId) 안에서 임시 사용자 정보를 만들었다.public void Login(string userId){ UserInfo userInfo; userInfo = new UserInfo(); userInfo.UserId = userId; userInfo.UserName = "테스트 사용자"; userInfo.UserGrade = "테스트 회원";..

앞에서 로그인 화면과 회원 페이지를 만들면서 CSS도 같이 작성했다.처음에는 페이지가 하나뿐이라 Home.razor.css에 필요한 스타일을 전부 넣어도 괜찮았다.그런데 Member.razor가 생기고, 버튼이나 페이지 박스 스타일이 비슷하게 반복되기 시작했다.예를 들어 Home.razor.css에는 로그인 버튼 스타일이 있었다..login-button { padding: 10px 16px; border: 1px solid #333; border-radius: 4px; cursor: pointer;}Member.razor.css에도 비슷한 버튼 스타일이 필요했다..login-button { margin-top: 16px; padding: 10px 16px; borde..

지난 작업에서는 LoginStateService를 만들어서 로그인 상태를 관리했다.로그인 성공 시에는 상태를 저장하고, /member 페이지에서는 로그인 상태를 확인했다.Home.razor→ LoginStateService.Login(userId)Member.razor→ LoginStateService.IsLoggedIn 확인이 과정에서 Member.razor에 이런 코드를 작성했다.protected override void OnInitialized(){ if (LoginStateService.IsLoggedIn == false) { NavigationManager.NavigateTo("/"); return; }}처음에는 그냥 “페이지가 열릴 때 실행되는 함수인가..

지난번에는 로그인 성공 후 /member 페이지로 이동하는 흐름을 만들었다.로그인 성공 시에는 NavigationManager를 사용해서 회원 페이지로 이동하게 했다.NavigationManager.NavigateTo("/member");그리고 Member.razor에는 로그아웃 버튼도 추가했다.private void Logout(){ NavigationManager.NavigateTo("/");}겉으로 보기에는 로그인과 로그아웃 흐름이 어느 정도 만들어진 것처럼 보였다. / 접속→ 로그인로그인 성공→ /member 이동로그아웃→ / 이동그런데 테스트를 하다 보니 바로 어색한 부분이 보였다.주소창에 직접 /member를 입력하면 로그인하지 않아도 회원 페이지에 들어갈 수 있었다./member 직접 ..

지난 글에서는 로그인 폼의 구조를 정리했다.처음에는 Home.razor 안에서 아이디와 비밀번호를 직접 검사했는데, 이후 LoginRequest, LoginResult, LoginService를 만들면서 입력 데이터와 처리 결과, 로그인 검증 로직을 분리했다.현재 로그인 흐름은 대략 이런 구조가 됐다. Home.razor→ LoginRequest에 입력값 저장→ LoginService.Login(loginRequest) 호출→ LoginResult 반환→ 성공 또는 실패 결과 표시이번에는 여기서 한 단계 더 나아가서, 로그인 성공 후 다른 페이지로 이동하는 흐름을 만들었다.또 로그인 후 이동한 Member.razor 페이지에서 @if, bool, @onclick을 다시 연습했고, 마지막으로 Blazor ..

Blazor로 로그인 화면을 만들면서 LoginRequest, LoginResult, LoginService를 차례대로 만들었다.처음에는 자연스럽게 이런 의문이 들었다.C# 웹 개발에서는 MVC와 Controller를 자주 이야기하는데,왜 지금 Blazor 프로젝트에서는 Controller를 거의 안 쓰고 있을까?C# 웹 개발을 공부하다 보면 MVC, Controller, Model, View 같은 개념을 자주 보게 된다.ASP.NET Core MVC에서는 Controller가 사용자의 요청을 받고, 필요한 데이터를 준비한 뒤, View를 반환하는 중요한 역할을 한다.그런데 Blazor를 공부하다 보면 구조가 조금 다르다.Blazor 프로젝트에도 Controller를 추가할 수는 있다.하지만 일반적인 화..

지난 글에서는 로그인 입력값을 LoginRequest 모델로 묶었다.처음에는 Home.razor 안에 userId, password 변수가 따로 있었다.private string userId = "";private string password = "";이걸 아래처럼 바꿨다.private LoginRequest loginRequest = new(); 그리고 입력창도 LoginRequest 객체에 연결했다. 이제 아이디와 비밀번호는 따로 흩어진 변수가 아니라, 로그인 요청 데이터라는 하나의 묶음으로 관리된다.이번에는 여기서 한 단계 더 나아가서 Home.razor 안에 있던 로그인 검증 로직을 LoginService 클래스로 분리했다.왜 Service로 분리하려고 했나?처음에는 Home.razor 안에서 로..