Skip to content
Laravel

예지 (Precognition)

소개

Laravel Precognition을 사용하면 미래의 HTTP 요청 결과를 예측할 수 있습니다. Precognition의 주요 사용 사례 중 하나는 애플리케이션의 백엔드 유효성 검사 규칙을 복제할 필요 없이 프런트엔드 JavaScript 애플리케이션에 "실시간" 유효성 검사를 제공하는 기능입니다. Precognition은 Laravel의 Inertia 기반 스타터 키트와 특히 잘 어울립니다.

Laravel이 "예지 요청"을 받으면 모든 라우트 미들웨어를 실행하고 폼 요청 유효성 검사를 포함하여 라우트의 컨트롤러 종속성을 해결하지만 실제로 라우트의 컨트롤러 메서드를 실행하지는 않습니다.

실시간 유효성 검사

Vue 사용

Laravel Precognition을 사용하면 프런트엔드 Vue 애플리케이션에서 유효성 검사 규칙을 복제할 필요 없이 사용자에게 실시간 유효성 검사 경험을 제공할 수 있습니다. 작동 방식을 설명하기 위해 애플리케이션 내에서 새 사용자를 생성하는 폼을 만들어 보겠습니다.

먼저 라우트에 대해 Precognition을 활성화하려면 HandlePrecognitiveRequests 미들웨어를 라우트 정의에 추가해야 합니다. 또한 라우트의 유효성 검사 규칙을 담을 폼 요청을 생성해야 합니다.

use App\Http\Requests\StoreUserRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
 
Route::post('/users', function (StoreUserRequest $request) {
    // ...
})->middleware([HandlePrecognitiveRequests::class]);

다음으로, NPM을 통해 Vue용 Laravel Precognition 프론트엔드 헬퍼를 설치해야 합니다:

npm install laravel-precognition-vue

Laravel Precognition 패키지가 설치되면, 이제 Precognition의 useForm 함수를 사용하여 폼 객체를 생성할 수 있습니다. 이 함수는 HTTP 메서드 (post), 대상 URL (/users), 초기 폼 데이터를 제공합니다.

그런 다음, 실시간 유효성 검사를 활성화하려면 각 입력 요소의 change 이벤트에서 폼의 validate 메서드를 호출하고, 입력 요소의 이름을 제공합니다:

<script setup>
import { useForm } from 'laravel-precognition-vue';
 
const form = useForm('post', '/users', {
    name: '',
    email: '',
});
 
const submit = () => form.submit();
</script>
 
<template>
    <form @submit.prevent="submit">
        <label for="name">Name</label>
        <input
            id="name"
            v-model="form.name"
            @change="form.validate('name')"
        />
        <div v-if="form.invalid('name')">
            {{ form.errors.name }}
        </div>
 
        <label for="email">Email</label>
        <input
            id="email"
            type="email"
            v-model="form.email"
            @change="form.validate('email')"
        />
        <div v-if="form.invalid('email')">
            {{ form.errors.email }}
        </div>
 
        <button :disabled="form.processing">
            Create User
        </button>
    </form>
</template>

이제 사용자가 폼을 채우면 Precognition은 라우트의 폼 요청에 있는 유효성 검사 규칙을 기반으로 실시간 유효성 검사 결과를 제공합니다. 폼 입력 값이 변경되면 "precognitive" 유효성 검사 요청이 디바운스되어 Laravel 애플리케이션으로 전송됩니다. 폼의 setValidationTimeout 함수를 호출하여 디바운스 타임아웃을 구성할 수 있습니다.

form.setValidationTimeout(3000);

유효성 검사 요청이 진행 중일 때 폼의 validating 속성은 true가 됩니다.

<div v-if="form.validating">
    Validating...
</div>

유효성 검사 요청 또는 폼 제출 중에 반환된 모든 유효성 검사 오류는 폼의 errors 객체를 자동으로 채웁니다.

<div v-if="form.invalid('email')">
    {{ form.errors.email }}
</div>

