How to Create a Basic CRUD Application with Blazor?

40min
개요
이 가이드는 Blazor를 사용하여 완전한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 안내합니다.
이 튜토리얼에서는 Back4app 프로젝트를 구성하고, 데이터베이스 스키마를 설계하며, REST API를 통해 Blazor 프론트엔드를 Back4app과 통합합니다.
이 과정은 강력한 백엔드를 구축하는 데 도움이 되며, 웹 애플리케이션이 데이터를 효율적으로 관리할 수 있도록 보장합니다.
먼저, Basic-CRUD-App-Blazor라는 제목의 Back4app 프로젝트를 설정하여 데이터 관리 시스템의 중추 역할을 하게 됩니다.
다음으로, Back4app AI 에이전트의 도움을 받거나 수동으로 자세한 컬렉션과 필드를 설정하여 확장 가능한 데이터베이스 설계를 만듭니다.
그 후, Back4app 관리 앱의 힘을 활용하여 사용자 친화적인 드래그 앤 드롭 인터페이스로 컬렉션을 손쉽게 관리합니다.
마지막으로, REST API를 사용하여 Blazor 프론트엔드를 Back4app에 연결하고 적절한 접근 제어로 백엔드를 안전하게 보호합니다.
이 튜토리얼이 끝날 무렵, 필수 CRUD 작업과 사용자 인증 및 안전한 데이터 업데이트를 지원하는 프로덕션 준비가 완료된 웹 애플리케이션을 갖게 될 것입니다.
주요 학습 포인트
신뢰할 수 있는 백엔드를 사용하여 데이터 작업을 원활하게 처리하는 CRUD 애플리케이션을 구축합니다.
확장 가능한 백엔드를 생성하고 이를 Blazor 프론트엔드와 통합하는 방법에 대한 통찰력을 얻습니다.
Back4app 관리 앱의 드래그 앤 드롭 기능을 활용하여 데이터 관리를 간소화합니다.
애플리케이션을 신속하게 배포하기 위한 Docker 컨테이너화 등 배포 기술을 배웁니다.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
Back4app 계정과 새 프로젝트가 설정되어 있습니다.
도움이 필요하면 Back4app 시작하기를 방문하세요.
Blazor 개발 환경이 필요합니다.
최신 .NET SDK(버전 6 이상)를 사용하여 Visual Studio 또는 Visual Studio Code를 사용하세요.
C#, Blazor 및 RESTful API에 대한 기본 지식이 필요합니다.
필요한 경우 Blazor 문서를 확인하세요.
﻿
1단계 – 초기 프로젝트 설정
새 Back4app 프로젝트 설정하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 선택하세요.
프로젝트 제목을 입력하세요: Basic-CRUD-App-Blazor 및 화면의 지침에 따라 생성 프로세스를 완료하세요.
새 프로젝트 만들기
﻿
설정 후, 새 프로젝트가 대시보드에 표시되어 백엔드를 구성할 수 있는 견고한 기반을 제공합니다.
﻿
2단계 – 데이터베이스 스키마 설계하기
데이터 모델 만들기
이 기본 CRUD 애플리케이션을 위해 여러 컬렉션을 만들어야 합니다. 아래는 데이터베이스를 효율적으로 설정하기 위한 필드와 데이터 유형이 포함된 컬렉션의 예입니다.
1. 항목 수집
필드
데이터 유형
목적
_id
객체 ID
자동 생성된 고유 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간단한 요약입니다.
생성일
날짜
항목이 생성된 시간 스탬프.
업데이트됨
날짜
항목이 마지막으로 수정된 시간.
2. 사용자 수집
필드
데이터 유형
목적
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
사용자의 이메일 주소.
비밀번호_해시
문자열
안전한 로그인을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성의 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트의 타임스탬프.
이러한 컬렉션은 Back4app 대시보드에서 각 컬렉션에 대한 새 클래스를 설정하고 필요한 열을 추가하여 수동으로 만들 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 필드 이름을 지정하고, 기본값을 설정하고, 필드가 필수인지 여부를 결정하여 열을 정의할 수 있습니다.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 사용하기
Back4app AI 에이전트는 대시보드에서 직접 스키마 생성을 간소화합니다. 컬렉션과 필드에 대한 세부 정보를 포함한 프롬프트를 입력하면 AI 에이전트가 필요한 데이터베이스 스키마를 자동으로 생성합니다.
AI 에이전트 활용 방법:
AI 에이전트에 접근하기:
Back4app 대시보드에 로그인하고 설정 또는 메인 메뉴에서 AI 에이전트를 찾습니다.
데이터 모델 정의하기:
컬렉션과 필드를 나열하는 설명 프롬프트를 붙여넣습니다.
검토 및 확인하기:
제안된 스키마를 확인하고 프로젝트에 적용합니다.
샘플 프롬프트
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 AI 에이전트를 사용하면 시간을 절약할 뿐만 아니라 일관되고 효율적인 스키마 설정을 보장합니다.
﻿
3단계 – 관리자 앱 활성화 및 CRUD 작업 관리
관리자 앱 소개
Back4app 관리자 앱은 백엔드 데이터를 관리하기 위한 코드 없는 드래그 앤 드롭 인터페이스를 제공합니다. 이 직관적인 도구를 사용하면 CRUD 작업을 쉽게 수행할 수 있습니다.
관리자 앱 활성화
Back4app 대시보드에서 “더보기” 메뉴로 이동합니다.
“관리자 앱”을 클릭한 다음 “관리자 앱 활성화.”
초기 관리자 사용자를 생성하여 관리자 자격 증명을 설정합니다. 이로 인해 기본 역할과 시스템 컬렉션도 설정됩니다.
관리자 앱 활성화
﻿
활성화한 후, 관리자 앱에 로그인하여 컬렉션과 데이터를 관리합니다.
관리자 앱 대시보드
﻿
관리자 앱으로 CRUD 작업 수행하기
관리자 앱 내에서 다음을 수행할 수 있습니다:
레코드 생성: 컬렉션 내에서 “레코드 추가” 버튼을 클릭하여 새 항목을 추가합니다.
레코드 읽기/업데이트: 레코드를 클릭하여 세부 정보를 확인하거나 필드를 수정합니다.
레코드 삭제: 더 이상 필요하지 않은 항목을 제거합니다.
이 간단한 드래그 앤 드롭 인터페이스는 데이터 관리 경험을 크게 향상시킵니다.
﻿
4단계 – Blazor와 Back4app 연결하기
이제 백엔드가 구성되었으므로 Blazor 프론트엔드를 Back4app과 통합할 시간입니다.
Blazor에서 REST API 사용하기
Parse SDK는 Blazor에 적용되지 않으므로 CRUD 작업을 수행하기 위해 REST API를 활용합니다. Blazor 애플리케이션에서 HttpClient를 사용하여 Back4app의 REST 엔드포인트와 상호작용합니다.
예시: REST를 통한 항목 가져오기
항목을 가져오기 위해 Blazor 프로젝트에 서비스를 만드세요. 예를 들어:
C#
// Services/ItemService.cs
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text.Json;
using System.Threading.Tasks;
using System.Collections.Generic;

