화면에서 실시간으로 데이터 수정 - Spectre 콘솔 시리즈

라이브 디스플레이 소개

팀은 Spectre.Console에 대해 설명하고, 이 제품이 콘솔 앱을 시각적으로 매력적으로 만드는 방법을 설명하는 것으로 이야기를 시작합니다. 이 시리즈의 각 강의는 짧은 예제이며, 소스 코드는 설명란에 링크되어 있습니다.

그는 이번 수업이 실시간 업데이트에 맞춰 화면의 기존 데이터를 수정하기 위해 실시간 표시 기능을 사용하는 방법에 중점을 둔다고 설명합니다. 팀은 시청자들에게 더 많은 교육 자료를 얻으려면 구독하고 iamtimcorey.com을 방문하라고 권장합니다.

데이터를 위한 새 테이블 생성

팀은 제목, 수업, 시간 열이 있는 새 표를 이미 만들었다는 것을 보여줍니다. 이 표는 API에서 가져온 강좌 정보를 표시하는 데 사용됩니다.

또한 그는 코스 이름, 수업 횟수, 코스 길이(시간)에 대한 강력한 형식의 속성을 가진 CourseInfo라는 레코드 유형을 소개합니다. 이는 API 구조를 그대로 반영하여 그가 강력한 형식의 텍스트를 쉽게 출력할 수 있도록 해줍니다.

표에 바닥글 표시 기능이 켜져 있으므로 나중에 합계를 표시할 수 있습니다. 팀은 이 레이아웃이 스펙터가 아름다운 콘솔 애플리케이션을 위해 지원하는 다양한 임의 위젯 중 하나라고 언급합니다.

라이브 디스플레이 시작

Tim은 AnsiConsole.Live(table).StartAsync(...) 메서드를 사용하여 실시간 표시를 시작합니다. 그는 장시간 실행되는 작업을 기다릴 필요가 없는 경우 비동기 방식이 아닌 Start() 함수도 있다고 지적합니다.

그는 새 행이 도착할 때 콘솔이 새로 고쳐지도록 코드를 비동기 컨텍스트로 감쌌습니다. 이는 화면을 지우지 않고도 출력을 다시 그릴 수 있는 현재 터미널의 기능을 보여줍니다.

데이터 가져오기 및 진행 상황 표시

실제 실행 환경 내에서 Tim은 샘플 API에 31개의 강좌가 나열되어 있으므로 1부터 31까지의 정수 인덱스를 사용하는 for 루프를 작성합니다. 그는 각 인덱스에 대해 헬퍼 클래스의 메서드를 호출하여 API 데이터를 가져옵니다.

이 헬퍼 함수는 원시 JSON 문자열을 강력한 형식의 CourseInfo 객체로 변환합니다. Tim은 진행 상황 표시 방식을 실시간으로 보여주기 위해 의도적으로 API를 일괄 호출하는 대신 코스별로 하나씩 호출합니다. 이는 콘솔 환경에서 오래 걸리는 작업을 시뮬레이션하는 훌륭한 예입니다.

그는 만약 요청이 한 번만 필요했다면 URL에서 /i를 제거하면 됐겠지만, "시간에 따라 들어오는 것들을 보여주기 위해" 여러 번 호출하고 있다고 언급했습니다.

행 추가 및 출력 업데이트

Tim은 CourseInfo 인스턴스가 반환될 때마다 table.AddRow(...)를 호출하여 코스 제목, 수업 수 및 시간(시간)을 포함하는 새 행을 생성합니다. 그는 '$' 형식을 사용하여 문자열 보간을 수행하고, 문자열이 아닌 값을 변환하기 위해 필요한 경우 '.ToString()'을 호출합니다.

이 코드는 매번 실행할 때마다 새로운 행이 테이블에 추가되어 Spectre가 행을 동적으로 업데이트하는 방법을 보여줍니다. 그는 또한 변환을 명시적으로 언급함으로써 유형 불일치와 같은 잠재적인 문제를 포착하는 방법을 보여줍니다.

사용자 지정 바닥글 및 누적 합계

다음으로 Tim은 열에 사용자 지정 바닥글을 추가하는 방법을 보여줍니다. 그는 지금까지 다운로드된 강좌 수를 표시하기 위해 table.Columns[0].Footer를 설정합니다. 그는 두 번째와 세 번째 열에도 동일한 작업을 반복하지만, 이번에는 모든 강좌의 수업 횟수와 총 시간을 합산합니다.

이렇게 하면 사용자는 누적된 수업 수와 시간을 한눈에 확인할 수 있습니다. 이는 Spectre의 컨트롤을 사용하여 실시간 데이터와 함께 값 합계를 표시하는 실제 사례입니다.