폼에 오류가 있는지 여부는 폼의 hasErrors 속성을 사용하여 확인할 수 있습니다.

<div v-if="form.hasErrors">
    <!-- ... -->
</div>

또한 입력의 이름을 각각 폼의 valid 및 invalid 함수에 전달하여 입력이 유효성 검사를 통과했는지 또는 실패했는지 확인할 수도 있습니다.

<span v-if="form.valid('email')">
    ✅
</span>
 
<span v-else-if="form.invalid('email')">
    ❌
</span>
exclamation

폼 입력 값은 변경되어 유효성 검사 응답을 받은 후에만 유효 또는 유효하지 않은 것으로 표시됩니다.

Precognition을 사용하여 폼 입력 값의 하위 집합을 검증하는 경우, 수동으로 오류를 지우는 것이 유용할 수 있습니다. 폼의 forgetError 함수를 사용하여 이를 수행할 수 있습니다.

<input
    id="avatar"
    type="file"
    @change="(e) => {
        form.avatar = e.target.files[0]
 
        form.forgetError('avatar')
    }"
>

지금까지 살펴본 것처럼, 사용자가 상호 작용할 때 input의 change 이벤트에 후킹하여 개별 입력을 검증할 수 있습니다. 그러나 사용자가 아직 상호 작용하지 않은 입력을 검증해야 할 수도 있습니다. 이는 "마법사"를 만들 때 흔히 발생하며, 다음 단계로 이동하기 전에 사용자가 상호 작용했는지 여부에 관계없이 보이는 모든 입력을 검증해야 합니다.

Precognition으로 이를 수행하려면 검증하려는 필드를 touch 메서드에 이름을 전달하여 "터치됨"으로 표시해야 합니다. 그런 다음 onSuccess 또는 onValidationError 콜백과 함께 validate 메서드를 호출하십시오.

<button
    type="button"
    @click="form.touch(['name', 'email', 'phone']).validate({
        onSuccess: (response) => nextStep(),
        onValidationError: (response) => /* ... */,
    })"
>Next Step</button>

물론, 폼 제출에 대한 응답에 반응하여 코드를 실행할 수도 있습니다. 폼의 submit 함수는 Axios 요청 프로미스를 반환합니다. 이는 응답 페이로드에 액세스하고, 성공적인 제출 시 폼 입력을 재설정하거나, 실패한 요청을 처리하는 편리한 방법을 제공합니다.

const submit = () => form.submit()
    .then(response => {
        form.reset();
 
        alert('User created.');
    })
    .catch(error => {
        alert('An error occurred.');
    });

폼 제출 요청이 진행 중인지 여부는 폼의 processing 속성을 검사하여 확인할 수 있습니다.

<button :disabled="form.processing">
    Submit
</button>

Vue 및 Inertia 사용

lightbulb

Vue 및 Inertia를 사용하여 Laravel 애플리케이션을 개발할 때 바로 시작하고 싶다면, 저희의 스타터 키트 중 하나를 사용하는 것을 고려해 보세요. Laravel의 스타터 키트는 새로운 Laravel 애플리케이션을 위한 백엔드 및 프론트엔드 인증 스캐폴딩을 제공합니다.

Vue와 Inertia에서 Precognition을 사용하기 전에, Vue에서 Precognition 사용하기에 대한 일반적인 문서를 반드시 검토하십시오. Vue와 Inertia를 함께 사용하는 경우, NPM을 통해 Inertia와 호환되는 Precognition 라이브러리를 설치해야 합니다:

npm install laravel-precognition-vue-inertia

설치가 완료되면, Precognition의 useForm 함수는 위에서 설명한 유효성 검사 기능으로 강화된 Inertia 폼 헬퍼를 반환합니다.

폼 헬퍼의 submit 메서드는 HTTP 메서드 또는 URL을 지정할 필요가 없도록 간소화되었습니다. 대신 Inertia의 방문 옵션을 첫 번째이자 유일한 인수로 전달할 수 있습니다. 또한, submit 메서드는 위 Vue 예제에서 볼 수 있듯이 Promise를 반환하지 않습니다. 대신 submit 메서드에 제공되는 방문 옵션에서 Inertia가 지원하는 이벤트 콜백을 제공할 수 있습니다:

<script setup>
import { useForm } from 'laravel-precognition-vue-inertia';
 
const form = useForm('post', '/users', {
    name: '',
    email: '',
});
 
const submit = () => form.submit({
    preserveScroll: true,
    onSuccess: () => form.reset(),
});
</script>

React 사용하기

Laravel Precognition을 사용하면 프런트엔드 React 애플리케이션에서 유효성 검사 규칙을 복제할 필요 없이 사용자에게 실시간 유효성 검사 경험을 제공할 수 있습니다. 작동 방식을 설명하기 위해 애플리케이션 내에서 새 사용자를 생성하는 양식을 만들어 보겠습니다.

먼저 경로에 대해 Precognition을 활성화하려면 경로 정의에 HandlePrecognitiveRequests 미들웨어를 추가해야 합니다. 또한 경로의 유효성 검사 규칙을 포함할 폼 요청을 생성해야 합니다.

use App\Http\Requests\StoreUserRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
 
Route::post('/users', function (StoreUserRequest $request) {
    // ...
})->middleware([HandlePrecognitiveRequests::class]);

다음으로 NPM을 통해 React용 Laravel Precognition 프런트엔드 도우미를 설치해야 합니다.

npm install laravel-precognition-react

Laravel Precognition 패키지가 설치되면 Precognition의 useForm 함수를 사용하여 폼 객체를 생성하고 HTTP 메서드(post), 대상 URL(/users) 및 초기 폼 데이터를 제공할 수 있습니다.

실시간 유효성 검사를 활성화하려면 각 입력의 change 및 blur 이벤트를 수신해야 합니다. change 이벤트 핸들러에서 입력의 이름과 새 값을 전달하여 setData 함수로 폼 데이터를 설정해야 합니다. 그런 다음 blur 이벤트 핸들러에서 입력의 이름을 제공하여 폼의 validate 메서드를 호출합니다.

import { useForm } from 'laravel-precognition-react';
 
export default function Form() {
    const form = useForm('post', '/users', {
        name: '',
        email: '',
    });
 
    const submit = (e) => {
        e.preventDefault();
 
        form.submit();
    };
 
    return (
        <form onSubmit={submit}>
            <label htmlFor="name">Name</label>
            <input
                id="name"
                value={form.data.name}
                onChange={(e) => form.setData('name', e.target.value)}
                onBlur={() => form.validate('name')}
            />
            {form.invalid('name') && <div>{form.errors.name}</div>}
 
            <label htmlFor="email">Email</label>
            <input
                id="email"
                value={form.data.email}
                onChange={(e) => form.setData('email', e.target.value)}
                onBlur={() => form.validate('email')}
            />
            {form.invalid('email') && <div>{form.errors.email}</div>}
 
            <button disabled={form.processing}>
                Create User
            </button>
        </form>
    );
};

이제 사용자가 폼을 채우면 Precognition은 라우트의 폼 요청에 있는 유효성 검사 규칙에 따라 실시간 유효성 검사 출력을 제공합니다. 폼의 입력 값이 변경되면 디바운스된 "예지적" 유효성 검사 요청이 Laravel 애플리케이션으로 전송됩니다. 폼의 setValidationTimeout 함수를 호출하여 디바운스 타임아웃을 구성할 수 있습니다.

form.setValidationTimeout(3000);

유효성 검사 요청이 진행 중일 때 폼의 validating 속성은 true가 됩니다.

{form.validating && <div>Validating...</div>}

유효성 검사 요청 또는 폼 제출 중에 반환된 유효성 검사 오류는 폼의 errors 객체를 자동으로 채웁니다.

{form.invalid('email') && <div>{form.errors.email}</div>}

폼의 hasErrors 속성을 사용하여 폼에 오류가 있는지 확인할 수 있습니다.

{form.hasErrors && <div><!-- ... --></div>}

