[javascript] Svelte에서 데이터 검증과 유효성 검사를 어떻게 할 수 있나요?

24 Nov 2023

javascript

1. 데이터 검증을 위한 yup 라이브러리 사용

yup은 자바스크립트 객체의 유효성을 검사하기 위한 스키마 기반 검증 라이브러리입니다. Svelte 애플리케이션에서 yup을 사용하여 데이터 검증을 수행할 수 있습니다.

먼저, 프로젝트에 yup을 설치합니다.

npm install yup

다음으로, Svelte 컴포넌트에서 yup을 가져옵니다.

import * as yup from 'yup';

이제 yup을 사용하여 유효성 검사 스키마를 정의하고 데이터를 검증할 수 있습니다.

const schema = yup.object().shape({
    name: yup.string().required('이름은 필수 항목입니다.'),
    age: yup.number().required('나이는 필수 항목입니다.'),
    email: yup.string().email('유효한 이메일 주소가 아닙니다.').required('이메일은 필수 항목입니다.'),
});

let formData = {
    name: '',
    age: '',
    email: '',
};

function handleSubmit() {
    schema.validate(formData, { abortEarly: false })
        .then(validData => {
            // 유효한 데이터 처리
        })
        .catch(errors => {
            // 유효성 검사 오류 처리
        });
}

위 예제에서는 name, age, email 필드의 유효성을 검사하고, 유효하지 않은 데이터에 대해 오류 메시지를 표시합니다. handleSubmit 함수에서 schema.validate 메서드를 사용하여 데이터를 검증합니다. 검증이 성공하면 then 블록이 실행되고, 실패하면 catch 블록이 실행됩니다.

2. Svelte의 내장 유효성 검사 기능 사용

Svelte는 자체적으로 내장된 유효성 검사 기능을 제공합니다. 컴포넌트 내부에서 데이터를 검증할 수 있습니다. 아래는 Svelte 컴포넌트에서 내장 유효성 검사를 사용하는 예제입니다.

<script>
    let name = '';
    let age = '';
    let email = '';

    function handleSubmit() {
        if (name.trim() === '') {
            // 이름 필드가 비어있는 경우 처리
        }

        if (age.trim() === '') {
            // 나이 필드가 비어있는 경우 처리
        }

        if (email.trim() === '') {
            // 이메일 필드가 비어있는 경우 처리
        }

        // 유효한 데이터 처리
    }
</script>

<form on:submit|preventDefault={handleSubmit}>
    <label>
        이름:
        <input bind:value={name}>
    </label>

    <label>
        나이:
        <input bind:value={age}>
    </label>

    <label>
        이메일:
        <input bind:value={email}>
    </label>

    <button type="submit">제출</button>
</form>

위 예제에서는 컴포넌트 내에서 각 필드의 값에 대한 유효성을 검사합니다. 각 필드가 비어있는 경우 오류 처리를 할 수 있습니다.

Svelte를 사용하면 위 두 가지 방법 중 어느 방법을 선택하든 데이터 검증과 유효성 검사를 손쉽게 수행할 수 있습니다.