Blazor 소개와 환경설정 — .NET 8 설치부터 첫 실행까지

📌 학습 목표

이 글을 완독하면 다음을 할 수 있습니다.

1. Blazor의 개념과 .NET 생태계 내 위치를 설명할 수 있습니다.
2. Blazor WebAssembly와 Blazor Server의 구조적 차이를 비교할 수 있습니다.
3. .NET 8 SDK를 설치하고 개발 도구를 구성할 수 있습니다.
4. CLI 명령어로 Blazor 프로젝트를 생성하고 브라우저에서 실행할 수 있습니다.
5. Blazor 프로젝트의 기본 파일 구조와 각 파일의 역할을 이해할 수 있습니다.

📝 개념 설명

1. Blazor란 무엇인가?

Blazor는 Microsoft가 개발한 오픈소스 웹 UI 프레임워크로, C# 언어 하나로 프론트엔드와 백엔드를 모두 개발할 수 있게 해 줍니다. 기존 웹 개발에서는 UI 로직을 JavaScript나 TypeScript로 작성해야 했지만, Blazor를 사용하면 C# 코드가 브라우저 안에서 직접 실행됩니다.

“Browser + Razor”의 합성어인 Blazor는 .NET의 Razor 문법(HTML과 C# 혼합)을 웹 컴포넌트 개발에 그대로 활용합니다. Vue.js나 React 같은 JavaScript 프레임워크와 유사한 컴포넌트 기반 SPA(Single Page Application)를 C#으로 작성할 수 있습니다.

Blazor가 등장한 이유

• C# 개발자가 JavaScript를 별도로 학습하지 않고 풀스택 개발 가능
• .NET의 강력한 타입 시스템과 IDE 지원(IntelliSense, 디버깅)을 웹 UI에도 적용
• 비즈니스 로직을 서버·클라이언트 양쪽에서 재사용 (코드 공유)
• WebAssembly 표준의 등장으로 브라우저 내 고성능 실행 환경 확보

2. Blazor의 두 가지 호스팅 모델

Blazor WebAssembly (WASM)

.NET 런타임과 앱 코드 전체를 WebAssembly 형태로 브라우저에 다운로드하여 클라이언트에서 직접 실행하는 방식입니다. 초기 로딩이 느리지만 이후에는 서버 연결 없이 독립적으로 동작하므로 정적 웹 서버(GitHub Pages, CDN 등)에도 배포할 수 있습니다.

Blazor Server

UI 렌더링과 이벤트 처리를 서버에서 실행하고, SignalR(WebSocket 기반) 연결을 통해 최소한의 UI 변경 사항만 클라이언트에 전달하는 방식입니다. 초기 로딩이 빠르고 서버 리소스에 직접 접근할 수 있지만, 실시간 연결이 끊기면 앱이 동작하지 않습니다.

어떤 모델을 선택해야 할까요?

• Blazor WebAssembly: 오프라인 지원, 서버 비용 절감, 정적 배포가 필요한 경우
• Blazor Server: 초기 로딩 속도 중시, 보안 민감 데이터 처리, 레거시 .NET 라이브러리 활용

3. .NET Core와 .NET의 역사

과거 .NET 플랫폼은 Windows 전용 .NET Framework와 크로스플랫폼 .NET Core로 이원화되어 있었습니다. .NET 5(2020년)부터 두 플랫폼이 통합되어 현재는 단순히 .NET으로 불립니다.

• .NET Framework: Windows 전용, 레거시 (최신 버전 4.8.x, 신규 개발 비권장)
• .NET Core: 크로스플랫폼, 오픈소스 (1.0~3.1까지 사용)
• .NET 5 이상: 통합 플랫폼, 크로스플랫폼 (현재 .NET 8 LTS 권장)

Blazor는 .NET 3.1에서 처음 정식 출시되었고, 현재는 .NET 8(LTS) 기준으로 학습하는 것을 권장합니다.

💡 예제 & 실습

Step 1 — .NET SDK 설치

Blazor 개발을 시작하려면 먼저 .NET SDK를 설치해야 합니다. SDK(Software Development Kit)에는 컴파일러, CLI 도구, 런타임이 모두 포함되어 있습니다.

1. dotnet.microsoft.com/download 접속
2. .NET 8 (LTS) 항목에서 운영체제에 맞는 SDK 설치 파일 다운로드
3. 설치 완료 후 터미널에서 버전 확인:

dotnet --version
# 출력 예시: 8.0.xxx

버전 번호가 정상 출력되면 설치 성공입니다.

Step 2 — 개발 도구 선택 및 설치

Visual Studio 2022 (Windows / macOS 권장)

• Blazor에 최적화된 통합 개발 환경 — 디버거, Hot Reload, 디자인 도구 포함
• visualstudio.microsoft.com 에서 Community(무료) 버전 설치
• 설치 워크로드에서 「ASP.NET 및 웹 개발」 항목 체크 필수

Visual Studio Code (모든 운영체제)

• 경량 에디터, 무료, 크로스플랫폼 — code.visualstudio.com 에서 설치
• 설치 후 Extensions 탭에서 C# Dev Kit 확장 설치 필수

Step 3 — 첫 번째 Blazor 프로젝트 생성

터미널에서 다음 명령어를 실행하여 Blazor WebAssembly 프로젝트를 생성합니다.

# Blazor WebAssembly 프로젝트 생성
dotnet new blazorwasm -o MyFirstBlazorApp

# 프로젝트 폴더로 이동
cd MyFirstBlazorApp

# 개발 서버 실행
dotnet run

실행 후 터미널에 아래 메시지가 출력됩니다.

Now listening on: https://localhost:5001
Now listening on: http://localhost:5000

브라우저에서 https://localhost:5001에 접속하면 기본 Blazor 앱 화면을 확인할 수 있습니다.

Step 4 — 프로젝트 구조 이해하기

Step 5 — 기본 컴포넌트 살펴보기

Blazor의 기본 단위는 .razor 파일(컴포넌트)입니다. Pages/Index.razor 파일을 열면 다음과 같은 구조를 확인할 수 있습니다.

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

<p>Welcome to your new app.</p>

<SurveyPrompt Title="How is Blazor working for you?" />

• @page "/" — 이 컴포넌트가 루트 URL(/)에 매핑됨을 선언합니다.
• <PageTitle> — 브라우저 탭 제목을 동적으로 설정합니다.
• <SurveyPrompt /> — 다른 Blazor 컴포넌트를 HTML 태그처럼 사용합니다.

Blazor에서는 C# 코드(@로 시작)와 HTML 마크업을 한 파일에서 혼합하여 작성하며, 이것이 Razor 문법의 핵심입니다.

⚠️ 자주 틀리는 것 / 주의사항

1. .NET Framework와 .NET(Core) 혼동

2. HTTPS 개발 인증서 오류

최초 dotnet run 실행 시 브라우저에서 HTTPS 인증서 경고가 나타날 수 있습니다. 다음 명령어로 개발용 인증서를 신뢰 목록에 추가하세요.

dotnet dev-certs https --trust

3. WebAssembly와 Server 템플릿 혼동

dotnet new blazorwasm과 dotnet new blazorserver는 구조가 다릅니다. Blazor Server 프로젝트에는 _Host.cshtml 같은 서버 측 파일이 추가됩니다. 처음에는 Blazor WebAssembly로 시작하는 것을 권장합니다 — 구조가 단순하고 서버 없이도 테스트 가능합니다.

4. Hot Reload가 모든 변경에 작동하지 않음

dotnet watch run 사용 시 앱 진입점 수정이나 의존성 변경은 Hot Reload가 적용되지 않습니다. 터미널에서 Ctrl + C로 종료 후 다시 dotnet run을 실행하세요.

5. 포트 충돌 오류

기본 포트(5000, 5001)가 이미 사용 중이면 실행 오류가 발생합니다. 실행 시 포트를 직접 지정하거나 Properties/launchSettings.json에서 변경하세요.

dotnet run --urls "https://localhost:7001;http://localhost:7000"

🎯 마무리

Blazor는 C# 개발자가 별도의 JavaScript 학습 없이 현대적인 웹 UI를 구축할 수 있는 강력한 프레임워크입니다. WebAssembly와 Server 두 가지 호스팅 모델의 특성을 이해하면 프로젝트 요구사항에 맞는 아키텍처를 선택할 수 있습니다.

.NET 8 SDK 설치부터 첫 번째 프로젝트 실행까지의 과정을 직접 실습해 보셨다면, 이제 Blazor 컴포넌트 개발의 기초 환경이 모두 갖춰진 것입니다. dotnet watch run 명령어를 습관적으로 사용하면 코드 수정 시 브라우저가 자동으로 새로고침되어 더욱 빠른 개발 사이클을 경험할 수 있습니다.