Keyboard shortcuts

Press ← or → to navigate between chapters

Press ? to show this help

Press Esc to hide this help

TypeScript 프런트엔드 시작

@osdk/create-app은 프레임워크를 선택하여 OSDK 프런트엔드 프로젝트를 만드는 CLI입니다. 먼저 Client-facing 앱과 첫 SDK를 만들고 실제 리다이렉트 및 CORS를 설정합니다. 이미 앱이 있으면 기존 앱에 추가를 사용합니다.

환경 준비

TypeScript SDK의 기본 요구 조건은 Node 18 이상입니다. 선택한 최신 프레임워크, Vite 및 라이브러리는 더 높은 Node 버전을 요구할 수 있으므로 함께 확인합니다.

node --version

SDK 다운로드에 사용할 FOUNDRY_TOKEN을 비밀정보 관리 경로에서 현재 셸에 제공합니다. 소스 제어에 커밋하거나 브라우저 코드에 넣지 않습니다.

앱 생성

Developer Console의 Overview 또는 API documentation > Getting started에 앱 설정을 채운 명령이 있습니다. 다음과 같은 실제 값을 외부 변수에 넣은 뒤 실행할 수 있습니다.

변수입력 값
APPLICATION_RIDDeveloper Console 앱 RID
FOUNDRY_URL인스턴스 HTTPS URL
APPLICATION_URL호스팅에 사용할 앱 URL
CLIENT_ID공개 OAuth client ID
OSDK_PACKAGE생성 SDK 패키지 이름
OSDK_REGISTRY_URLSDK 패키지 레지스트리 URL
: "${FOUNDRY_TOKEN:?SDK 다운로드 토큰이 필요합니다}"
: "${APPLICATION_RID:?Developer Console 앱 RID가 필요합니다}"
: "${FOUNDRY_URL:?Foundry URL이 필요합니다}"
: "${APPLICATION_URL:?앱 호스팅 URL이 필요합니다}"
: "${CLIENT_ID:?공개 OAuth client ID가 필요합니다}"
: "${OSDK_PACKAGE:?생성 SDK 패키지 이름이 필요합니다}"
: "${OSDK_REGISTRY_URL:?생성 SDK 레지스트리 URL이 필요합니다}"
export FOUNDRY_TOKEN
npm create @osdk/app@latest -- \
    --application "$APPLICATION_RID" \
    --foundryUrl "$FOUNDRY_URL" \
    --applicationUrl "$APPLICATION_URL" \
    --clientId "$CLIENT_ID" \
    --osdkPackage "$OSDK_PACKAGE" \
    --osdkRegistryUrl "$OSDK_REGISTRY_URL" \
    --corsProxy false

대화형 입력에서 프로젝트 이름과 프레임워크를 선택합니다. 새 프로젝트는 선택한 이름의 디렉터리에 생성됩니다.

: "${PROJECT_DIRECTORY:?생성한 프로젝트 디렉터리가 필요합니다}"
cd "$PROJECT_DIRECTORY" && npm install && npm run dev

디렉터리 이동이나 설치가 실패하면 개발 서버를 시작하지 않습니다.

React 패키지 선택

@osdk/react는 타입이 있는 훅, 공통 캐시, 액션 및 함수 호출을 제공합니다. @osdk/react-components는 그 위에 온톨로지를 이해하는 기본 UI 요소를 제공합니다.

npm install @osdk/react@latest @osdk/react-components@latest

두 패키지가 모두 필요한 경우의 예입니다. 사용하는 범위만 설치하고 @osdk/api, @osdk/client 및 생성 SDK와 호환되는 버전을 사용해야 합니다. 훅은 루트 OsdkProvider 안에서 호출합니다.

레거시 클라이언트가 생성되는 경우

CLI는 앱 SDK의 생성기 버전에 맞춰 클라이언트 코드를 만듭니다. client.ts가 생성 패키지의 FoundryClient와 PublicClientAuth를 가져오면 TypeScript OSDK 1.x 생성기를 사용한 것입니다.

새 2.x 코드는 @osdk/client의 createClient와 @osdk/oauth의 createPublicOauthClient를 사용합니다. Developer Console의 SDK versions에서 2.x로 새 버전을 생성하고 초기화 명령을 다시 실행하거나 기존 앱 의존성과 코드를 2.x 이전 절차에 맞춰 바꿉니다.

서비스 사용자 인증은 서버 TypeScript, Python과 Java는 각각 Python 시작, Java 시작을 따릅니다. Foundry 저장소의 Node 버전은 nvm 설정으로 맞출 수 있습니다.