또한 폼의 valid 및 invalid 함수에 입력 이름을 전달하여 입력값이 유효성 검사를 통과했는지 또는 실패했는지 확인할 수 있습니다.

{form.valid('email') && <span>✅</span>}
 
{form.invalid('email') && <span>❌</span>}
exclamation

폼 입력은 변경되고 유효성 검사 응답을 받은 후에만 유효하거나 유효하지 않은 것으로 표시됩니다.

Precognition을 사용하여 폼 입력의 하위 집합을 검증하는 경우, 오류를 수동으로 지우는 것이 유용할 수 있습니다. 폼의 forgetError 함수를 사용하여 이를 수행할 수 있습니다.

<input
    id="avatar"
    type="file"
    onChange={(e) => {
        form.setData('avatar', e.target.value);
 
        form.forgetError('avatar');
    }}
>

이미 살펴본 것처럼 입력의 blur 이벤트를 연결하여 사용자가 상호 작용할 때 개별 입력을 검증할 수 있습니다. 그러나 사용자가 아직 상호 작용하지 않은 입력을 검증해야 할 수도 있습니다. 이는 사용자가 상호 작용했는지 여부에 관계없이 다음 단계로 이동하기 전에 표시되는 모든 입력을 검증하려는 "마법사"를 구축할 때 일반적입니다.

Precognition을 사용하여 이를 수행하려면, 유효성을 검사할 필드 이름을 touch 메서드에 전달하여 "터치됨"으로 표시해야 합니다. 그런 다음, onSuccess 또는 onValidationError 콜백과 함께 validate 메서드를 호출합니다.

<button
    type="button"
    onClick={() => form.touch(['name', 'email', 'phone']).validate({
        onSuccess: (response) => nextStep(),
        onValidationError: (response) => /* ... */,
    })}
>다음 단계</button>

물론 폼 제출에 대한 응답에 반응하여 코드를 실행할 수도 있습니다. 폼의 submit 함수는 Axios 요청 프로미스를 반환합니다. 이를 통해 응답 페이로드에 접근하고, 성공적인 폼 제출 시 폼 입력을 재설정하거나 실패한 요청을 처리하는 편리한 방법을 제공합니다.

const submit = (e) => {
    e.preventDefault();
 
    form.submit()
        .then(response => {
            form.reset();
 
            alert('User created.');
        })
        .catch(error => {
            alert('An error occurred.');
        });
};

폼 제출 요청이 진행 중인지 여부는 폼의 processing 속성을 검사하여 확인할 수 있습니다.

<button disabled={form.processing}>
    Submit
</button>

React와 Inertia 사용하기

lightbulb

React와 Inertia를 사용하여 Laravel 애플리케이션을 개발할 때 더 빠르게 시작하고 싶다면, 저희의 스타터 키트 중 하나를 사용하는 것을 고려해 보세요. Laravel의 스타터 키트는 새로운 Laravel 애플리케이션을 위한 백엔드 및 프런트엔드 인증 스캐폴딩을 제공합니다.

React와 Inertia에서 Precognition을 사용하기 전에 React와 함께 Precognition 사용하기에 대한 일반 문서를 반드시 검토하십시오. React와 Inertia를 함께 사용할 때는 NPM을 통해 Inertia 호환 Precognition 라이브러리를 설치해야 합니다.

npm install laravel-precognition-react-inertia

설치가 완료되면, Precognition의 useForm 함수는 위에서 설명한 유효성 검사 기능이 추가된 Inertia 폼 도우미를 반환합니다.

폼 도우미의 submit 메서드는 HTTP 메서드나 URL을 지정할 필요 없이 간소화되었습니다. 대신, Inertia의 방문 옵션을 첫 번째이자 유일한 인수로 전달할 수 있습니다. 또한 submit 메서드는 위 React 예제에서 보이는 것처럼 Promise를 반환하지 않습니다. 대신, submit 메서드에 전달되는 방문 옵션에서 Inertia가 지원하는 이벤트 콜백을 제공할 수 있습니다.