public class Item
{
    public string id { get; set; }
    public string title { get; set; }
    public string description { get; set; }
}

public class ItemService
{
    private readonly HttpClient _httpClient;
    private const string BaseUrl = "https://parseapi.back4app.com/classes/Items";

    public ItemService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.DefaultRequestHeaders.Add("X-Parse-Application-Id", "YOUR_APPLICATION_ID");
        _httpClient.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", "YOUR_REST_API_KEY");
    }

    public async Task<List<Item>> GetItemsAsync()
    {
        var response = await _httpClient.GetAsync(BaseUrl);
        response.EnsureSuccessStatusCode();
        var json = await response.Content.ReadAsStringAsync();
        var itemsData = JsonSerializer.Deserialize<ItemsResponse>(json);
        return itemsData.results;
    }
}

public class ItemsResponse
{
    public List<Item> results { get; set; }
}
// Services/ItemService.cs
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text.Json;
using System.Threading.Tasks;
using System.Collections.Generic;

public class Item
{
    public string id { get; set; }
    public string title { get; set; }
    public string description { get; set; }
}

public class ItemService
{
    private readonly HttpClient _httpClient;
    private const string BaseUrl = "https://parseapi.back4app.com/classes/Items";

    public ItemService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.DefaultRequestHeaders.Add("X-Parse-Application-Id", "YOUR_APPLICATION_ID");
        _httpClient.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", "YOUR_REST_API_KEY");
    }

    public async Task<List<Item>> GetItemsAsync()
    {
        var response = await _httpClient.GetAsync(BaseUrl);
        response.EnsureSuccessStatusCode();
        var json = await response.Content.ReadAsStringAsync();
        var itemsData = JsonSerializer.Deserialize<ItemsResponse>(json);
        return itemsData.results;
    }
}

