Blazor와 WebAPI 연동

🧱 공용 모델 구조 정리

Blazor 프로젝트(RankingApp) 내의 Models/GameResult.cs는 삭제합니다.
왜냐하면 WebAPI 구현 시 생성했던 SharedData 프로젝트 내 GameResult.cs를 공용 모델로 사용하기 때문입니다.

• RankingApp → Models 폴더 삭제
• GameResult.cs 삭제

✅ SharedData 참조 추가

RankingApp 프로젝트에서 SharedData를 참조하도록 설정합니다.

• 프로젝트 우클릭 > 추가 > 프로젝트 참조
• SharedData 체크

---

📦 using 구문 정리

GameResult를 참조하는 모든 파일에서 기존 RankingApp.Data.Models 참조 제거 후 아래처럼 수정합니다:

using SharedData.Models;

적용 대상:

• RankingService.cs
• Ranking.razor
• ApplicationDbContext.cs → 해당 스크립트에서는 DbSet<GameResult>도 제거합니다. WebAPI가 대신 처리하므로 더 이상 필요 없음.

---

🧹 기존 CRUD 로직 제거

이제 RankingService.cs 내부에서 직접 DB에 접근하지 않고 WebAPI를 통해 처리합니다.
기존 함수들을 모두 지웁니다:

// 아래 메서드들 삭제
- AddGameResult()
- GetGameResultsAsync()
- UpdateGameResult()
- DeleteGameResult()

📌 구조의 변화

기존 구조:

[Client (Blazor)] ↔ [Server (Blazor)] → [DB]

변경 후 구조:

[Client (Blazor)] ↔ [WebAPI] → [DB]

---

🌐 HttpClient 설정

이제 WebAPI와 통신을 위해 HttpClient를 등록합니다.

1. Program.cs 수정

builder.Services.AddHttpClient<RankingService>(c =>
{
    c.BaseAddress = new Uri("https://localhost:44360"); // ← WebAPI의 포트 번호
});

포트 번호 확인:
WebAPI 프로젝트 > Properties > launchSettings.json > sslPort

"sslPort": 44360

---

✏️ WebAPI와 통신하는 CRUD 메서드 작성

RankingService.cs를 다음과 같이 수정합니다:

using 구문

using Newtonsoft.Json;
using SharedData.Models;
using System.Text;

생성자

HttpClient _httpClient;

public RankingService(HttpClient client)
{
    _httpClient = client;
}

---

🟩 CREATE (POST)

public async Task<GameResult> AddGameResult(GameResult gameResult)
{
    string jsonStr = JsonConvert.SerializeObject(gameResult);
    var content = new StringContent(jsonStr, Encoding.UTF8, "application/json");
    var result = await _httpClient.PostAsync("api/ranking", content);

    if (!result.IsSuccessStatusCode)
        throw new Exception("AddGameResult Failed");

    var resultContent = await result.Content.ReadAsStringAsync();
    GameResult resGameResult = JsonConvert.DeserializeObject<GameResult>(resultContent);
    return resGameResult;
}

---

🟨 READ (GET)

public async Task<List<GameResult>> GetGameResultsAsync()
{
    var result = await _httpClient.GetAsync("api/ranking");
    var resultContent = await result.Content.ReadAsStringAsync();
    List<GameResult> gameResults = JsonConvert.DeserializeObject<List<GameResult>>(resultContent);
    return gameResults;
}

---

🟦 UPDATE (PUT)

public async Task<bool> UpdateGameResult(GameResult gameResult)
{
    string jsonStr = JsonConvert.SerializeObject(gameResult);
    var content = new StringContent(jsonStr, Encoding.UTF8, "application/json");
    var result = await _httpClient.PutAsync("api/ranking", content);

    if (!result.IsSuccessStatusCode)
        throw new Exception("UpdateGameResult Failed");

    return true;
}

---

🟥 DELETE (DELETE)

public async Task<bool> DeleteGameResult(GameResult gameResult)
{
    var result = await _httpClient.DeleteAsync($"api/ranking/{gameResult.Id}");

    if (!result.IsSuccessStatusCode)
        throw new Exception("DeleteGameResult Failed");

    return true;
}

---

🧪 Blazor 화면과 연동

Ranking.razor 파일에서 SaveGameResult() 함수를 다음과 같이 수정합니다:

@code {
    List<GameResult> _gameResults;

    async Task SaveGameResult()
    {
        if (_gameResult.Id == 0)
        {
            _gameResult.Date = DateTime.Now;
            var result = await RankingService.AddGameResult(_gameResult);
        }
        else
        {
            var result = await RankingService.UpdateGameResult(_gameResult);
        }

        _showPopup = false;
        _gameResults = await RankingService.GetGameResultsAsync();
    }
}

---

🧪 다중 시작 프로젝트로 실행

Blazor와 WebAPI를 동시에 실행해야 합니다.

1. 솔루션 우클릭 → [속성] → [시작 프로젝트]
2. "여러 개의 시작 프로젝트" 선택
3. RankingApp과 WebApi 모두 시작으로 설정

---

✅ 최종 확인

• Blazor 앱 실행 → /ranking 페이지로 이동
• 기존 데이터가 JSON 형태로 출력되는지 확인
• 추가(Add) / 수정(Edit) / 삭제(Delete) 버튼 작동 확인
• Postman 없이도 정상적으로 WebAPI와 연동됨 확인 가능

---