라라벨 Livewire로 새 글 작성 시 유효성 검사 기능 구현

이번에는 이전 포스트에서 만들었던 새 글 저장 기능에 유효성 검사 기능까지 추가해 보겠다.

새 글 저장 기능을 구현할 때 유효성 검사 기능도 당연히 넣었어야 했는데, 이전 포스트에 쓸 내용이 너무 많았었기 때문에 따로 빼보았다.

이전 포스트

라라벨 Livewire를 이용해서 새 글 저장 기능 구현

라라벨 Livewire 컴포넌트에서 mount 메서드와 pluck을 활용해 자식 카테고리를 효율적으로 조회하는 방법과 Eloquent 모델 릴레이션 설정부터 wire:submit, wire:model을 활용한 새 글 저장 기능 구현 과정을 상세히 설명합니다.

글 유효성 검사 기능 구현 · 4th-avenue/laravel13-livewire@50c6aad · GitHub

설명 없음

github.com

전체적인 코드 수정은 이 깃허브 링크를 통해서 확인할 수 있다.

Livewire를 이용해서 유효성 검사 기능 구현

Post 모델에 Fillable 정의 후 새 글 저장 기능 구현

라라벨 13의 최신 어트리뷰트 방식을 사용해 Post 모델에 Fillable 대량 할당 속성을 정의하고, User 모델과 일대다(HasMany) 관계를 설정합니다. PostController에서 유효성 검사를 거쳐 새 글을 안전하게 저장하는 로직을 설명합니다.

이전에 Livewire를 사용하지 않고 컨트롤러를 사용했을 때의 유효성 검사의 코드와는 약간 차이가 있다.

resources/views/pages/articles/⚡new.blade.php

new class extends Component
{
    #[Validate('required|exists:categories,id')]
    public $category_id;
    #[Validate('required|string|max:60')]
    public $title;
    #[Validate('required|string|max:21844')]
    public $body;

    public $childCategories = [];

    public function mount()
    {
        $this->childCategories = Category::whereNotNull('parent_id')
            ->pluck('name', 'id')
            ->toArray();
    }

    public function save()
    {
        $validated = $this->validate();

        auth()->user()->articles()->create($validated);

        $this->reset();
    }
};

#[Validate]는 Livewire 클래스의 프로퍼티 위에 선언하여 입력값의 유효성 검사 규칙^{Validation Rule}을 지정하는 어트리뷰트다.

이 어트리뷰트를 붙여두면 별도의 유효성 검사 로직을 길게 작성하지 않아도, 컨트롤러나 컴포넌트 내부에서 $this->validate()를 호출했을 때 선언된 규칙을 알아서 자동으로 검사한다.

예를 들어, #[Validate('required|exists:categories,id')]는 해당 필드가 필수이며, 입력된 값이 'categories' 테이블의 'id' 컬럼에 존재하는 유효한 값인지 검사하는 것이다.

save 메서드의 코드에도 변화가 생겼다.

$this->validate(); 이 코드는 Livewire 컴포넌트에서 선언된 유효성 검사 규칙에 따라 현재 상태의 데이터를 검증하는 메서드다.

이 메서드는 컴포넌트의 속성에 정의된 유효성 검사 규칙(#[Validate(' ... ')])을 기반으로 폼 데이터를 검증한다.

save 메서드가 호출될 때, $this->validate();는 articles.new 컴포넌트의 속성($category_id, $title, $body)에 대해 미리 정의된 유효성 검사를 수행한다.

유효성 검사를 통과하지 못하면 에러 메시지가 표시되며, 폼 데이터는 저장되지 않는다.

이 코드는 데이터를 데이터베이스에 저장하기 전에, 사용자가 입력한 값이 유효한지 확인하기 위해 사용된다.

이 검사는 서버 측에서 이루어지기 때문에 클라이언트 측에서의 조작을 방지할 수 있다.

그리고 동작 방식도 $this->validate()가 유효성 검사를 마친 뒤 #[Validate] 규칙에 정의된 필드들만 깔끔하게 필터링해서 반환한 배열($validated)을 DB에 그대로 저장하도록 수정했다.

이전의 $this->only(['category_id', 'title', 'body'])처럼 저장할 필드명을 일일이 적어줄 필요가 없기 때문에 코드가 훨씬 간결해졌다.

그리고 #[Validate] 규칙에 포함되지 않은 불필요하거나 조작된 인젝션 데이터가 DB로 흘러들어가는 것도 차단해서 보안성의 측면에서도 좋아졌다.

또 나중에 저장할 필드가 추가되더라도, 프로퍼티 위에 #[Validate] 어트리뷰트만 추가하면 save 메서드의 코드는 단 한 줄도 수정할 필요가 없어서 유지보수성도 좋아졌다.

일부러 60자가 넘는 제목을 입력해 보았다.

유효성 검사가 제대로 작동하는 것을 확인했다. 👍🏻

다음 포스트

라라벨 Blade 컴포넌트 생성 (select와 textarea 컴포넌트)

라라벨 Blade 컴포넌트를 활용해 select와 textarea 입력 필드를 재사용 가능한 구조로 만들었습니다. 다크 모드 스타일을 일괄 적용하고, UI의 완성도와 코드 유지보수성을 크게 높이는 방법을 소개합니다.