본문으로 건너뛰기

데이터 처리

Editor 위젯은 실시간 업데이트, 유효성 검사, 사용자 주도 저장 작업을 포함한 동적 데이터 처리를 지원합니다. 개발자는 데이터 일관성과 사용자 인터랙션에 대한 애플리케이션 요구사항에 맞게 Editor 위젯의 동작을 커스터마이즈할 수 있습니다.

변경 시 자동 데이터 저장​

Editor 위젯은 변경이 발생할 때마다 자동 데이터 저장을 트리거할 수 있습니다. 이는 주기적인 사용자 인터랙션이 보장되지 않거나 수동 저장 작업을 최소화하는 것이 우선순위인 경우에 유용합니다.

<script>
   import { Editor } from "@svar-ui/svelte-editor";
</script>

<Editor {items} autoSave={true} />

autoSave 속성을 true로 설정하면 모든 변경 사항이 자동으로 저장되어 사용자의 명시적인 저장 작업 필요성이 줄어듭니다.

자동 저장 비활성화 및 수동 사용자 작업 요구​

Editor 위젯은 자동 저장을 비활성화하여 사용자가 변경 사항을 명시적으로 저장하도록 요구하는 기능을 지원합니다. 이는 저장 전에 사용자 확인이나 검토가 필요한 워크플로우에 적합합니다.

<script>
   import { Editor } from "@svar-ui/svelte-editor";
</script>

<Editor {items} autoSave={false} />

autoSave를 false로 설정하면 자동 저장이 방지되어 사용자가 데이터를 저장할 시점을 직접 제어할 수 있습니다.

Editor 데이터 변경 감지​

Editor 위젯은 데이터 변경에 대한 상세 정보를 제공합니다. 이는 수정 사항 추적, 커스텀 로직 구현 또는 저장되지 않은 변경 사항 표시에 유용합니다.

interface OnChangeResult {
   key: string;
   value: any;
   update: Record<string, any>;
}
<script>
   <script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      { comp: "text", key: "name", label: "Name" },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onchange(ev: OnChangeResult) {
      console.log(`field ${ev.key} was changed to ${ev.value}`);
      console.log("all not saved changes", ev.update);
   }
</script>

<Editor {items} {onchange} />

onchange event handler는 필드 키, 업데이트된 값, 저장되지 않은 모든 변경 사항의 맵을 제공합니다. 이를 통해 수정 사항을 세밀하게 추적할 수 있습니다.

사용자 주도 저장 작업 감지​

Editor 위젯은 사용자가 데이터 저장을 명시적으로 요청할 때 이를 감지할 수 있습니다. 이는 폼 제출이나 변경 사항 확인과 같이 사용자 작업에 의존하는 워크플로우 구현에 유용합니다.

interface OnSaveResult {
   changes: string[];
   values: Record<string, any>;
}
<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      { comp: "text", key: "name", label: "Name" },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onsave(ev: OnSaveResult) {
      console.log("changed values", ev.changes);
      console.log("latest data snapshot", ev.values);
   }

</script>

<Editor {items} {onsave} />

onsave event handler는 변경된 필드와 현재 데이터 상태에 대한 정보를 제공합니다.

데이터 유효성 검사 상태 감지​

Editor 위젯은 유효성 검사 결과를 모니터링하여 데이터가 유효한지 또는 오류가 있는지에 대한 피드백을 제공합니다. 이는 저장 전에 데이터 무결성을 보장하는 데 유용합니다.

interface OnValidationResult {
   errors: {
      [key: string]: {
        errorType: "validation" | "required";
      };
   };
   values: Record<string, any>;
}
<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name",
        validation: v => (v && v.length > 5),
        validationMessage: "Name must be longer than 5 characters",
        required: true
      },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onvalidation(ev: OnValidationResult) {
      if (Object.keys(ev.errors).length > 0) {
        for (const key in ev.errors) {
           if (ev.errors[key].errorType === "required") {
              console.log(`"${key}" is required but missing`);
           } else if (ev.errors[key].errorType === "validation") {
              console.log(`"${key}" failed a custom validation rule`);
           }
        }
      } else {
        console.log("validation is ok");
      }

      console.log("latest data snapshot", ev.values);
   }
</script>

<Editor {items} {onvalidation} />

onvalidation event handler는 현재 데이터 상태와 유효성 검사 오류를 제공합니다. 유효성 검사에 실패한 필드를 식별하고 데이터가 사전 정의된 요구사항을 충족하는지 확인하는 데 도움이 됩니다.

필드를 필수로 지정​

Editor 위젯은 특정 필드를 필수로 표시하는 기능을 제공합니다. 이를 통해 사용자가 해당 필드를 비워 둘 수 없도록 하여 필수 데이터 입력을 강제합니다.

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        required: true,
      },
   ];
</script>

<Editor {items} />

required 속성을 true로 설정하면 해당 필드가 필수가 됩니다. 사용자는 계속 진행하기 전에 값을 반드시 입력해야 합니다.

필드에 유효성 검사 규칙 정의​

Editor 위젯은 필드에 대한 커스텀 유효성 검사 규칙 정의를 지원합니다. 이를 통해 형식이나 값 범위와 같은 특정 기준을 사용자 입력이 준수하도록 보장합니다.

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   const items = [
      { comp: "text", key: "name", label: "Name",
        validation: val => {
          const regEx = /^[a-zA-Z]+$/;
           return val && regEx.test(val);
        },
        validationMessage: "wrong name format"
      },
   ];
</script>

<Editor {items} />

validation 속성은 필드 값을 검사하는 함수를 정의하며, validationMessage는 유효성 검사 실패 시 표시할 오류 메시지를 지정합니다. 이를 통해 입력 요구사항을 정밀하게 제어할 수 있습니다.

관련 샘플: