MAUI 시작하기 - HttpClient 및 WebSocket

MAUI(.NET Multi-platform App UI)에서 네트워크 통신을 구현하려면 `HttpClient`와 같은 라이브러리를 사용하여 REST API와 통신하거나 WebSocket을 사용하여 실시간 데이터 교환을 할 수 있습니다. 이 가이드에서는 REST API를 호출하는 방법과 WebSocket을 사용하여 실시간 통신을 구현하는 방법을 설명합니다.

## REST API를 사용한 통신

### HttpClient를 사용하여 REST API 호출

`HttpClient`는 .NET에서 네트워크 요청을 보내고 응답을 받는 데 사용되는 기본적인 클래스입니다. 이를 사용하여 REST API와 통신할 수 있습니다.

### 개발 환경 설정

#### 프로젝트 생성

1. **Visual Studio 2022**를 엽니다.

2. **새 프로젝트 생성**을 클릭합니다.

3. **.NET MAUI App (MAUI)** 템플릿을 선택하고 프로젝트 이름을 `MauiHttpClientApp`으로 지정합니다.

4. **프로젝트 생성 위치**를 설정하고 **만들기** 버튼을 클릭합니다.

### API 호출 예제

여기서는 [JSONPlaceholder](https://jsonplaceholder.typicode.com/)라는 무료 온라인 REST API를 사용하여 데이터를 가져오는 예제를 보여드립니다.

#### MainPage.xaml UI 구현

`MainPage.xaml` 파일을 열고 다음과 같이 UI를 설계합니다.

```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiHttpClientApp.MainPage">

    <VerticalStackLayout Padding="20" Spacing="15">
        <Label Text="REST API 통신 예제" 
               FontSize="32" 
               HorizontalOptions="Center" />

        <Button Text="Fetch Data" 
                Clicked="OnFetchDataClicked" 
                HorizontalOptions="Center" />

        <ListView x:Name="dataListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}" Detail="{Binding Body}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </VerticalStackLayout>
</ContentPage>
```

#### MainPage.xaml.cs 로직 구현

`MainPage.xaml.cs` 파일에서 `HttpClient`를 사용하여 REST API 호출을 구현합니다.

```csharp
using Microsoft.Maui.Controls;
using System;
using System.Collections.ObjectModel;
using Systehttp://m.Net.Http;
using Systehttp://m.Threading.Tasks;
using Newtonsoft.Json;

namespace MauiHttpClientApp
{
    public partial class MainPage : ContentPage
    {
        private HttpClient _httpClient;
        private ObservableCollection<Post> _posts;

        public MainPage()
        {
            InitializeComponent();
            _httpClient = new HttpClient();
            _posts = new ObservableCollection<Post>();
            dataListView.ItemsSource = _posts;
        }

        private async void OnFetchDataClicked(object sender, EventArgs e)
        {
            await FetchDataAsync();
        }

        private async Task FetchDataAsync()
        {
            try
            {
                string url = "https://jsonplaceholder.typicode.com/posts";
                var response = await _httpClient.GetAsync(url);

                if (response.IsSuccessStatusCode)
                {
                    var content = await response.Content.ReadAsStringAsync();
                    var posts = JsonConvert.DeserializeObject<Post[]>(content);
                    _posts.Clear();

                    foreach (var post in posts)
                    {
                        _posts.Add(post);
                    }
                }
                else
                {
                    await DisplayAlert("Error", "Failed to fetch data", "OK");
                }
            }
            catch (Exception ex)
            {
                await DisplayAlert("Exception", ex.Message, "OK");
            }
        }
    }

    public class Post
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Body { get; set; }
    }
}
```

### 설명

- **HttpClient 사용**: `HttpClient`를 사용하여 API에서 데이터를 가져옵니다. `GetAsync` 메서드를 호출하여 데이터를 비동기적으로 가져옵니다.
- **데이터 바인딩**: API에서 가져온 데이터를 `ObservableCollection<Post>`에 저장하고, 이를 `ListView`에 바인딩하여 화면에 표시합니다.
- **예외 처리**: 네트워크 통신 중 발생할 수 있는 예외를 처리하여 사용자에게 오류 메시지를 표시합니다.

### WebSocket을 사용한 실시간 통신

WebSocket을 사용하여 서버와 클라이언트 간에 실시간으로 데이터를 주고받을 수 있습니다. 여기서는 `Websocket.Client` 패키지를 사용하여 간단한 WebSocket 클라이언트를 구현합니다.

#### NuGet 패키지 설치

1. **솔루션 탐색기**에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 **NuGet 패키지 관리**를 선택합니다.

2. **찾기** 탭에서 다음 패키지를 검색하여 설치합니다:

   - `Websocket.Client`

```bash
dotnet add package Websocket.Client
```

#### WebSocket 예제 구현

WebSocket 서버와 통신하여 메시지를 주고받는 예제를 구현합니다.

#### MainPage.xaml UI 구현

`MainPage.xaml` 파일에서 WebSocket 통신을 위한 UI를 추가합니다.

```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiHttpClientApp.MainPage">

    <VerticalStackLayout Padding="20" Spacing="15">
        <Label Text="WebSocket 통신 예제" 
               FontSize="32" 
               HorizontalOptions="Center" />

        <Button Text="Connect to WebSocket" 
                Clicked="OnConnectWebSocketClicked" 
                HorizontalOptions="Center" />

        <Entry x:Name="messageEntry" 
               Placeholder="Enter message" 
               HorizontalOptions="Center" 
               WidthRequest="200" />

        <Button Text="Send Message" 
                Clicked="OnSendMessageClicked" 
                HorizontalOptions="Center" />

        <Label x:Name="receivedMessageLabel" 
               Text="Received messages will appear here" 
               FontSize="18" 
               TextColor="Black" 
               HorizontalOptions="Center" 
               VerticalOptions="CenterAndExpand" />
    </VerticalStackLayout>
</ContentPage>
```

#### MainPage.xaml.cs 로직 구현

`MainPage.xaml.cs` 파일에서 WebSocket 클라이언트를 설정하고 메시지를 주고받는 기능을 구현합니다.

```csharp
using Microsoft.Maui.Controls;
using System;
using Systehttp://m.Reactive.Linq;
using Systehttp://m.Threading.Tasks;
using Websocket.Client;

namespace MauiHttpClientApp
{
    public partial class MainPage : ContentPage
    {
        private WebsocketClient _websocketClient;

        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnConnectWebSocketClicked(object sender, EventArgs e)
        {
            await ConnectWebSocketAsync();
        }

        private async Task ConnectWebSocketAsync()
        {
            var url = new Uri("wss://echo.websocket.org"); // WebSocket 테스트 서버 URL

            _websocketClient = new WebsocketClient(url);
            _websocketClient.MessageReceived
                .Where(msg => !string.IsNullOrEmpty(msg.Text))
                .ObserveOn(SynchronizationContext.Current)
                .Subscribe(msg =>
                {
                    receivedMessageLabel.Text = $"Received: {msg.Text}";
                });

            await _websocketClient.Start();
        }

        private async void OnSendMessageClicked(object sender, EventArgs e)
        {
            if (_websocketClient != null && _websocketClient.IsRunning)
            {
                var message = messageEntry.Text;
                await _websocketClient.Send(message);
                receivedMessageLabel.Text = $"Sent: {message}";
            }
            else
            {
                await DisplayAlert("Error", "WebSocket is not connected", "OK");
            }
        }
    }
}
```

### 설명

- **WebSocket 연결**: `Websocket.Client`를 사용하여 WebSocket 서버에 연결합니다. `wss://echo.websocket.org`는 테스트용 WebSocket 에코 서버로, 전송된 메시지를 그대로 반환합니다.
- **메시지 수신**: 서버로부터 수신한 메시지를 `MessageReceived` 이벤트를 통해 처리합니다.
- **메시지 전송**: 사용자가 입력한 메시지를 서버로 전송하고, 전송한 메시지를 UI에 표시합니다.

### 애플리케이션 실행 및 테스트

1. **애플리케이션 실행**

   Visual Studio에서 **디버그** 버튼을 클릭하여 애플리케이션을 실행합니다. Android 에뮬레이터 또는 Windows Machine을 선택할 수 있습니다.

2. **API 호출 테스트**

   - **Fetch Data** 버튼을 클릭하여 API 데이터를 가져옵니다.
   - 가져온 데이터는 리스트로 화면에 표시됩니다.

3. **WebSocket 통신 테스트**

   - **Connect to WebSocket** 버튼을 클릭하여 WebSocket 서버에 연결합니다.
   - 메시지를 입력하고 **Send Message** 버튼을 클릭하여 메시지를 서버로 전송합니다.
   - 서버로부터 수신한 메시지가 화면에 표시됩니다.

## 요약

이 예제에서는 MAUI를 사용하여 REST API와 WebSocket을 이용한 네트워크 통신을 구현하는 방법을 설명했습니다. `HttpClient`를 사용하여 REST API와 통신하고, `Websocket.Client`를 사용하여 실