---
sourceDocument: 호주 애플리케이션 빌드 또는 수정
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/application-development

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 애플리케이션 빌드 또는 수정

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# React를 사용한 UI 개발

# React를 사용한 사용자 인터페이스 개발 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 6분

React 라이브러리로 사용자 인터페이스(UI)를 개발하여 소스 코드로 전체 스택 애플리케이션을 빌드합니다.

## React를 사용한 UI 개발 개요 {#ui-development-react__section_lkj_hrk_1gc}

React는 사용자 지정 사용자 인터페이스를 개발하고 렌더링하는 데 사용하는 UI 구성 요소를 구축하기 위한 업계 표준 웹 프레임워크입니다. React 구성요소는 버튼과 같이 자체적으로 포함되고 재사용 가능한 JavaScript 함수이며 JavaScript(JS/JSX) 및 TypeScript(TS/TSX) 구문을 지원합니다. React에 대한 일반적인 정보는 react.dev 웹 사이트의 [React 문서를](https://react.dev/learn) 참조하십시오.

또는 ServiceNow SDK를 사용하면 ServiceNow IDE 애플리케이션에서 React를 사용하여 코드에서 ServiceNow Fluent UI 페이지를 만들 수 있습니다. ServiceNow Fluent UI 페이지 API는 제공된 엔드포인트에서 페이지를 로드하는 HTML 엔트리포인트(index.html)를 참조합니다. 인스턴스에 애플리케이션을 빌드하고 설치한 후에는 정적 자산이 적절한 테이블에 저장됩니다. 소스 코드의 React 애플리케이션 예제는 [ServiceNow SDK 예제](https://github.com/ServiceNow/sdk-examples) GitHub 리포지토리를 참조하세요. React 사용을 시작하려면 or ServiceNow SDK를 사용하여 ServiceNow IDE 애플리케이션을 만들 때 React 템플릿 중 하나를 선택합니다.  
주:  
[공개 npm 레지스트리](https://www.npmjs.com/package/@servicenow/react-components)의 React Wrapper Component Library Node Package Manager(npm) 패키지와 함께 React 애플리케이션에서 일부 넥스트 경험 구성요소 를 사용할 수 있습니다. 애플리케이션에서 React 래퍼 구성 요소 라이브러리를 사용하려면 사용할 수 빌드 에이전트 있거나 또는 에서 ServiceNow SDK설치 ServiceNow IDE 해야 합니다. 자세한 내용은 [ServiceNow IDE에서 타사 라이브러리 사용](https://servicenow-prod.fluidtopics.net/~aAPzMNU1yOhiJsjPhGEDw "애플리케이션의 타사 라이브러리를 호출하여 기존 오픈 소스 기능을 사용합니다 와 함께 ServiceNow IDE.") 또는 [ServiceNow SDK에서 타사 라이브러리 사용을](https://servicenow-prod.fluidtopics.net/WIYVU9VtXxRuU5UJZmsM3w "애플리케이션의 타사 라이브러리를 호출하여 기존 오픈 소스 기능을 사용합니다 와 함께 ServiceNow SDK.") 참조하십시오.

## UI 개발 프로세스 {#ui-development-react__section_h2k_lfl_1gc}

다음 목록은 ORServiceNow SDK을 사용하여 React 애플리케이션을 개발하는 프로세스에 대한 개략적인 개요입니다.ServiceNow IDE

1. 애플리케이션을 만들고 React 템플릿 중 하나를 선택합니다.이 애플리케이션에는 React 개발에 필요한 파일과 디렉터리가 포함되어 있습니다.

2. src/client 디렉터리에서 HTML 엔트리포인트(index.html), 클라이언트 스크립트 및 스타일시트와 같은 사용자 인터페이스용 클라이언트 자산을 추가합니다. index.html 파일에는 \]`]> 태그가 JavaScript 엔트리포인트로 포함<![CDATA[<script>`되어야 합니다.
3. UI 페이지 API를 사용하여 코드로 UI 페이지 \[sys_ui_page\]를 정의합니다 ServiceNow Fluent . UI 페이지 정의가 포함된 now.ts 파일에서 HTML을 임포트하고 UiPage 객체의 html 속성에서 참조합니다.
4. 나머지 빌드 프로세스를 실행하기 전에 종속성을 번들로 묶고 src/client 디렉터리에 클라이언트 자산을 패키징하는 사전 빌드 롤업 스크립트를 실행하도록 애플리케이션을 빌드합니다. 표준 롤업 빌드 프로세스와 플러그인은 기본 JavaScript 번들러로 사용됩니다.

   정적 자산은 dist/static 디렉터리로 출력됩니다.
5. 애플리케이션을 설치하여 적절한 테이블(UX 자산 \[sys_ux_lib_asset\], 이미지 \[db_image\] 및 UX 테마 자산 \[sys_ux_theme_asset\] 테이블)의 애플리케이션 파일 \[sys_metadata\]에 정적 자산을 추가합니다. 이러한 테이블은 파일을 첨부 파일로 추가할 수 있도록 지원합니다.  
   중요사항:  
   React를 사용한 UI 개발은 인스턴스에서 콘텐츠가 제공되는 방식과 현재 지원되는 콘텐츠 유형 및 테이블로 인해 실험적인 기능입니다.
{#ui-development-react__ol_vrb_yqp_dgc}

## 제한 {#ui-development-react__section_fnc_3rk_1gc}

* UI 페이지 HTML은 소스 코드에서만 수정해야 합니다. 인스턴스에 있는 UI 페이지 \[sys_ui_page\]의 HTML에 대한 변경 내용은 소스 코드로 동기화되지 않으며 의도하지 않은 동작이 발생할 수 있습니다.
* 오디오, 비디오 및 WASM 콘텐츠 유형은 지원되지 않습니다.
* 업로드된 첨부 파일의 최대 크기는 시스템 속성으로 com.glide.attachment.max_size 구성된 크기로 제한됩니다. 자세한 내용은 [Maximum allowed attachment size](https://www.servicenow.com/docs/access?context=sc-max-allowed-attachment-size&version=australia&pubname=australia-platform-security&ft:locale=en-US) 문서를 참조하십시오.
* 출력 경로는 결정적이어야 합니다.
* HTML에서 링크된 컨텐츠 미리 로드는 지원되지 않습니다(`rel="preload"`).
* HTML에서 연결된 상대 스타일시트는 지원되지 않습니다(`rel="stylesheet"`). 대신 스타일시트를 코드로 임포트합니다("`path/to/style-sheet"@import`).
* CSS에서의 상대 임포트는 지원되지 않습니다.
* CSS 모듈은 지원되지 않습니다.
* UI 페이지에서는 해시 라우팅만 지원됩니다.
* 서버 측 렌더링 및 React 서버 구성 요소는 지원되지 않습니다.
{#ui-development-react__ul_pkj_mrl_1gc}  

## React를 사용한 UI 페이지 개발 {#ui-development-react__example_zck_szn_fgc}

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 파일에는 페이지와 기본 애플리케이션 구성 요소를 렌더링하는 데 필요한 가져오기가 포함되며 React 애플리케이션의 엔트리포인트가 정의됩니다.

    //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)에 제공된 끝점에서 페이지를 열 수 있습니다.
그림 1. React로 만든 UI 페이지의 예
**관련 개념**   

* [ServiceNow Fluent](https://servicenow-prod.fluidtopics.net/LkgjsL6Ogxn6hUPsJ73QXQ "도메인별 프로그래밍 언어를 사용하여 소스 코드에서 애플리케이션 메타데이터를 정의합니다.ServiceNow Fluent")  
**관련 참조**   

* [UI 페이지 API - ServiceNow Fluent](https://servicenow-prod.fluidtopics.net/Ghfh70CY9yxkXkOGD_P~iw#fluent-ui-page-api "UI 페이지 API는 양식, 대화 상자, 목록 및 기타 UI 구성요소를 표시하는 사용자 지정 사용자 인터페이스(UI) 페이지[sys_ui_page]를 정의합니다.")