구성요소 개발

구성 요소 코드를 추가하고 로컬 개발 서버를 사용하여 테스트합니다.

시작하기 전에

• 환경 설정
• 프로젝트 설정

이 태스크 정보

카운터 구성 요소 개발에 대한 자습서를 보려면 개발자 사이트를 방문하십시오.

프로시저

1. 프로젝트 디렉터리에서 src/<component-name>/index.js로 이동합니다.
   구성 요소의 기본 코드 파일입니다.
2. 구성요소 코드를 추가합니다.

   이 예제에서는 샘플 Hello World 구성 요소를 보여 줍니다.

   import {createCustomElement} from '@servicenow/ui-core';
   import snabbdom from '@servicenow/ui-renderer-snabbdom';
   import styles from './styles.scss';
   
   const view = (state, {updateState}) => {
   	return (
   		<div>Hello World!</div>
   	);
   };
   
   createCustomElement('hello-world', {
   	renderer: {type: snabbdom},
   	view,
   	styles
   });

   에 대한 가상 에이전트구성요소를 개발하려면 클라이언트 인터페이스와 가상 에이전트 상호 작용할 특정 속성 및 작업을 추가합니다. 필요한 속성은 만드는 구성요소의 유형에 따라 다릅니다. 자세한 내용은 자세한 내용을 참조하십시오 용 구성요소 개발 가상 에이전트 .
3. 옵션: 내부 구성요소를 추가합니다.
   내부 구성 요소는 다른 구성 요소에 포함된 구성 요소입니다. 예를 들어 카드 구성요소에는 별도의 버튼 구성요소가 포함될 수 있습니다. 버튼 구성요소는 카드 구성요소 프로젝트에서 가져오고, 설치하고, 정의해야 하는 내부 구성요소가 됩니다.
   1. 시스템의 명령줄 도구를 사용하여 install 명령을 실행하여 내부 구성 요소 패키지를 설치합니다.

      npm install @servicenow/<now-inner-button> 

   2. index.js 파일의 맨 위에 import 문을 추가합니다.

      import '@servicenow/<now-inner-button>’;

   3. index.js 파일의 내부 구성 요소를 사용합니다.

      <now-inner-button label="Click Me" />

   4. 구성 요소에서 내부 구성 요소를 나열합니다 .[ component-name].innerComponentsnow-ui.json 구성 파일의 배열입니다.

      {
        "components": {
          "now-chart-timeseries": {
            "innerComponents": [
              "now-inner-button"
            ],

4. 개발 서버 명령을 실행하여 테스트 브라우저에서 컴포넌트를 보십시오.

   $ snc ui-component develop [--entry entry --open --port port --host host]

   이러한 인수에 대한 값을 전달합니다.

   이름	설명
   항목	구성 요소 프로젝트의 테스트 모듈 경로입니다. 기본값: example/index.js.
   open	기본 브라우저를 열고 테스트 페이지로 이동합니다. 기본값은 false입니다.
   port	개발 서버가 실행되는 포트입니다. 기본값: 8081.
   host	로컬 개발 서버를 다른 사람이 외부에서 액세스할 수 있도록 하려는 경우 사용할 호스트 주소입니다. 일반적으로 0.0.0.0으로 설정됩니다.

   $ snc ui-component develop --entry example/hello.js --open --port 3000

다음에 수행할 작업

인스턴스에 구성요소 배포.

관련 개념

• 사용자 지정 구성요소 작성기