Blazor는 Microsoft에서 개발한 웹 프레임워크로, HTML , CSS 및 C# 코드와 같은 웹 사이트를 구성하는 항목의 빌더입니다. Blazor 애플리케이션은 ASP.NET 기능인 Razor 구성 요소를 사용하여 빌드됩니다. C#과 HTML로 구성된 파일입니다.
Blazor를 사용하는 이유
- 단일 언어 사용: C# Blazor는 C# 언어를 사용하여 웹 애플리케이션을 개발할 수 있는 장점이 있습니다. 이는 백엔드 및 프론트엔드 모두에 동일한 언어를 사용할 수 있다는 의미이며, 개발자가 두 가지 이상의 언어를 학습하고 전환할 필요가 없다는 것을 의미합니다.
- .NET 생태계와의 통합: C# Blazor는 .NET 생태계와 깊게 통합되어 있습니다. 이는 .NET 프레임워크와 .NET Core의 기능과 라이브러리를 모두 활용할 수 있다는 것을 의미합니다. 또한, .NET 개발자들이 이미 익숙한 개발 환경을 유지할 수 있어 개발 생산성을 높일 수 있습니다.
- 컴포넌트 기반 아키텍처: Blazor는 컴포넌트 기반 아키텍처를 기반으로 한다는 점에서 장점을 가집니다. 이는 UI 요소들을 독립적인 컴포넌트로 구성하여 재사용성과 유지보수성을 높일 수 있으며, 복잡한 UI를 쉽게 관리할 수 있다는 것을 의미합니다.
- 웹 어셈블리의 사용: C# Blazor는 웹 어셈블리를 사용하여 클라이언트 측 코드를 실행할 수 있습니다. 이는 브라우저에서 C# 코드를 직접 실행할 수 있게 해주며, 웹 애플리케이션의 성능을 향상시키고 네이티브 앱과 유사한 사용자 경험을 제공할 수 있습니다.
- 강력한 데이터 바인딩: Blazor는 강력한 데이터 바인딩 기능을 제공합니다. 이는 UI 요소와 데이터 모델 간의 바인딩을 쉽게 설정할 수 있으며, 데이터의 변화에 따라 자동으로 UI가 업데이트되어 사용자 경험을 향상시킵니다.
이러한 이유들로 인해 C# Blazor는 개발자들에게 강력한 웹 애플리케이션 개발 도구로 인정받고 있습니다.
Blazor 시작하기 + 유저등록(Identity)
다음은 개별 계정 인증 유형 (Authorization) 으로 Blazor 를 시작하는 과정을 Step by Step 으로 보여줍니다.
Database MSSQL 이 기본으로 설치되어 있다고 보고 작업을 진행 합니다. 만약 MS SQL 설치법이 궁금하시다면 다음 글을 참고 하시면 됩니다.
프로젝트 생성
저는 다음 처럼 Visual Studio 2022 에 .net7.0 으로 프로젝트를 시작하였습니다.
처음으로 새프로젝트를 만듭니다.
위 구성과 같이 블레이저 로 검색하여 해당 블레이저 서버 앱을 찾아 다음 버튼을 클릭합니다.
프로젝트 이름과 위치 솔루션 이름을 적당하게 작명해줍니다. 저는 그냥 기본 생성이름인 BlazorApp1 으로 두고 다음 버튼을 클릭 하겠습니다.
.NET7.0 을 기본으로 설정하였고 Identity 를 구현하기 위해서 인증유형을 개별 계정으로 선택 합니다.
Identity란 유저 등록, 로그인 과정을 말합니다.
이제 기본적인 프로젝트개 생성이 되었고 바로 실행 할 수 있는 상태가 됩니다.
데이터베이스 생성
이제 유저 등록을 하려면 DataBase 와 연동을 하여야 합니다. 위 사진처럼 보기->SQL Server 개체 탐색기를 선택합니다.
이 글에서는 MSSQL 을 기본으로 설정하도록 하겠습니다.
SQL Server 개체 탐색기에서 SQL Server 추가 버튼을 클릭합니다. 이제 만들어져 있는 Database 에 연결하도록 하겠습니다.
저는 이미 SQL Server에 테스트 용으로 추가하였던 NorthWind 데이터베이스에 연결하도록 하겠습니다. 위 그림처럼 DB 정보를 입력하고 연결 버튼을 눌러 확인만 해주시면 됩니다.
이제 DB 가 연결되었다면 해당 데이터베이스에서 마우스 오른쪽 버튼으로 속성을 클릭합니다.
그러면 속성창에 위 사진처럼 연결 문자열이 보입니다. 연결문자열 전체를 복사하도록 하겠습니다.
위 사진처럼 프로젝트의 appsetting.json 에서 DB 연결 문자인 ConnectiongStrings 의 DefaultConnection 에 위 복사한 연결문자열을 붙여넣기 해줍니다. 그러면 프로그램 내에서 DB 에 연결 할 수 있는 준비가 다 된것입니다.
update-database
이제 유저등록을 위하여 DB 에 테이블을 추가하도록 하겠습니다.
패키지 관리자 콘솔을 열어 update-database 를 타이핑 하도록 하겠습니다. 그러면 DB 를 접속하고 테이블이 자동으로 만들어집니다.
위 사진처럼 DB 에 필요한 테이블들이 자동으로 생성됩니다.
이제 유저 등록, 로그인, 로그아웃 기능이 모두 완성 되었습니다.
Authorization 결과 확인
이제 프로그램을 실행해 보도록 하겠습니다.
F5 을 눌러 디버깅 시작을 하면 위와 같은 창이 뜹니다. 오로지 프로젝트 생성만 하고 DB만 연결시켜주었는데 많은것들이 만들어져 있습니다.
유저 등록 , Log in 기능을 확인 하기 위해서 Register 를 클릭해 보도록 하겠습니다.
위 사항 처럼 Email 과 Password를 입력하고 Register 버튼을 클릭해 보겠습니다.
위와 같인 Confirm Email 창이 뜨고 Confirm을 기다리고 있지만 이 기능은 아직 연결되지 않아서 그냥 Confirm 버튼을 눌러 바로 Confirm 동작을 수행 할 수 있습니다.
이제 유저가 등록이 되었습니다.
로그인 버튼을 눌러 로그인을 해 보도록 하겠습니다.
등록시 입력한 메일주소와 비밀번호를 넣고 Log In 버튼 클릭합니다.
이렇게 로그인이 완성 되었습니다.
결론
이제 Blazor 프로젝트를 생성하고 실행하는 방법을 배웠습니다! 이제는 자유롭게 개발을 시작하고 Blazor의 강력한 기능을 탐색할 수 있습니다.
이제 이 글을 시작으로 C# 풀스택 개발자의 길을 걸으실 수 있습니다.