public class ItemsResponse
{
    public List<Item> results { get; set; }
}
﻿
Blazor 구성 요소 내에서 이러한 API 호출을 통합하여 CRUD 작업을 관리하세요.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 구현
객체에 ACL을 설정하여 데이터를 보호하세요. 예를 들어, 개인 항목을 만들기 위해:
C#
public async Task CreatePrivateItemAsync(Item newItem, string ownerId)
{
    // Prepare your item data with proper access controls
    // In your REST call, include ACL information as required by your backend
    // This is a conceptual example; refer to Back4app documentation for ACL details
}
public async Task CreatePrivateItemAsync(Item newItem, string ownerId)
{
    // Prepare your item data with proper access controls
    // In your REST call, include ACL information as required by your backend
    // This is a conceptual example; refer to Back4app documentation for ACL details
}
﻿
클래스 수준 권한(CLP) 구성
Back4app 대시보드 내에서 각 컬렉션의 CLP를 조정하여 권한이 있는 사용자만 민감한 데이터에 접근하거나 수정할 수 있도록 하세요.
﻿
6단계 – 사용자 인증 관리
Blazor에서 사용자 계정 설정
Back4app은 Parse의 사용자 클래스를 활용하여 인증을 처리합니다. Blazor 앱에서 REST 호출을 통해 사용자 가입 및 로그인을 관리합니다. 예를 들어:
C#
// Services/AuthService.cs
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;

public class AuthService
{
    private readonly HttpClient _httpClient;
    private const string SignUpUrl = "https://parseapi.back4app.com/users";

    public AuthService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.DefaultRequestHeaders.Add("X-Parse-Application-Id", "YOUR_APPLICATION_ID");
        _httpClient.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", "YOUR_REST_API_KEY");
    }

    public async Task SignUpAsync(string username, string password, string email)
    {
        var user = new { username, password, email };
        var response = await _httpClient.PostAsJsonAsync(SignUpUrl, user);
        response.EnsureSuccessStatusCode();
        // Handle success, such as storing tokens or redirecting the user
    }
}
// Services/AuthService.cs
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;

public class AuthService
{
    private readonly HttpClient _httpClient;
    private const string SignUpUrl = "https://parseapi.back4app.com/users";

