WinForms 및 Blazor와 함께 테스트 API 사용하기

샘플 API 및 Visual Studio 소개

팀은 웹 개발이나 윈도우 폼 프로그래밍을 배울 때 샘플 API가 얼마나 중요한지 강조하면서 이야기를 시작합니다. 신뢰할 수 있는 API는 다양한 사용자 인터페이스 환경에서 기능을 테스트하기 위한 안정적인 백엔드 역할을 합니다. Tim은 Visual Studio IDE를 사용하여 새 프로젝트 생성 과정을 살펴보고 Blazor 및 Windows Forms 플랫폼을 모두 보여줍니다.

Blazor 웹 애플리케이션 시작하기

Tim은 Visual Studio의 "새 프로젝트" 대화 상자를 사용하여 Blazor WebAssembly 애플리케이션을 선택합니다. 그는 "DemoApps"라는 솔루션 내에 "BlazorDemo"라는 프로젝트 이름을 지정합니다. 이 설정은 "자동" 모드를 사용하여 서버 측 렌더링과 WebAssembly 렌더링을 모두 지원합니다.

API를 통해 모델 추가하기

Tim은 클라이언트 측 프로젝트에 CourseModel.cs라는 새 파일을 생성합니다. 그는 API의 /courses 엔드포인트에서 JSON 페이로드를 복사한 다음, Visual Studio의 "JSON을 클래스로 붙여넣기" 도구를 사용하여 클래스 구조를 자동으로 생성합니다. 해당 도구가 완벽하지는 않지만, Tim은 C# 표준에 맞추기 위해 파스칼식 표기법과 널 허용 문자열을 사용하여 클래스를 개선했습니다.

데이터 유형 및 JSON 매핑 조정

팀은 생성된 속성을 수동으로 검토하고, 정확성을 위해 priceUSD와 같은 값을 소수점으로 변환합니다. 또한 그는 JsonSerializerOptions 객체를 구성하여 속성 이름이 대소문자를 구분하지 않도록 함으로써 JSON 키가 C# 속성에 올바르게 매핑되도록 합니다.

Razor 페이지 제작 및 배선

다음으로 Tim은 Razor 라는 이름의 Razor 컴포넌트를 추가하여 URL /courses를 통해 접근 가능한 페이지로 만듭니다. 그는 리스트를 초기화합니다그리고 샘플 API를 호출하기 위해 HttpClient를 주입합니다. 해당 컴포넌트의 로직에는 try-catch를 사용한 오류 처리와 데이터 가용성에 따른 조건부 UI 렌더링이 포함되어 있습니다.

강좌 정보 표시

Tim은 기본적인 HTML과 Razor 구문을 사용하여 강좌 목록을 순회하고 각 강좌 이미지를 클릭 가능한 링크로 표시합니다. 그는 레이아웃을 제어하기 위해 인라인 스타일을 적용하고 접근성을 위해 alt 속성을 할당합니다.

Program.cs 파일에 HTTP 클라이언트 등록하기

Tim은 Blazor 앱의 Program.cs 파일에서 HTTP 클라이언트를 구성하고, builder.Services.AddScoped(...)를 사용하여 등록한 다음 기본 주소를 할당합니다.https://thesampleapi.com . 그는 Blazor의 하이브리드 렌더링 모델을 지원하기 위해 클라이언트와 서버 구성 모두에서 이러한 등록이 이루어져야 한다고 설명합니다.

API 중복 호출 문제 해결

Blazor의 기본 사전 렌더링 동작으로 인해 페이지 로드 시 두 번의 API 호출이 발생합니다. Tim은 @rendermode InteractiveAuto와 pre-render=false를 설정하여 사전 렌더링을 비활성화합니다. 이렇게 하면 API 요청이 중복되는 것을 방지하고 원격 데이터를 처리할 때 성능을 향상시킬 수 있습니다.

주제 전환: 윈도우 폼 애플리케이션 만들기

