RAZOR 6

[Blazor Web App] 07. 로그인 상태를 서비스로 관리하기 - 직접 URL 접근 막기와 로그아웃 메시지

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

language/blazor 2026.07.22

[Blazor Web App] 06. 로그인 흐름 확장하기 - 페이지 이동, 회원 페이지, 기본 템플릿 정리

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

language/blazor 2026.07.17

[Blazor Web App] 04. 로그인 폼 리팩토링 2 - LoginService와 DI로 로그인 로직 분리하기

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

language/blazor 2026.07.12

[Blazor Web App] 03. 로그인 폼 리팩토링 1 - LoginRequest 모델로 입력값 묶기

지난번에는 Blazor로 간단한 로그인 폼을 만들었다.아이디 입력창, 비밀번호 입력창, 로그인 버튼을 만들고 @bind, @onclick을 이용해서 입력값을 C# 변수와 연결했다.처음에는 Home.razor 안에 아이디와 비밀번호 변수를 따로 두었다.private string userId = "";private string password = "";그리고 로그인 버튼을 누르면 Login() 함수에서 직접 입력값을 검사했다.private void Login(){ if (string.IsNullOrWhiteSpace(userId)) { loginMessage = "아이디를 입력하세요."; messageClass = "login-message error-message"; ..

language/blazor 2026.07.10

[Blazor Web App] 02. 첫 로그인 폼 만들기 - @bind, @onclick, 입력 검증, CSS 분리, 모델 바인딩까지

오늘 작업 목표이번에는 Blazor 기본 페이지인 Home.razor를 직접 수정하면서 간단한 로그인 폼을 만들었다.실제 로그인 기능을 완성한 것은 아니다. 아직 DB도 붙이지 않았고, 서버 인증도 하지 않았다. 오늘 한 작업은 로그인 화면에서 가장 앞단에 해당하는 부분이다.아이디 입력↓비밀번호 입력↓로그인 버튼 클릭↓입력값 검증↓성공 / 오류 메시지 출력↓입력값을 LoginRequest 클래스로 묶기 처음에는 그냥 변수 두 개를 만들고 입력값을 받으면 된다고 생각했다. 그런데 조금만 진행해도 아이디, 비밀번호, 메시지, CSS class 같은 값들이 한 파일에 계속 늘어났다.그래서 이번 글에서는 아주 작은 로그인 폼을 만들면서도, 나중에 실제 로그인 처리로 확장하기 좋게 입력값을 클래스로 묶는 데까지 ..

language/blazor 2026.07.07

[Blazor Web App] 01. 시작하기 - 프로젝트 생성부터 첫 화면이 출력되는 과정 이해하기

오늘 작업 목표오늘은 Blazor로 웹 프로젝트를 처음 만들면서, 프로젝트가 실행되고 첫 화면이 브라우저에 출력되기까지의 흐름을 정리했다.아직 로그인, 데이터베이스, 외부 API, Android WebView 연결까지 들어가지는 않았다.이번 글의 목표는 딱 여기까지다. 처음에는 단순히 "웹 프로젝트 하나 만들면 되겠지"라고 생각했는데, 막상 Blazor 프로젝트를 만들려고 보니 선택지가 생각보다 많았다.특히 아래 용어들이 처음부터 헷갈렸다.Blazor Web AppBlazor ServerBlazor WebAssemblyInteractive Server대화형 위치 - Global 이 부분을 모른 채로 넘어가면 나중에 프로젝트 구조를 이해하기 힘들 것 같아서, 이번에는 코드 작성보다 실행 흐름을 먼저 잡는 ..

language/blazor 2026.07.05