import { useForm } from 'laravel-precognition-react-inertia';
 
const form = useForm('post', '/users', {
    name: '',
    email: '',
});
 
const submit = (e) => {
    e.preventDefault();
 
    form.submit({
        preserveScroll: true,
        onSuccess: () => form.reset(),
    });
};

Alpine과 Blade 사용하기

Laravel Precognition을 사용하면 프론트엔드 Alpine 애플리케이션에서 유효성 검사 규칙을 복제할 필요 없이 사용자에게 실시간 유효성 검사 경험을 제공할 수 있습니다. 작동 방식을 설명하기 위해 애플리케이션 내에서 새로운 사용자를 생성하기 위한 양식을 만들어 보겠습니다.

먼저, 경로에 대해 Precognition을 활성화하려면 경로 정의에 HandlePrecognitiveRequests 미들웨어를 추가해야 합니다. 또한 경로의 유효성 검사 규칙을 포함할 폼 요청을 생성해야 합니다.

use App\Http\Requests\CreateUserRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
 
Route::post('/users', function (CreateUserRequest $request) {
    // ...
})->middleware([HandlePrecognitiveRequests::class]);

다음으로, NPM을 통해 Alpine용 Laravel Precognition 프론트엔드 도우미를 설치해야 합니다.

npm install laravel-precognition-alpine

그런 다음 resources/js/app.js 파일에서 Alpine으로 Precognition 플러그인을 등록합니다.

import Alpine from 'alpinejs';
import Precognition from 'laravel-precognition-alpine';
 
window.Alpine = Alpine;
 
Alpine.plugin(Precognition);
Alpine.start();

Laravel Precognition 패키지를 설치하고 등록하면 이제 Precognition의 $form "마법"을 사용하여 HTTP 메서드(post), 대상 URL(/users), 초기 양식 데이터를 제공하여 양식 객체를 만들 수 있습니다.

실시간 유효성 검사를 활성화하려면 양식의 데이터를 해당 입력에 바인딩한 다음 각 입력의 change 이벤트를 수신해야 합니다. change 이벤트 핸들러에서 입력 이름을 제공하여 양식의 validate 메서드를 호출해야 합니다.

<form x-data="{
    form: $form('post', '/register', {
        name: '',
        email: '',
    }),
}">
    @csrf
    <label for="name">이름</label>
    <input
        id="name"
        name="name"
        x-model="form.name"
        @change="form.validate('name')"
    />
    <template x-if="form.invalid('name')">
        <div x-text="form.errors.name"></div>
    </template>
 
    <label for="email">이메일</label>
    <input
        id="email"
        name="email"
        x-model="form.email"
        @change="form.validate('email')"
    />
    <template x-if="form.invalid('email')">
        <div x-text="form.errors.email"></div>
    </template>
 
    <button :disabled="form.processing">
        사용자 생성
    </button>
</form>

이제 사용자가 폼을 채우면 Precognition은 라우트의 폼 요청에 있는 유효성 검사 규칙에 따라 실시간 유효성 검사 결과를 제공합니다. 폼 입력이 변경되면 디바운스된 "예지" 유효성 검사 요청이 Laravel 애플리케이션으로 전송됩니다. 폼의 setValidationTimeout 함수를 호출하여 디바운스 타임아웃을 구성할 수 있습니다.

form.setValidationTimeout(3000);

유효성 검사 요청이 진행 중인 경우 폼의 validating 속성은 true가 됩니다.

<template x-if="form.validating">
    <div>유효성 검사 중...</div>
</template>

유효성 검사 요청 또는 폼 제출 중에 반환된 유효성 검사 오류는 폼의 errors 객체를 자동으로 채웁니다.

<template x-if="form.invalid('email')">
    <div x-text="form.errors.email"></div>
</template>

폼에 오류가 있는지 여부는 폼의 hasErrors 속성을 사용하여 확인할 수 있습니다.

<template x-if="form.hasErrors">
    <div><!-- ... --></div>
</template>

