HTTP 클라이언트
스캐폴드된 TodoPage는 이미 백엔드에서 데이터를 가져와요. 그 동작 방식과 어떻게 확장할 수 있는지 살펴볼게요.
출처: 문서
본문
스캐폴드된 TodoPage는 이미 백엔드에서 데이터를 가져와요. 어떻게 동작하는지, 그리고 어떻게 확장할 수 있는지 살펴볼게요.
스캐폴드된 코드가 동작하는 방식
plugins/todo/src/components/TodoPage/TodoPage.tsx를 열고 useTodos 훅을 살펴보세요.
function useTodos() { const { fetch } = useApi(fetchApiRef); return useAsync(async (): Promise<TodoItem[]> => { const response = await fetch(`plugin://todo/todos`); if (!response.ok) { throw new Error( `Failed to fetch todos: ${response.status} ${response.statusText}`, ); } const data = await response.json(); return data.items; });}
여기서는 브라우저 fetch를 감싸고 자동으로 두 가지를 처리하는 Backstage의 fetchApi를 사용하고 있어요.
-
인증 자격 증명을 주입해요 —
Authorization헤더를 수동으로 붙일 필요가 없어요. -
plugin://<pluginId>URL 스킴을 인스턴스의 실제 플러그인 URL로 해석해요.
@react-hookz/web의 useAsync 훅은 마운트 시 비동기 함수를 실행하고 [{ status, result, error }, { execute }]를 반환해요. 컴포넌트는 이 값을 사용해 로딩 스피너, 백엔드 요청이 실패했을 때의 예제 todo 항목, 또는 가져온 todo 목록을 표시해요.
직접 실행해 보기
프론트엔드와 백엔드가 모두 실행 중인지 확인하세요(리포지토리 루트에서 yarn start를 실행하면 둘 다 시작돼요). http://localhost:3000/todo로 이동하면 백엔드에서 가져온 todo가 보일 거예요.
tip
백엔드 golden path에서 설명한 대로 curl을 사용해 todo를 만들 수 있어요. 그다음 프론트엔드 페이지를 새로고침하면 새 항목이 나타나는 걸 볼 수 있어요.
클라이언트 클래스 추출하기
엔드포인트가 여럿 있는 플러그인의 경우 전용 클라이언트 클래스를 추출하면 컴포넌트가 렌더링에 집중할 수 있어요. plugins/todo/src/api/TodoClient.ts를 만드세요.
import { FetchApi } from '@backstage/frontend-plugin-api';import type { TodoItem } from '../components/TodoList';export class TodoClient { readonly #fetchApi: FetchApi; constructor(options: { fetchApi: FetchApi }) { this.#fetchApi = options.fetchApi; } async listTodos(): Promise<TodoItem[]> { const response = await this.#fetchApi.fetch(`plugin://todo/todos`); if (!response.ok) { throw new Error( `Failed to fetch todos: ${response.status} ${response.statusText}`, ); } const data = await response.json(); return data.items; } async createTodo(title: string): Promise<TodoItem> { const response = await this.#fetchApi.fetch(`plugin://todo/todos`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title }), }); if (!response.ok) { throw new Error( `Failed to create todo: ${response.status} ${response.statusText}`, ); } return response.json(); }}
이건 스캐폴드 예제에서는 선택 사항이지만, 플러그인이 커질수록 유용해져요.
OpenAPI 생성 클라이언트
OpenAPI 스키마에서 클라이언트를 생성해 프론트엔드와 백엔드의 동기화를 유지할 수도 있어요. 백엔드 플러그인이 OpenAPI 스펙을 노출한다면(자세한 내용은 백엔드 golden path 참고), API가 변경될 때마다 자동으로 갱신되는 타입 안전 클라이언트를 만들 수 있어요. 이 방식은 시간이 지나면서 프론트엔드와 백엔드가 서로 어긋나 버릴 위험을 줄여줘요.