고급 작업 목록 애플리케이션
고급 작업 목록 앱은 프로젝트의 작업을 관리하면서 온톨로지 인터페이스, 미디어 집합, 파생 속성과 플랫폼 SDK를 사용하는 예제입니다. VS Code 작업 공간의 예제로 설치할 수 있습니다.
프로젝트 목록은 종류별 작업 개수와 상태별 통계를 표시합니다. 프로젝트를 선택하면 코딩 작업과 학습 작업을 하나의 인터페이스로 조회합니다. 상세 화면에서는 코드 본문이나 미디어 자료를 표시하고, 사용자 이름과 프로필 이미지는 Admin API에서 읽습니다.
구성과 구현
| 장 | 담당 기능 |
|---|---|
| 아키텍처와 설정 | 예제 설치, 라우팅, 인증 클라이언트와 환경 설정 |
| useProjects | 프로젝트 첫 페이지와 서버에서 계산한 작업 통계 |
| useTasks | 프로젝트의 작업 첫 페이지, 사용자 정보 결합과 구독에 따른 재검증 |
| useCodingTask | 인터페이스에서 코딩 작업의 속성을 읽는 상세 화면 |
| useLearningTask | 학습 작업 조회, 미디어 유형 판별과 표시 URL 관리 |
| useAdmin | 현재 사용자, 사용자 일괄 조회와 프로필 이미지 |
데이터 처리는 사용자 정의 훅으로 분리하고 화면 컴포넌트는 반환된 데이터와 상태를 사용합니다. 이 예제는 SWR로 캐시와 재검증을 관리합니다. 일반적인 OSDK React 앱에서는 @osdk/react의 데이터 훅도 사용할 수 있습니다.
필요한 개념
- 온톨로지 인터페이스는 여러 작업 유형에 공통으로 적용할 속성 계약을 제공합니다.
- 미디어 집합은 학습 자료의 바이너리 내용을 저장하고 읽는 데 사용합니다.
- 파생 속성은 프로젝트를 조회할 때 연결된 작업의 개수를 계산합니다.
- 플랫폼 SDK는 온톨로지 객체 외에 Admin API 같은 플랫폼 기능에 접근합니다.
프로젝트 통계와 상세 데이터는 각각의 SWR 키로 관리합니다. 작업 목록의 구독이 모든 캐시를 자동으로 갱신하는 것은 아니므로, 여러 화면을 같은 시점의 데이터로 맞출 때는 관련 키의 재검증도 함께 설계해야 합니다.