React를 사용한 사용자 인터페이스 개발
React 라이브러리로 사용자 인터페이스(UI)를 개발하여 소스 코드로 전체 스택 애플리케이션을 빌드합니다.
React를 사용한 UI 개발 개요
React는 사용자 지정 사용자 인터페이스를 개발하고 렌더링하는 데 사용하는 UI 구성 요소를 구축하기 위한 업계 표준 웹 프레임워크입니다. React 구성요소는 버튼과 같이 자체적으로 포함되고 재사용 가능한 JavaScript 함수이며 JavaScript(JS/JSX) 및 TypeScript(TS/TSX) 구문을 지원합니다. React에 대한 일반적인 정보는 react.dev 웹 사이트의 React 문서를 참조하십시오.
또는 ServiceNow SDK를 사용하면 ServiceNow IDE 범위가 지정된 애플리케이션에서 React를 사용하여 코드에서 UI 페이지를 만들 수 있습니다ServiceNow Fluent. ServiceNow Fluent UI 페이지 API는 제공된 엔드포인트에서 페이지를 로드하는 HTML 엔트리포인트(index.html)를 참조합니다. 인스턴스에 애플리케이션을 빌드하고 설치한 후에는 정적 자산이 적절한 테이블에 저장됩니다. 소스 코드의 React 애플리케이션 예제는 ServiceNow SDK 예제 GitHub 리포지토리를 참조하세요. React 사용을 시작하려면 or ServiceNow SDK를 사용하여 ServiceNow IDE 애플리케이션을 만들 때 React 템플릿 중 하나를 선택합니다.
UI 개발 프로세스
다음 목록은 ORServiceNow SDK을 사용하여 React 애플리케이션을 개발하는 프로세스에 대한 개략적인 개요입니다.ServiceNow IDE
- 애플리케이션을 생성하고 React 템플릿 중 하나를 선택합니다.
이 애플리케이션에는 React 개발에 필요한 파일과 디렉터리가 포함되어 있습니다.
- src/client 디렉터리에서 HTML 엔트리포인트(index.html), 클라이언트 스크립트 및 스타일시트와 같은 사용자 인터페이스용 클라이언트 자산을 추가합니다. index.html 파일에는 ]
]> 태그가 JavaScript 엔트리포인트로 포함<![CDATA[<script>되어야 합니다. - UI 페이지 API를 사용하여 코드로 UI 페이지 [sys_ui_page]를 정의합니다 ServiceNow Fluent . UI 페이지 정의가 포함된 now.ts 파일에서 HTML을 임포트하고 UiPage 객체의 html 속성에서 참조합니다.
- 나머지 빌드 프로세스를 실행하기 전에 종속성을 번들로 묶고 src/client 디렉터리에 클라이언트 자산을 패키징하는 사전 빌드 롤업 스크립트를 실행하도록 애플리케이션을 빌드합니다. 표준 롤업 빌드 프로세스와 플러그인은 기본 JavaScript 번들러로 사용됩니다.
정적 자산은 dist/static 디렉터리로 출력됩니다.
- 애플리케이션을 설치하여 적절한 테이블(UX 자산 [sys_ux_lib_asset], 이미지 [db_image] 및 UX 테마 자산 [sys_ux_theme_asset] 테이블)의 애플리케이션 파일 [sys_metadata]에 정적 자산을 추가합니다. 이러한 테이블은 파일을 첨부 파일로 추가할 수 있도록 지원합니다.중요사항:React를 사용한 UI 개발은 인스턴스에서 콘텐츠가 제공되는 방식과 현재 지원되는 콘텐츠 유형 및 테이블로 인해 실험적인 기능입니다.
제한
- UI 페이지 HTML은 소스 코드에서만 수정해야 합니다. 인스턴스에 있는 UI 페이지 [sys_ui_page]의 HTML에 대한 변경 내용은 소스 코드로 동기화되지 않으며 의도하지 않은 동작이 발생할 수 있습니다.
- 오디오, 비디오 및 WASM 콘텐츠 유형은 지원되지 않습니다.
- 업로드된 첨부 파일의 최대 크기는 시스템 속성으로 com.glide.attachment.max_size 구성된 크기로 제한됩니다. 자세한 내용은 Maximum allowed attachment size [Updated in Security Center 1.3] 문서를 참조하십시오.
- 출력 경로는 결정적이어야 합니다.
- HTML에서 링크된 컨텐츠 미리 로드는 지원되지 않습니다(
rel="preload"). - HTML에서 연결된 상대 스타일시트는 지원되지 않습니다(
rel="stylesheet"). 대신 스타일시트를 코드로 임포트합니다("path/to/style-sheet"@import). - CSS에서의 상대 임포트는 지원되지 않습니다.
- CSS 모듈은 지원되지 않습니다.
- UI 페이지에서는 해시 라우팅만 지원됩니다.
- 서버 측 렌더링 및 React 서버 구성 요소는 지원되지 않습니다.
React를 사용한 UI 페이지 개발
src/fluent 디렉터리의 .now.ts 파일에서 UI 페이지는 코드로 정의됩니다ServiceNow Fluent. 페이지의 HTML은 src/client 디렉터리의 index.html 파일에서 가져옵니다.
//incident-manager.now.ts
import '@servicenow/sdk/global'
import { UiPage } from '@servicenow/sdk/core'
import incidentPage from '../../client/index.html'
UiPage({
$id: Now.ID['incident-manager-page'],
endpoint: '<scope>_incident_manager.do',
description: 'Incident Response Manager UI Page',
category: 'general',
html: incidentPage,
direct: true,
})index.html 파일에서 ]]> 태그는<![CDATA[<script>src/client 디렉터리의 main.jsx 파일을 참조합니다.
//index.html
<html>
<head>
<title>Incident Response Manager</title>
<!-- Initialize globals and Include ServiceNow's required scripts -->
<sdk:now-ux-globals></sdk:now-ux-globals>
<!-- Include your React entry point -->
<script src="./main.jsx" type="module"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>//main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app'
const rootElement = document.getElementById('root')
if (rootElement) {
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
}애플리케이션을 빌드하고 설치한 후에는 인시던트 생성 및 관리를 위한 인터페이스를 표시하는 UiPage 객체(https://<instance>/<scope>_incident_manager.do)에 제공된 엔드포인트에서 페이지를 열 수 있습니다.