    public AuthService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.DefaultRequestHeaders.Add("X-Parse-Application-Id", "YOUR_APPLICATION_ID");
        _httpClient.DefaultRequestHeaders.Add("X-Parse-REST-API-Key", "YOUR_REST_API_KEY");
    }

    public async Task SignUpAsync(string username, string password, string email)
    {
        var user = new { username, password, email };
        var response = await _httpClient.PostAsJsonAsync(SignUpUrl, user);
        response.EnsureSuccessStatusCode();
        // Handle success, such as storing tokens or redirecting the user
    }
}
﻿
로그인 및 세션 관리를 위해 유사한 방법을 구현할 수 있습니다. 소셜 로그인, 이메일 인증 및 비밀번호 복구와 같은 추가 기능은 Back4app 대시보드를 통해 설정할 수 있습니다.
﻿
7단계 – Blazor 프론트엔드 배포
Back4app의 웹 배포 기능을 사용하면 GitHub 리포지토리에서 코드를 배포하여 Blazor 애플리케이션을 원활하게 호스팅할 수 있습니다.
7.1 프로덕션 빌드 생성
터미널에서 프로젝트 디렉토리를 엽니다.
게시 명령을 실행합니다:
Bash
dotnet publish -c Release
dotnet publish -c Release
﻿
이 명령은 Blazor 앱을 위한 최적화된 정적 파일이 포함된 게시 폴더를 생성합니다.
빌드를 확인합니다:
출력 폴더에 필요한 파일(예: index.html, JavaScript, CSS 등)이 포함되어 있는지 확인합니다.
﻿
7.2 코드 정리 및 업로드
귀하의 Git 저장소는 Blazor 애플리케이션의 전체 소스를 포함해야 합니다. 예시 폴더 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Blazor-Frontend/
|-- wwwroot/
|   |-- index.html
|-- Pages/
|   |-- Index.razor
|   |-- Items.razor
|   |-- Login.razor
|-- Services/
|   |-- ItemService.cs
|   |-- AuthService.cs
|-- Program.cs
|-- Basic-CRUD-App-Blazor.csproj
|-- README.md
Basic-CRUD-App-Blazor-Frontend/
|-- wwwroot/
|   |-- index.html
|-- Pages/
|   |-- Index.razor
|   |-- Items.razor
|   |-- Login.razor
|-- Services/
|   |-- ItemService.cs
|   |-- AuthService.cs
|-- Program.cs
|-- Basic-CRUD-App-Blazor.csproj
|-- README.md
﻿
샘플 파일: Program.cs
C#
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Basic_CRUD_App_Blazor;
using Basic_CRUD_App_Blazor.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<ItemService>();
builder.Services.AddScoped<AuthService>();

await builder.Build().RunAsync();
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Basic_CRUD_App_Blazor;
using Basic_CRUD_App_Blazor.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<ItemService>();
builder.Services.AddScoped<AuthService>();

await builder.Build().RunAsync();
﻿
GitHub에 커밋하고 푸시하기
프로젝트 폴더에서 Git 초기화하기 (아직 하지 않았다면):
Bash
git init
git init
﻿
파일 추가하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "Blazor 프론트엔드 소스 코드의 초기 커밋"
git commit -m "Blazor 프론트엔드 소스 코드의 초기 커밋"
﻿
GitHub 리포지토리 생성하기:
이름을 Basic-CRUD-App-Blazor-Frontend로 설정하세요.
리포지토리 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Blazor-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Blazor-Frontend.git
git push -u origin main
﻿
﻿
7.3 웹 배포와 리포지토리 통합하기
웹 배포 옵션에 접근하기:
Back4app 대시보드에서 프로젝트 (Basic-CRUD-App-Blazor)를 열고 웹 배포 섹션으로 이동합니다.
GitHub 계정 연결하기:
프롬프트에 따라 GitHub 계정을 연결하여 Back4app이 귀하의 리포지토리에 접근할 수 있도록 합니다.
리포지토리 및 브랜치 선택하기:
리포지토리 (예: Basic-CRUD-App-Blazor-Frontend)와 브랜치 (예: main)를 선택하여 Blazor 코드를 포함합니다.
﻿
7.4 배포 구성
다음과 같은 추가 세부정보를 제공하십시오:
빌드 명령:
게시된 폴더가 미리 생성되지 않은 경우, 다음과 같은 명령을 지정하십시오: dotnet publish -c Release.
출력 디렉토리:
출력 경로를 설정하십시오 (예: bin/Release/net6.0/wwwroot).
환경 변수:
구성에서 필요한 환경 설정(예: API 키)을 추가하십시오.
﻿
7.5 Docker로 Blazor 애플리케이션 컨테이너화하기
배포를 위해 Docker를 선호하는 경우, 리포지토리에 Dockerfile을 포함하십시오. 다음은 예입니다:
Dockerfile
# Use the official .NET SDK image for building the app
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["Basic-CRUD-App-Blazor.csproj", "./"]
RUN dotnet restore "Basic-CRUD-App-Blazor.csproj"
COPY . .
RUN dotnet publish "Basic-CRUD-App-Blazor.csproj" -c Release -o /app/publish

