Blazor 기초부터: 챕터 2 — 첫 번째 Blazor 앱

Blazor 기초부터 챕터 2에 오신 것을 환영합니다. 챕터 1을 아직 읽지 않았다면 먼저 확인하세요.

이번 챕터에서는 새 Blazor 앱을 만들고, 로컬에서 실행하고, 중요한 파일들의 역할을 이해합니다.

1단계: 프로젝트 생성

터미널에서 실행:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

이 명령은 .NET 9 Blazor Web App을 기본 구조로 생성합니다.

도구가 상호작용 모델을 물어보면 Interactive Server로 시작하세요.

2단계: 로컬 실행

앱 실행:

dotnet watch

터미널에 표시된 URL(보통 https://localhost:5xxx)을 엽니다. Home, Counter, Weather 페이지가 보이면 정상입니다.

여기까지 되면 개발 환경은 준비 완료입니다.

3단계: 프로젝트 구조 이해

처음에는 아래 파일/폴더만 알면 충분합니다.

• Program.cs — 서비스 등록 및 HTTP 파이프라인 설정.
• Components/App.razor — 앱 루트 컴포넌트.
• Components/Routes.razor — 페이지 라우트 매핑.
• Components/Pages/ — Home, Counter 같은 라우팅 페이지.
• Components/Layout/ — 공통 레이아웃(MainLayout.razor, 메뉴).
• wwwroot/ — 정적 리소스(CSS, 이미지, favicon).
• appsettings.json — 설정 값.

지금은 모든 파일을 깊게 알 필요 없습니다. UI 위치와 시작 설정 위치를 파악하는 것이 핵심입니다.

4단계: 첫 변경 만들기

Components/Pages/Home.razor를 열고 내용을 아래로 바꾸세요.

@page "/"

<PageTitle>Blazor 기초부터</PageTitle>

<h1>Blazor 기초부터</h1>
<p>챕터 2가 로컬에서 실행 중입니다.</p>

저장 후 브라우저를 새로고침합니다. dotnet watch를 사용 중이면 즉시 반영됩니다.

이 작은 수정으로 전체 흐름(edit -> build -> render)을 확인할 수 있습니다.

5단계: Program.cs 한 번 읽기

외울 필요는 없지만, 다음 줄은 알아두세요.

• AddRazorComponents() Razor 컴포넌트 활성화.
• AddInteractiveServerComponents() 서버 상호작용 컴포넌트 활성화.
• MapRazorComponents<App>() 루트 컴포넌트를 엔드포인트에 매핑.

이 줄들이 앱 부팅 방식과 활성화된 렌더링 기능을 설명합니다.

자주 발생하는 문제

문제가 생기면 보통 다음 중 하나입니다.

• SDK 버전 문제: dotnet --version으로 .NET 9 확인.
• HTTPS 인증서 경고: dotnet dev-certs https --trust 실행.
• 포트 충돌: 기존 dotnet 프로세스를 종료 후 재실행.

다음 챕터

챕터 3에서는 컴포넌트를 깊이 다룹니다: 파라미터, 조합, 재사용 가능한 UI 구조.