---
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


---

# 구성요소에 클라이언트 스크립트 정의 및 바인딩

# 구성요소에 클라이언트 스크립트 정의 및 바인딩 {#ariaid-title1}

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

이벤트를 통해 클라이언트 상태를 업데이트할 수 있도록 클라이언트 스크립트를 추가하고 편집합니다.UI 빌더 이벤트 핸들러를 사용하여 이러한 스크립트를 모든 구성요소에 바인딩할 수 있습니다.

## 시작하기 전에

필요한 역할: ui_builder_admin

## 이 태스크 정보

Now Code 편집기를 사용하여 JavaScript 클라이언트 스크립트를 만들 수 있습니다.UI 빌더 그런 다음 클라이언트 스크립트를 [이벤트 핸들러](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-event-handler-ui-builder "이벤트가 발생할 때 수행되는 작업입니다.") 로 추가하여 클라이언트 상태를 업데이트하거나, 페이지의 처리된 이벤트를 내보내거나, [데이터 자원](https://servicenow-prod.fluidtopics.net/n9UkHaM8My2Hv3gyqpYW0w#gloss-data-resource-ui-builder "페이지의 구성요소에 대해 가져올 데이터를 정의하는 동적이고 재사용 가능한 방법입니다.") 작업을 실행할 수 있습니다. 예를 들어 스크립트를 작성하여 날짜 또는 카운터를 증가시키고, 이 스크립트를 버튼 클릭과 같은 구성요소 이벤트에 바인딩할 수 있습니다. Now 코드 편집기에 대한 자세한 내용은 다음 문서를 참조하십시오 [Now 코드 편집기로 코드 편집(고급 기능)](https://servicenow-prod.fluidtopics.net/9YWZT3EBbE92XuBamInwEg "Now 코드 편집기는 CSS(Cascading Style Sheets), HTML(Hypertext Markup Language), JavaScript, XML(Extensible Markup Language) 및 JSON(JavaScript Object Notation)을 지원하는 인터페이스와 같은 서식 있는 텍스트 편집기입니다. Now 코드 편집기를 사용하여 UI 빌더 구성요소에서 넥스트 경험 UI 구성, 데이터 자원 구성, 스타일, 이벤트, 클라이언트 측 및 서버 측 스크립트를 수정합니다.").

이러한 스크립트를 사용하여 다음 작업을 수행할 수 있습니다.

* 사용 가능한 데이터를 가져오고 데이터를 조작한 다음 클라이언트 상태로 저장합니다.
* 데이터 자원 결과에 액세스합니다.
* 데이터 자원 작업을 실행합니다.
* 이벤트를 디스패치합니다.
{#define-client-scripts__ul_vyt_2xg_d4b}

## 프로시저

1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험.  
   자세한 내용은 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") 문서를 참조하십시오.
3. 페이지를 열거나 생성합니다.  
   에서 페이지를 UI 빌더생성하는 방법에 대한 자세한 내용은 [UI 빌더에서 페이지 만들기](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더")를 참조하십시오.
4. **옵션:** 페이지에 구성요소가 없는 경우 페이지에 구성요소를 추가합니다.  
   예를 들어 제목 구성요소를 추가할 수 있습니다. 자세한 내용은 [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다.") 문서를 참조하십시오.
5. 클라이언트 스크립트 옆에 있는 +를 선택합니다.  
6. 스크립트 이름을 지정합니다.  
   설명적인 이름은 스크립트가 수행하는 작업을 파악하는 데 도움이 됩니다. 또한 나중에 이벤트 핸들러에 스크립트를 추가할 때 스크립트를 더 쉽게 찾을 수 있습니다. 다음 예시에서는 간단한 날짜 클라이언트 스크립트를 보여줍니다.
7. 스크립트를 작성하여 작업을 수행합니다.  
   예를 들어 구성요소에 바인딩하는 간단한 날짜 스크립트를 작성할 수 있습니다.
8. **옵션:** 클라이언트 스크립트 함수의 `imports` 매개변수에 표시되는 스크립트 포함 또는 관련 구성요소를 추가합니다.
9. 페이지에서 스크립트를 바인딩할 구성요소를 선택한 다음, 이벤트를 선택합니다.
10. +새 이벤트 처리기 추가를 선택하고, 스크립트에서 만든 스크립트를 선택한 다음, 추가를 선택합니다.  
    다음 예는 날짜 클라이언트 스크립트를 보여줍니다.
11. 저장을 선택합니다.
12. 스크립팅된 구성요소를 미리 보려면 ![미리 보기 버튼을 선택하여 페이지 변형을 엽니다.]().