팀은 숫자가 늘어남에 따라 전체 레이아웃을 볼 수 있도록 잠시 창을 "고정 해제"했습니다. 그는 푸터가 테두리, 마크업, 테마처럼 Spectre에서 제공하는 기본 스타일의 일부라고 설명합니다.

각 작업 후 컨텍스트 새로 고침

Tim은 실시간 디스플레이에서 "가장 중요한 점"을 강조합니다. 변경 사항을 적용한 후에는 항상 context.Refresh()를 호출해야 한다는 것입니다. 이렇게 하면 터미널이 새 데이터로 출력을 다시 그리게 됩니다. 이 설정이 없으면 라이브 세션이 끝날 때까지 행, 바닥글 또는 다양한 색상이 나타나지 않습니다.

디버깅 및 예외 처리

팀이 처음 코드를 실행했을 때, 인덱스 범위를 벗어난 예외가 발생했습니다. 그는 자신의 실수, 즉 열 인덱스를 잘못 세었다는 점(0,1,2가 아니라 0,2,3임)을 설명하고 이를 바로잡습니다.

Spectre.Console을 사용하더라도 오류를 포착하고 인덱스와 인수가 올바른지 확인해야 한다는 점을 다시 한번 알려드립니다.

라이브 디스플레이 작동 모습 보기

팀은 수정된 코드를 실행하고 행이 추가되고, 합계가 업데이트되고, 바닥글에 합산된 값이 표시되는 모습을 실시간으로 보여줍니다.

데이터가 입력되는 동안 "1,652개 수업", "403.5시간", "총 31개 과정" 등의 수치를 확인할 수 있습니다. 바로 이런 동작 덕분에 Spectre Console 실시간 표시가 현재 터미널 내의 대시보드처럼 느껴지는 것입니다.

푸터에만 집중하기

변경 사항을 더 잘 보이게 하기 위해 Tim은 행 추가 코드를 주석 처리하여 바닥글만 업데이트되도록 했습니다. 이는 스크롤 데이터 없이도 실시간으로 총계를 추적할 수 있는 방법을 보여줍니다.

그는 또한 Spectre가 숫자가 증가할 때(예: 9에서 10으로) 열 너비를 자동으로 조정한다는 점을 언급했습니다. 이는 라이브러리의 너비 및 형식 자동 감지 기능을 보여주는 작지만 강력한 예시입니다.

테이블을 넘어선 자유로운 위젯과 테마 활용

팀은 실시간 디스플레이가 테이블에만 국한되지 않는다고 설명합니다. 패널, 사용자 입력 프롬프트, 막대 그래프 등 임의의 위젯에 적용할 수 있습니다. 텍스트를 수정하거나, 다양한 색상으로 강조 표시하거나, 사용자 지정 색상 테마를 적용하거나, 스피너를 추가할 수 있습니다.

그는 파란색, 녹색 또는 회색과 같은 스타일을 테마에 맞게 변경할 수 있으며, 중첩 레이아웃이나 위젯을 사용할 수도 있다고 언급합니다. 이러한 유연성 덕분에 Spectre는 다른 생태계의 풍부한 콘솔 도구(심지어 Python으로 작성된 것도 있음)에서 "많은 영감을 받았지만" .NET 에 맞게 최적화되었습니다.

비동기식 라이브 디스플레이 시작 vs. 동기식 라이브 디스플레이 시작

팀은 자신이 비동기 버전을 사용한 이유를 설명했습니다. API 호출을 기다리고 있었기 때문이라고 했습니다. 업데이트가 비동기적이지 않다면 await 없이 Start()를 바로 호출하면 됩니다.

이 옵션을 선택하면 장시간 실행되는 작업에도 불구하고 응답성을 유지하는 아름다운 콘솔 애플리케이션을 구축할 수 있습니다.

결론

Tim은 자신의 영상 에서 Spectre 콘솔 내에서 데이터를 업데이트, 합산 및 새로 고침할 수 있는 실시간 디스플레이를 구축하는 방법을 보여주었습니다.

이는 사용자 입력을 유도하고, 위젯을 추가하거나, 다양한 색상과 사용자 지정 색상 테마를 적용한 대시보드를 구축하는 데 훌륭한 기반이 됩니다. Spectre는 텍스트를 쉽게 출력하고, 마크업을 사용하고, 패널이나 트리와 같은 컨트롤을 생성할 수 있는 기능을 제공하므로, 이를 활용하면 터미널에서 바로 동적인 .NET 앱을 구축할 수 있습니다.

Tim의 시연은 Spectre.Console을 사용하면 대시보드뿐만 아니라 실시간으로 업데이트되는 테이블, 스피너 및 기타 위젯도 만들 수 있음을 보여줍니다. 이는 평범한 콘솔을 실시간 대화형 도구로 바꾸는 실용적인 예시이며, 사용자들에게 "즐거운 코딩 되세요"라고 말하는 좋은 방법입니다.