또한 입력 이름을 폼의 valid 및 invalid 함수에 전달하여 입력이 유효성 검사를 통과했는지 또는 실패했는지 확인할 수 있습니다.

<template x-if="form.valid('email')">
    <span>✅</span>
</template>
 
<template x-if="form.invalid('email')">
    <span>❌</span>
</template>
exclamation

폼 입력은 변경되고 유효성 검증 응답을 받은 후에만 유효하거나 유효하지 않은 것으로 표시됩니다.

지금까지 보았듯이, 사용자가 입력과 상호 작용할 때 입력의 change 이벤트를 후킹하고 개별 입력을 검증할 수 있습니다. 하지만 사용자가 아직 상호 작용하지 않은 입력을 검증해야 할 수도 있습니다. 이는 사용자가 상호 작용했는지 여부에 관계없이 다음 단계로 이동하기 전에 모든 보이는 입력을 검증하려는 "마법사"를 구축할 때 일반적입니다.

Precognition으로 이를 수행하려면 검증하려는 필드를 touch 메서드에 이름을 전달하여 "터치됨"으로 표시해야 합니다. 그런 다음, onSuccess 또는 onValidationError 콜백과 함께 validate 메서드를 호출합니다.

<button
    type="button"
    @change="form.touch(['name', 'email', 'phone']).validate({
        onSuccess: (response) => nextStep(),
        onValidationError: (response) => /* ... */,
    })"
>다음 단계</button>

폼 제출 요청이 진행 중인지 여부는 폼의 processing 속성을 검사하여 확인할 수 있습니다.

<button :disabled="form.processing">
    제출
</button>

이전 폼 데이터 다시 채우기

위에서 논의한 사용자 생성 예제에서 Precognition을 사용하여 라이브 유효성 검사를 수행하고 있지만, 폼을 제출하기 위해 전통적인 서버 측 폼 제출을 수행하고 있습니다. 따라서 폼은 서버 측 폼 제출에서 반환된 "이전" 입력 및 유효성 검증 오류로 채워져야 합니다.

<form x-data="{
    form: $form('post', '/register', {
        name: '{{ old('name') }}',
        email: '{{ old('email') }}',
    }).setErrors({{ Js::from($errors->messages()) }}),
}">

또는, XHR을 통해 폼을 제출하고 싶다면 폼의 submit 함수를 사용할 수 있으며, 이 함수는 Axios 요청 프로미스를 반환합니다:

<form
    x-data="{
        form: $form('post', '/register', {
            name: '',
            email: '',
        }),
        submit() {
            this.form.submit()
                .then(response => {
                    form.reset();
 
                    alert('User created.')
                })
                .catch(error => {
                    alert('An error occurred.');
                });
        },
    }"
    @submit.prevent="submit"
>

Axios 구성하기

Precognition 유효성 검사 라이브러리는 애플리케이션의 백엔드로 요청을 보내기 위해 Axios HTTP 클라이언트를 사용합니다. 편의를 위해 애플리케이션에서 필요한 경우 Axios 인스턴스를 사용자 정의할 수 있습니다. 예를 들어 laravel-precognition-vue 라이브러리를 사용할 때 애플리케이션의 resources/js/app.js 파일에서 각 발신 요청에 추가 요청 헤더를 추가할 수 있습니다:

import { client } from 'laravel-precognition-vue';
 
client.axios().defaults.headers.common['Authorization'] = authToken;

또는, 이미 애플리케이션에 구성된 Axios 인스턴스가 있다면 Precognition에 해당 인스턴스를 대신 사용하도록 지시할 수 있습니다:

import Axios from 'axios';
import { client } from 'laravel-precognition-vue';
 
window.axios = Axios.create()
window.axios.defaults.headers.common['Authorization'] = authToken;
 
client.use(window.axios)
exclamation

Inertia 프레임워크의 Precognition 라이브러리는 설정된 Axios 인스턴스를 유효성 검사 요청에만 사용합니다. 폼 제출은 항상 Inertia를 통해 전송됩니다.

유효성 검사 규칙 사용자 정의

