# TypeScript {/* #typescript */}

Platform API 토큰을 만들고 `platform.proto`를 받으려면 [gRPC 가이드](/docs/ko/api/grpc)부터 시작하세요. 아래 명령은 해당 파일이 있는 디렉터리에서 실행하세요.

브라우저는 네이티브 gRPC HTTP/2 연결을 열 수 없습니다. Platform API는 HTTP/1.1 엔드포인트에서 [gRPC-Web](https://github.com/grpc/grpc-web)도 지원합니다. `protoc`, `protoc-gen-js`, `protoc-gen-grpc-web` 플러그인과 런타임 패키지를 설치하세요:

```bash
npm install grpc-web google-protobuf
npm install --save-dev @types/google-protobuf
mkdir -p src/generated
protoc -I. platform.proto \
  --js_out=import_style=commonjs,binary:src/generated \
  --grpc-web_out=import_style=typescript,mode=grpcweb:src/generated
```

컴파일러 플러그인은 [공식 gRPC-Web 릴리스 및 설치 가이드](https://github.com/grpc/grpc-web#code-generator-plugins)에서 받으세요. `PATH`에 있어야 합니다. 이 명령은 `platform_pb.js`, TypeScript 선언 및 `PlatformServiceClientPb.ts`를 생성합니다.

```typescript
import {PlatformServicePromiseClient} from './generated/PlatformServiceClientPb';
import {GetCatalogRequest, ListCatalogsRequest} from './generated/platform_pb';

// Supply a token at runtime. Do not bundle a long-lived API token in browser code.
export async function listCatalogDetails(token: string) {
  const client = new PlatformServicePromiseClient('https://reconstruct.dev');
  const metadata = {authorization: `Bearer ${token}`};
  const listRequest = new ListCatalogsRequest();
  listRequest.setPageSize(10);

  const page = await client.listCatalogs(listRequest, metadata);
  for (const catalog of page.getCatalogsList()) {
    const detailRequest = new GetCatalogRequest();
    detailRequest.setCatalogId(catalog.getCatalogId());
    const detail = await client.getCatalog(detailRequest, metadata);
    console.log(detail.getCatalogId(), detail.getDescription());
  }
}
```

브라우저 앱에서는 공개 API의 CORS가 앱의 origin을 허용해야 합니다. 영구 API 토큰은 신뢰할 수 있는 서버에 보관하세요. 브라우저 번들은 내장된 비밀을 보호할 수 없습니다.