Tim은 Visual Studio 환경을 사용하여 .NET Framework 대상으로 하는 WinFormDemo라는 이름의 새 Windows Forms 앱을 만듭니다. 그는 기본 폼 이름을 '코스'로 변경하고 속성 창을 통해 글꼴 크기를 수정하여 사용자 인터페이스를 더 읽기 쉽게 만듭니다.

솔루션 탐색기를 사용하여 프로젝트 구성하기

팀은 '모델'과 '서비스'라는 두 개의 폴더를 추가합니다. 서비스 섹션에서 그는 HttpClient 인스턴스를 포함하는 정적 클래스 HttpService를 생성합니다. 이 클라이언트는 동일한 API 기본 URL을 대상으로 구성되었습니다. 팀은 단순함을 위해 정적 접근 방식을 사용하지만, 실제 운영 환경에서의 개발에는 의존성 주입을 권장합니다.

툴박스 컨트롤을 사용하여 폼 UI 디자인하기

Tim은 Windows Forms 디자이너에서 PictureBox 하나와 Button 컨트롤 두 개("이전" 및 "다음")를 폼으로 끌어다 놓습니다. 그는 이미지 상자의 SizeMode를 Zoom으로 설정하여 코스 이미지가 컨트롤 안에 깔끔하게 맞도록 합니다. 그는 또한 회사 브랜딩을 반영하여 해당 포럼의 제목을 "DevForge Courses"로 변경했습니다.

코드 비하인드 로직 구현

Tim은 속성 창에서 두 번 클릭하여 발생하는 Form_Load 이벤트를 사용하여 API에서 데이터를 가져오는 비동기 로직을 ​​작성합니다. 또한 그는 이미지 표시 및 경계 유효성 검사를 처리하는 헬퍼 메서드 LoadCourse(int index)를 정의합니다. 이 방법은 견고하며, null 리스트와 범위를 벗어난 인덱스를 문제없이 처리합니다.

버튼을 이용해 강좌 탐색하기

Tim은 "이전" 및 "다음" 버튼을 두 번 클릭하여 이벤트 핸들러(object sender, EventArgs e)를 생성함으로써 해당 버튼을 연결합니다. 각 버튼은 currentCourse 인덱스를 조정하고 LoadCourse()를 호출하여 표시되는 이미지를 업데이트합니다. 이는 슬라이드쇼와 유사한 매끄러운 사용자 경험을 제공합니다.

Docker를 사용하여 로컬 개발 환경으로 전환하기

Tim은 원격 API 대신 로컬 Docker 컨테이너를 사용하는 방법을 설명합니다. 그는 최신 이미지를 다운로드하고, 임의의 포트에서 실행한 다음, HttpService.cs 파일에서 기본 URI를 업데이트합니다. 그는 기능 확인을 마친 후, 오류 처리 테스트를 위해 Docker 컨테이너를 중지하고, 복구 검증을 위해 다시 시작하는 과정을 시연합니다.

결론 및 실제 적용 사례

Tim은 Windows 데스크톱 애플리케이션이나 Blazor 프런트엔드를 개발하는 방법을 배울 때 샘플 API가 얼마나 유용한지 강조하며 결론을 맺습니다. 안정적인 데이터 소스를 확보하면 개발자는 백엔드 설정에 얽매이지 않고 그래픽 사용자 인터페이스 디자인, 폼 컨트롤, 이벤트 및 레이아웃 도구 숙달에 집중할 수 있습니다.

결론

팀 코리의 상세한 비디오 튜토리얼을 따라가면 개발자들은 Blazor 와 윈도우 폼 프로그래밍 모두에 대한 실무 경험을 쌓을 수 있습니다. Visual Studio와 테스트 API를 사용하여 최신 사용자 인터페이스를 구축하고 이를 실시간 데이터 소스에 연결하는 방법을 배우게 되므로, 이 튜토리얼은 .NET 생태계를 탐색하는 개발자에게 유용한 자료입니다.

폼 프로그래밍이 처음이든 윈도우 애플리케이션 개발 기술을 향상시키려는 경우든, 이 가이드는 개발 여정을 지원하는 실용적이고 최신 정보와 모범 사례를 제공합니다.