요청의 isPrecognitive 메서드를 사용하여 예측 유효성 검사 요청 중에 실행되는 유효성 검사 규칙을 사용자 정의할 수 있습니다.

예를 들어 사용자 생성 폼에서 최종 폼 제출 시에만 비밀번호가 "안전한지" 검증하고 싶을 수 있습니다. 예측 유효성 검사 요청의 경우 비밀번호가 필수 항목이고 최소 8자 이상인지 확인합니다. isPrecognitive 메서드를 사용하면 폼 요청에서 정의된 규칙을 사용자 정의할 수 있습니다.

<?php
 
namespace App\Http\Requests;
 
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rules\Password;
 
class StoreUserRequest extends FormRequest
{
    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    protected function rules()
    {
        return [
            'password' => [
                'required',
                $this->isPrecognitive()
                    ? Password::min(8)
                    : Password::min(8)->uncompromised(),
            ],
            // ...
        ];
    }
}

파일 업로드 처리

기본적으로 Laravel Precognition은 예측 유효성 검사 요청 중에 파일을 업로드하거나 유효성을 검사하지 않습니다. 이렇게 하면 큰 파일이 불필요하게 여러 번 업로드되지 않습니다.

이러한 동작으로 인해 애플리케이션이 해당 폼 요청의 유효성 검사 규칙을 사용자 정의하여 필드가 전체 폼 제출에만 필수 항목임을 지정해야 합니다.

/**
 * 요청에 적용되는 유효성 검사 규칙을 가져옵니다.
 *
 * @return array
 */
protected function rules()
{
    return [
        'avatar' => [
            ...$this->isPrecognitive() ? [] : ['required'],
            'image',
            'mimes:jpg,png',
            'dimensions:ratio=3/2',
        ],
        // ...
    ];
}

모든 유효성 검사 요청에 파일을 포함하고 싶다면 클라이언트 측 폼 인스턴스에서 validateFiles 함수를 호출할 수 있습니다:

form.validateFiles();

부작용 관리

HandlePrecognitiveRequests 미들웨어를 라우트에 추가할 때, 예지적 요청 동안 건너뛰어야 하는 다른 미들웨어에 부작용이 있는지 고려해야 합니다.

예를 들어, 각 사용자가 애플리케이션과 상호 작용한 총 횟수를 증가시키는 미들웨어가 있을 수 있지만, 예지적 요청은 상호 작용으로 계산하고 싶지 않을 수 있습니다. 이를 달성하기 위해 상호 작용 횟수를 증가시키기 전에 요청의 isPrecognitive 메서드를 확인할 수 있습니다:

<?php
 
namespace App\Http\Middleware;
 
use App\Facades\Interaction;
use Closure;
use Illuminate\Http\Request;
 
class InteractionMiddleware
{
    /**
     * 들어오는 요청을 처리합니다.
     */
    public function handle(Request $request, Closure $next): mixed
    {
        if (! $request->isPrecognitive()) {
            Interaction::incrementFor($request->user());
        }
 
        return $next($request);
    }
}

테스팅

테스트에서 예지적 요청을 만들고 싶다면, Laravel의 TestCase는 Precognition 요청 헤더를 추가하는 withPrecognition 도우미를 포함합니다.

또한, 예지적 요청이 성공적이었는지 (예: 유효성 검사 오류가 반환되지 않았는지) 단언하고 싶다면 응답에서 assertSuccessfulPrecognition 메서드를 사용할 수 있습니다:

it('precognition을 사용하여 등록 폼을 검증합니다', function () {
    $response = $this->withPrecognition()
        ->post('/register', [
            'name' => 'Taylor Otwell',
        ]);
 
    $response->assertSuccessfulPrecognition();
 
    expect(User::count())->toBe(0);
});
public function test_it_validates_registration_form_with_precognition()
{
    $response = $this->withPrecognition()
        ->post('/register', [
            'name' => 'Taylor Otwell',
        ]);
 
    $response->assertSuccessfulPrecognition();
    $this->assertSame(0, User::count());
}