Part 6-4-7. ASP.NET Core 둘러보기 : Hello Blazor Client + SPA

 

 

🔖 ASP.NET Core 둘러보기

 

 지난 시간에는 .NET Core의 Web Blazor Server 프로젝트를 분석하며 어떻게 동작하고 실행되는지 살펴보았다. 이 전까지는 모두 HelloEmpty 프로젝트에 실질적으로 따라하며 적용해 이를 확인했는데, Blazor Server의 경우 해야할 작업의 양이 너무 많아, 빈 프로젝트에 적용하지 않고 단순히 동영상을 보면서 어떻게 동작되고, 실행되는지 분석했다. 이번 시간에는 Blazor Client와 SPA라는 개념에 대해서 학습한다. 

 

 

---

 

🧩 Hello Blazor Client + SPA

 

  Blazor Client 프로젝트의 경우, 우리가 다른 프로젝트에서 확인했던 startup 스크립트가 보여지지 않는다는 특징이 있다. 왜냐하면 Blazor Client는 다른 프로젝트와는 달리 태생적으로 원리가 달라서 그렇다. 따라서 억지로 startup을 추가하지 않아도 정상적으로 작동한다. 또한 프로젝트의 형태가 Blazor 서버와 유사하기 때문에 분석하기가 매우 쉽다. 따라서 Blazor 서버를 공부한다면 클라이언트는 따로 공부하지 않아도 된다.

 

 프로젝트를 학습하기 전에, 프로그램을 실행시켜보도록 하자.

 

Blazor Server와 크게 다를게 없다.

 

 프로젝트를 실행해보면, 결과물이 Blazor 서버와 거의 유사하다. 그렇다면 Blazor 서버와 클라이언트는 무엇이 다른 것일까? Blazor 클라이언트의 경우 쉽게 말해 '스팀에서 게임을 다운로드 받고, 해당 게임을 실행하는 것'과 같다. 이게 무슨소리 인가 싶겠지만 Blazor 클라이언트의 경우 게임을 다 다운로드 받으면 싱글 플레이와 같이 동작하고 실행하는 것이다. 당연히 이해가 안되겠지만 천천히 알아가보도록 하자.

 

---

 

🧩 SPA

 

 

 위 이미지는 예전에 웹 페이지에서 데이터를 전송할 때 사용하던 방식이다. 아래 이미지는 'SPA'라는 방법을 통해 사용되는 전송 방식이다.

 

 위 이미지에 대해서 먼저 이해해보자. 예를 들어 우리가 네이버에 접근해서 블로그, 카페등을 접속할 경우 구 버전 방식은 클라이언트가 클릭할 때마다 서버에서 페이지에서 관련된 모든 HTML 정보를 전송하고 페이지 전체를 다시 불러오는 형태로 이루어져있다. 따라서 요청 → HTML 전송, 요청 → HTML 전송 형태로 이루어져 있다. 

 

 그러나 아래 이미지인 SPA 방식은 구 버전방식으로 작동하지 않는다. 먼저 클라이언트가 클릭할 때 서버에서 페이지와 관련된 모든 HTML 정보를 전송하는 것은 같지만, 그 다음으로는 구 버전과 같이 모든 정보를 받아서 갱신하는 것이 아닌 AJXA 방식을 통해 필요한 부분만 요청 하고 서버에서는 이를 JSON 형태로 전송하는 방식으로 진행된다. AJAX는 예전 정보처리기사 자격증 공부할 때 배웠던 개념인데, 루키스님 강의에서 이를 다시 볼 줄은 몰랐다. 😎

 

 따라서 구 버전의 전송 방식은 요청 → HTML 전송, 요청 → HTML 반복 형태지만, 현재 버전의 전송 방식은 요청 → HTML 전송, 필요에 따른 AJAX 전송과 JSON 전달 형태로 이루어져 모든 데이터를 새로 받아 페이지를 새로고침하지 않아도 되 보다 효율적이다. 

 

---

 

🧩 Hello Blazor Server

 

 다음은 서버 사이드 블레이저의 특징이다. 예전 같은 경우 JavaScript를 이용해서 클라이언트 갱신을 해주었기 때문에 C# 에서는 SPA 기능을 활용할 수 없었다. 따라서 서버는 ASP.Net으로 만들었지만, 클라이언트는 리액트와 Vue.js 등을 통해서 만들어주었는데 이러다보니 서버는 C#으로 만들었지만 클라이언트는 또 JavaScript로 만들어줘야하는 불편함이 생겼다.

 

 하지만 Blazor가 등장함으로써 이런 문제가 모두 해결되었다. 왜냐하면 Blazor에서는 클라이언트에서 실시간으로 필요한 부분을 갱신 요청하는 것도 C#으로 처리할 수 있도록 했기 때문이다. 다음은 서버 사이드 블레이저가 어떻게 작동하는지 파악해보자.

 

 

 이전과 동일하게 맨 처음에는 요청 → HTML 전송으로 이루어지지만, Blazor를 사용할 경우 Signal-R 기술을 이용하여 굳이 JavaScript를 이용하지 않아도 실시간으로 정보를 요청하고 받아올 수 있다. 이 때 DOM을 이용하는데 DOM은 문서 객체 모델로 HTML과 XML 문서의 프로그래밍 인터페이스를 뜻한다. 마찬가지로 이 또한 정보처리기사에서 배웠던 내용이었다. 😂

 

 이 후에는 일반적으로 SPA를 이용하는 것과 같이 Blazor의 Signal-R 기술을 통해 필요한 부분만 데이터를 주고 받을 수 있다.

 

---

 

🧩 Hello Blazor Client

 

 

 Blazor 클라이언트는 Web Assembly라고도 불리기도 하는데 클라이언트는 SPA를 사용하지도 않고 이전에 설명한 것과 같이 모든 데이터를 다 다운로드 받고 이 데이터를 바탕으로 1인용으로 사용하는 개념이다. 클라이언트의 경우 처음 접속 시 필요한 모든 것을 다 다운로드 받고 혼자 노는 것이 핵심적인 개념이다.