Part 6-6-1. Blazor 미니 프로젝트 : Blazor RankingApp #1

 

 

🥪 Blazor 미니 프로젝트

 

 지난 시간에는 Blazor에서 Javascript 연동하는 이유와, 그 방법에 대해서 알아보았다. 왜 자바 스크립트를 써야하는지, 또 어떻게 사용하는지 알아보았다. 이 후 자바스크립트로 생성한 값을 C#으로 받거나 C#으로 생성한 값도 자바스크립트로 받는 처리를 진행하였다. 이번 시간부터는 Blazor에서 RaningApp 프로젝트를 통해 직접적으로 실습 해 보며 학습하는 시간을 가져보도록 한다. 

 

---

 

🌅 RankingApp #1 프로젝트 생성

 

 먼저 기존의 사용하던 프로젝트는 '인증'에 대한 설정 값을 변경하지 않았기 때문에 프로젝트를 다시 새롭게 만들어주도록 하자. 랭킹을 보여주기 위한 작업을 진행할 것이며, DB에서는 CRUD 연산을 통해 이를 실습할 것이다. 먼저 새롭게 프로젝트를 만들어주도록 하자. 이름은 RankingApp으로 설정하고 Blazor 서버 앱으로 선택하여 만들어주도록 한다.

 

 

 다만, 이번에 만들어 줄 때에는 '인증'을 활성화해야하는데 해당 값으로는 '개별 사용자 계정' 혹은 '개별 계정'으로 선택하여 만들어 주도록 하자. 프로젝트를 생성하자.

 

 

---

 

🌅 프로젝트 탐색

 

 이전과 달리 Data 폴더 밑으로 ApplicationDbContext 스크립트가 존재하며, Data 폴더 밑으로 마이그레이션이라는 폴더가 존재하는 것을 볼 수 있다. 지금 당장은 이것이 무엇인지 잘 모르기 때문에 설명하기 전, 실습해보도록 하자. 하지만 이 실습조차 DB를 연결해야 하는 상황이다.

 

 단, ApplicationDbContext의 개념은 소위 말하는 '엔티티 프레임워크'이다. 우리가 데이터 베이스랑 연동을 할 때 다양한 방법이 있지만 얘전에 DB 서버에서 배운 방법을 토애 한땀한땀 무식하게 다 보낼 것인지, 아니면 '엔티티 프레임워크'를 통해 우아하고 세련된 모델을 사용할 것인지에 따라서 나뉘게 된다. 하지만 이번 실습에서는 엔티티 프레임워크를 통해 이를 자동으로 처리 해 줄 것이다.

 

 

 그렇지만 '엔티티 프레임워크' 또한 결국 블레이저에서 하나의 부품에 불과하다. 따라서 구 Startup 스크립트, 현 Program 스크립트를 살펴보면 결국 이 또한 하나의 서비스이며 이를 사용하겠다고 명시해주면 그만인 셈이다. 다만 여기서 중요한 값으로는 connectionString의 값인데 이는 appSetting.json 파일에 존재하는 값이다. 

 

 

 지금 당장은 connectionString의 값이 채워져있지만, 이를 수동으로 할당하기 위해서는 아래와 같이 진행해야 한다. 먼저 보기 - SQL 서버 개체 탐색기를 통해 SQL 서버 목록을 활성화 한다. 해당 탭에서는 지금 우리가 연동할 수 있는 DB 목록을 보여준다. 원하는 데이터베이스를 선택 후 산하에 있는 데이터베이스 폴더에 우클릭하여 새 데이터베이스를 추가하도록 하자.

 

 

 이 후 원하는 데이터베이스 이름을 설정하여 데이터베이스를 만들어주고, connectionString의 Database 영역의 값을 넣어주면 된다. DefaultConnection : "~~~Database=RainkingApp"와 같이 말이다. 하지만 이 방법이 불안하다면 다른 방법이 있는데 우리가 생성한 RankingDB를 우클릭 - 속성을 선택하여 연결 문자열을 복사하여 이를 붙여넣기 하는 방법도 존재한다.

 

 

 둘 중 편한방법을 통해 connectionString를 설정해주도록 하자. 이 후 프로젝트를 실행하면 기존의 Blazor 서버에서 볼 수 없었던 Register, Login 탭이 우측 상단에 새롭게 보이는 것을 볼 수 있다.

 

 

 이 후 Register 기능을 통해 회원가입을 진행하도록 하자. 

 

 

 원하는 이메일과, 비밀번호를 입력 후 Register를 클릭하면 실패했다고 위와 같이 뜨는 것을 볼 수 있다. 당황하지말고 Apply Migration을 클릭하고 새로고침하면 정상적으로 가입이 된 것을 볼 수 있다.

 

 

 다만, 이 때 Click here to confirm your account를 클릭하여 이메일 확인 단계를 거쳤다고 가정하고 넘어가는 스탭을 진행해야 한다. 이 후 진짜로 아이디와 비밀번호를 입력하면 정상적으로 로그인이 되는 것을 볼 수 있다. 그렇다면 우리가 방금 만든 계정이 DB에 연결이 잘 되어있는지 확인해보도록 하자.

 

 SQL 서버 개체 탐색기 - 테이블 - dbo.AspNetUsers를 우클릭하여 데이터 보기를 선택하면, 방금 우리가 만든 계정 정보가 들어있음을 볼 수 있다. 또한 dbo.Asp 관련 파일들은 모두 우리가 만들어 준것이 아니라 '인증'과 관련된 정보를 기본적으로 지원해주기 때문에 존재하는 것으로 이해하도록 하자.

 

 

 이 부분에서, Password는 일반적인 값이 아닌 '해시'값으로 나타나는데 해시는 굉장히 중요한 개념이다. 해시는 단방향성 함수라고 이해할 수 있다. 만약 비밀번호 '1234'를 입력했다고 가정하면 DB에는 '1234'의 값이 들어갈 것이다. 이는 당연히 해킹의 위험성이 존재하므로 굉장히 위험하다. 그러나 '해시'형태로 값을 저장한다면 '1234'의 값이 아닌 해시 값 형태로 저장되는데 해커 입장에서는 해시 값의 형태만 보고서 비밀번호가 '1234'인것을 역추적 할 수 없다. 따라서 해시는 비밀번호를 생으로 '1234'로 저장하는 것이 아니다.의 형태로만 이해하고 넘어가도록 하자.

 

---

 

🌅 RankingApp #1 ORM

 

 솔루션 탐색기의 마이그레이션 폴더 밑 'CreateIdentitySchema' 스크립트를 살펴보자. 해당 함수는 우리가 SQL로 Create Table을 하던 형태를 C#으로 만들어주고 이를 SQL로 자동으로 변형시켜 맞춰주는 스크립트이다. 이는 해시와 같이 매우 중요한 개념 중 하나인 'ORM(객체 관계 매핑)'이다. 

 

 만약 이를 사용하지 않는다면 우리가 예전에 했던 것과 같이 한땀한땀 테이블을 만들고, 데이터베이스를 만들어 DB에 정보를 때려박아야 하는 상황이 된다. 이 뿐만 아니라 ORM은 SQL 을 통해 데이터를 추출하고 가져오는 행위를 클래스를 만들어 클래스에 적용할 경우 실제 DB에 저장되도록 처리하는 역할 또한 해준다. 이 또한 매우 중요한 개념인데 예를들어 user라는 클래스를 만들경우 id, username의 값만 있다고 가정하더라도 이를 커밋할 경우 DB에 어떠한 작업을 하지 않아도 DB에 자동으로 적용이 된다는 것 까지 ORM의 특징이다.