# Use the official ASP.NET Core runtime image to run the app
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS runtime
WORKDIR /app
COPY --from=build /app/publish .
EXPOSE 80
ENTRYPOINT ["dotnet", "Basic-CRUD-App-Blazor.dll"]
# Use the official .NET SDK image for building the app
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["Basic-CRUD-App-Blazor.csproj", "./"]
RUN dotnet restore "Basic-CRUD-App-Blazor.csproj"
COPY . .
RUN dotnet publish "Basic-CRUD-App-Blazor.csproj" -c Release -o /app/publish

# Use the official ASP.NET Core runtime image to run the app
FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS runtime
WORKDIR /app
COPY --from=build /app/publish .
EXPOSE 80
ENTRYPOINT ["dotnet", "Basic-CRUD-App-Blazor.dll"]
﻿
그런 다음, 웹 배포 설정에서 Docker 옵션을 선택하여 컨테이너화된 애플리케이션을 배포하십시오.
﻿
7.6 애플리케이션 시작하기
배포 시작하기:
Back4app 대시보드에서 배포 버튼을 클릭하세요.
빌드 모니터링하기:
Back4app이 GitHub에서 코드를 가져오고, 필요시 빌드 명령을 실행하며, 컨테이너에 앱을 배포합니다.
URL 가져오기:
배포 과정이 완료되면 Back4app이 호스팅된 Blazor 애플리케이션의 URL을 제공합니다.
﻿
7.7 배포 확인하기
제공된 URL 열기:
브라우저에서 URL을 방문하여 배포된 앱을 확인하세요.
애플리케이션 테스트하기:
모든 페이지가 올바르게 로드되고 CRUD 작업이 예상대로 작동하는지 확인하세요.
필요시 문제 해결하기:
브라우저 개발자 도구를 사용하고 Back4app의 배포 로그를 검토하여 문제를 진단하세요.
﻿
8단계 – 요약 및 추가 탐색
축하합니다! Blazor와 Back4app을 사용하여 기본 CRUD 애플리케이션을 성공적으로 구축했습니다. 
"Basic-CRUD-App-Blazor"라는 제목의 프로젝트를 설정하고, 항목 및 사용자에 대한 컬렉션을 설계했으며, 원활한 데이터 관리를 위해 Back4app 관리 앱을 활용했습니다. 
또한, REST API를 사용하여 Blazor 프론트엔드를 Back4app과 통합하고 강력한 보안 조치를 적용했습니다.
향후 단계:
프론트엔드 확장:
더욱 상세한 보기, 검색 기능 또는 실시간 알림으로 Blazor 앱을 향상시키세요.
고급 기능 추가:
클라우드 기능, 타사 통합 또는 역할 기반 권한을 통합하는 것을 고려하세요.
추가 자료 상담:
Back4app 문서 및 기타 고급 튜토리얼을 검토하여 애플리케이션을 더욱 최적화하고 확장하세요.
이 가이드를 따르면, 이제 Back4app을 사용하여 Blazor 애플리케이션을 위한 확장 가능하고 안전한 CRUD 백엔드를 구축할 수 있는 기반이 마련되었습니다. 즐거운 코딩 되세요!
필드	데이터 유형	목적
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간단한 요약입니다.
생성일	날짜	항목이 생성된 시간 스탬프.
업데이트됨	날짜	항목이 마지막으로 수정된 시간.
필드	데이터 유형	목적
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 이메일 주소.
비밀번호_해시	문자열	안전한 로그인을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성의 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Build a CRUD App with SvelteKit? A Comprehensive Tutorial
How to Build a Basic CRUD App with RedwoodJS? A Step-by-Step Guide