Keyboard shortcuts

Press ← or → to navigate between chapters

Press ? to show this help

Press Esc to hide this help

React 앱 개발과 배포

Developer Console에서 클라이언트용 애플리케이션을 만들면 인증과 OSDK가 연결된 React 저장소를 생성할 수 있습니다. 플랫폼 내 VS Code 작업 공간에서 편집하고, 릴리스 검사를 거쳐 웹 호스팅으로 배포합니다.

개발 환경 생성

  1. Developer Console 앱 생성에서 Create client-facing application을 선택합니다. 이 선택으로 Developer Console에서 코드 저장소를 만들 수 있습니다.

  1. 왼쪽 Code Repository에서 Create code repository를 선택합니다. 기본 React 템플릿을 만든 뒤 Open in VS Code로 작업 공간을 엽니다.

왼쪽에는 코드 편집기, 오른쪽에는 앱의 실시간 미리보기가 표시됩니다.

편집과 릴리스

코드를 편집하고 확인한 뒤 Git이나 VS Code 인터페이스로 변경을 커밋하고 push합니다. 프로젝트의 다른 개발자는 push한 변경을 사용할 수 있습니다. 저장소 터미널에서 검사를 실행합니다.

npm run lint && npm run test && npm run build

왼쪽 Ontology 탭에는 생성 SDK의 참조와 코드 예제가 있으며 Developer Console로 돌아가는 연결도 있습니다.

배포하려면 먼저 릴리스를 만듭니다. 터미널에서는 배포할 버전을 APP_VERSION에 준비한 뒤 태그를 생성하고 push합니다.

: "${APP_VERSION:?Set APP_VERSION to the release version}" &&
git tag -- "$APP_VERSION" &&
git push origin "refs/tags/$APP_VERSION"

또는 오른쪽 위 Open in Code Repositories를 선택한 뒤 Version control의 Tags and releases에서 기존 릴리스를 보거나 새 릴리스를 만듭니다.

릴리스 검사를 통과하면 Developer Console에서 앱을 볼 수 있습니다.

외부 요청과 CSP

기본 Content Security Policy(CSP)는 외부 요청을 제한합니다. Foundry 밖의 URI에 요청하려면 해당 목적지를 명시적으로 허용해야 합니다. 브라우저 개발자 도구의 Console에서 CSP 오류를 확인합니다.

VS Code 작업 공간에는 임시 CSP를 적용할 수 있습니다. 임시 설정은 다른 사용자에게 적용되지 않으며 작업 공간을 일시 중지하거나 다시 시작하면 만료됩니다.

작업 공간에서 확인한 뒤에는 배포용 Developer Console 앱의 CSP도 설정해야 합니다.

편집 방식

예제로 시작

플랫폼 인스턴스의 Build with AIP에서 작업 목록 앱 예제를 설치할 수 있습니다.

PWA와 Zen mode

작업 공간을 Progressive Web Application(PWA)으로 설치하면 macOS의 Cmd+W로 탭을 닫는 것과 같은 단축키를 사용할 수 있습니다.

View > Activate Zen mode는 플랫폼 인터페이스를 숨기고 편집기를 브라우저 창 전체에 표시합니다. 화면 위쪽 중앙의 ...에 포인터를 올려 종료합니다.

로컬 개발

Code Repositories의 오른쪽 위 Work locally에서 저장소를 복제하고, 안내에 따라 로컬 환경에 FOUNDRY_TOKEN을 export합니다. 토큰은 비공개 환경 설정으로 제공하고 소스 파일에 넣지 않습니다. 실행 절차는 저장소의 readme.md를 따릅니다.

저장소를 Palantir 플랫폼 밖에 두고 Developer Console로 배포할 수도 있습니다. 이 경우 외부 저장소의 웹 호스팅 배포 절차를 따릅니다.

PR 미리보기

PR preview는 Beta 기능이며 플랫폼 인스턴스에 따라 제공되지 않을 수 있습니다. Foundry 코드 저장소와 Developer Console 웹 호스팅을 사용하는 OSDK React 앱에서 사용할 수 있습니다.

PR에 커밋한 코드로 미리보기를 만들어 main 브랜치에 병합하거나 운영에 배포하기 전에 화면과 사용자 흐름을 확인합니다. 미리보기를 보는 사람은 별도의 개발 환경을 만들 필요가 없습니다.

  1. Developer Console에서 앱을 생성하고 웹 호스팅을 구성합니다.

  1. VS Code 작업 공간이나 Code Repositories에서 브랜치를 만들고 변경을 커밋한 뒤 push하여 PR을 만듭니다. 다음 명령의 브랜치 이름과 커밋 메시지는 예입니다. git commit -am은 이미 추적 중인 파일의 변경을 커밋하므로 새 파일은 별도로 스테이징해야 합니다.
git checkout -b myFeatureBranch main

코드를 변경한 뒤 실행합니다.

git commit -am "implement UI change to show PR Preview" &&
git push --set-upstream origin myFeatureBranch
  1. 검사가 끝나면 Code Repositories의 Version control > Pull Requests에서 PR을 선택합니다.
  2. 오른쪽 아래 Preview로 앱 미리보기를 엽니다.

PR의 Commits 탭에서도 각 커밋의 미리보기 링크를 찾을 수 있습니다. PR 미리보기는 PR 생성 시점부터 7일 동안 사용할 수 있으며 이후 만료됩니다.

접근 권한

Developer Console 앱의 Sharing에서 권한을 관리합니다. 앱 코드를 변경하고 PR을 만들거나 미리보기를 공유하려면 Owner 또는 Editor가 필요합니다. 코드나 앱 설정의 편집 권한 없이 미리보기만 제공하려면 Share hosted website에 Viewer로 추가합니다.