Laravel 회원가입 폼 수정: 아이디와 닉네임 필드 추가 및 한글화

이제부터 라이브와이어^Livewire를 사용해서 웹사이트를 만드는 방법을 포스팅하겠다고 했는데, 중간에 가끔은 Livewire와 별로 관련이 없는 포스팅을 할 때도 많을 것 같다.

하지만 오늘의 포스트는 이전에 설명했던 Volt 컴포넌트를 살짝 수정할 것이기 때문에 어느 정도는 Livewire와 관련된 글이라고 할 수도 있다.

오늘은 데이터베이스의 users 테이블에 userid와 nickname이라는 컬럼을 추가하고 회원가입 페이지를 수정해 보려고 한다.

이전 포스트

라라벨 touch(): Utime failed: Operation not permitted 에러 해결 방법

라라벨 브리즈 및 디버그바 초기 세팅 중 발생하는 touch(): Utime failed: Operation not permitted 에러 해결 방법입니다. 도커 환경에서 뷰 파일과 캐시 권한 오작동 문제를 해결하기 위해 캐시를 청소하는 법을 공유합니다.

users 테이블에 컬럼 추가 및 register 페이지 수정 · 4th-avenue/laravel13-livewire@1e832e4 · GitHub

설명 없음

github.com

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

users 테이블에 추가할 컬럼들

create_users_table.php

Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('userid', 15)->unique();
    $table->string('nickname', 24)->unique();
    $table->string('email', 50)->unique();
    $table->timestamp('email_verified_at')->nullable();
    $table->string('photo_path', 255)->nullable();
    $table->string('password');
    $table->rememberToken();
    $table->timestamps();
});

create_users_table.php 파일을 이렇게 수정한다.

name 컬럼을 없애고 userid와 nickname과 photo_path 컬럼을 추가했다.

데이터베이스에서 불필요한 자원의 낭비를 막기 위해 각 컬럼에 글자 수 제한도 만들었다.

name 컬럼은 말 그대로 회원의 이름을 써넣는 곳인데, 이름은 중요한 개인 정보다.

큰 회사를 운영할 게 아니라 단순한 작은 커뮤니티 성격의 사이트를 만든다면 굳이 이름까지 물을 필요는 없을 것 같아서 삭제했다.

nickname 컬럼은 단어 그대로 닉네임을 쓰는 곳이고, userid 컬럼은 회원 ID를 쓰는 곳이다.

다음 포스트에서 이메일 주소 대신 ID로 로그인하도록 수정할 생각이다.

photo_path 컬럼은 프로필 이미지 업로드 기능을 구현할 예정이라면 넣어두도록 하자.

여기서는 이 기능을 구현할지 안 할지 아직 잘 모르겠다.

다른 중요한 내용들을 먼저 다루고, 나중에 한참 뒤에 구현할지도 모르겠다.

make app #컨테이너 안으로 들어간다.
php artisan migrate:fresh

VSCode의 터미널에서 이 명령어들을 실행한다.

그러면 이전에 존재하던 데이터베이스 테이블들이 모두 삭제되고 새로운 테이블 구조가 적용된다.

마이그레이션 파일에 컬럼을 추가하고 DB에 테이블 생성하기

라라벨 마이그레이션 파일에 외래 키 제약 조건 및 문자열 컬럼을 추가하고 데이터베이스에 테이블을 생성하는 방법을 알아봅니다. unique, nullable, index 속성의 역할과 migrate:fresh, rollback 명령어 활용법을 알기 쉽게 정리했습니다.

위의 명령어는 이 포스트에서 설명했었다.

개발 중에만 사용할 수 있는 명령어이니 주의하도록 하자.

register.blade.php 파일 수정

register.blade.php 파일은 이전에 라이브와이어란 무엇인지 설명했던 포스트에서 소개했던 Volt 컴포넌트다.

이전에 설명했던 것처럼 백엔드 php 로직과 프론트엔드 HTML 템플릿을 분리하지 않고, 단 하나의 .blade.php 파일 안에 프론트엔드와 백엔드의 모든 코드가 들어가 있다.

어디를 어떻게 수정해야 하는지 설명하기 굉장히 복잡하기 때문에 포스트 상단의 깃허브 링크를 참고하길 바란다.

public string $userid = '';
public string $nickname = '';

이 코드는 Livewire 컴포넌트에서 사용자 등록 기능을 구현하기 위한 필수적인 부분이다.

이 변수들을 통해 사용자 입력을 받고, 이를 바탕으로 사용자 정보를 저장하는 동작을 수행한다.

$validated = $this->validate([
    'userid' => ['required', 'string', 'min:4', 'max:15', 'regex:/^[a-z0-9-]+$/', 'unique:users,userid'],
    'nickname' => ['required', 'string', 'max:24', 'unique:users,nickname'],
    'email' => ['required', 'string', 'lowercase', 'email', 'min:7', 'max:50', 'unique:'.User::class],
    'password' => ['required', 'min:8', 'string', 'confirmed', Rules\Password::defaults()],
]);

Volt 컴포넌트는 유효성 검사 코드도 여기서 정의하게 된다.

userid의 유효성 검사에 들어간 regex:/^[a-z0-9-]+$/는 정규표현식이다.

알파벳은 소문자만, 그리고 숫자와 하이픈(-)까지만 허용한다는 의미다.

unique:users,userid는 지정된 데이터베이스 테이블 내에 같은 값이 존재하지 않아야 한다는 뜻이다.

위의 검증 규칙을 예로 들면, 회원가입 시에 입력받은 값과 똑같은 값이 users 테이블의 userid 컬럼에 이미 존재한다면 안 된다는 의미다.

HTML 코드 부분에서는 name을 입력하는 필드를 삭제하고 userid와 nickname을 입력할 필드를 추가했다.

<input> 태그에 id 혹은 name 속성, 그리고 autocomplete 속성이 없으면, 개발자 도구를 확인했을 때 issues가 뜨기 때문에 빠지지 않게 주의하자.

여기까지 수정하고 회원가입 페이지를 확인해 보면, 이름을 입력하는 필드가 사라지고, 대신 아이디와 닉네임을 입력하는 필드가 추가되어 있다.

그런데 거슬리는 부분이 있다.

영어로 표시된 라벨을 한글화 시켜야겠다.

lang/ko.json 파일 수정

lang/ko.json에 추가할 코드

"Userid": "아이디",
"Nickname": "닉네임",

register.blade.php에서 :value="__(' ')" 속성 안에 입력된 영어가 한글로 뜨도록 lang/ko.json에서 적절한 위치에 이 코드를 추가한다.

User 모델에 Fillable 정의

app/Models/User.php에 추가할 코드

#[Fillable(['userid', 'nickname', 'email', 'password'])]

Fillable 어트리뷰트^Attribute를 수정한다.

기존에 있던 name을 삭제하고 userid와 nickname을 추가했다.

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

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

Fillable에 대한 설명은 이 포스트를 참고하자.

여기까지 수정하고 저장하면 이제 새롭게 바뀐 회원가입 폼으로 사용자 데이터를 저장할 수 있다.

일단 유효성 검사가 제대로 작동하는지 확인하기 위해 일부러 허용되지 않는 데이터들을 넣었다.

유효성 검사는 제대로 작동한다.

그런데 에러 메시지의 단어가 영어인 점이 거슬린다.

여기까지 수정하고 포스트를 끝내겠다.

유효성 검사 에러 메시지의 단어 한글화

lang/ko/validation.php에 추가할 코드

'attributes' => [
    'userid' => '아이디',
    'nickname' => '닉네임',
    'password' => '비밀번호',
],

파일의 맨 아래쪽에 attributes라는 배열을 만든다.

여기에 한글로 바꾸고 싶은 단어를 추가하면 된다.

이제 유효성 검사의 에러 메시지도 완벽하게 한글화 되었다.

하지만 여전히 "은(는)" 같은 조사가 너무 어색해서 걸리는 부분이 있다.

일단은 그냥 넘어가도록 하겠다.

이렇게 회원가입 페이지의 폼을 커스터마이징 하고, 라벨부터 유효성 검사 통과 실패 시 발생하는 안내 텍스트까지 완벽하게 한국어로 패치되었다.

위에서 언급한 조사의 어색함도 해결하고 싶다면 커스텀 메시지(messages 배열)를 디테일하게 만져주면 되는데, 나중에 기회가 된다면 포스팅해보겠다.

다음 포스트는 위에서 잠깐 언급했던 대로 이메일 주소 대신, 아이디로 로그인하는 기능을 구현해 보겠다.

다음 포스트

라라벨 브리즈, 이메일 대신 아이디로 로그인하도록 수정하기

라라벨 브리즈에서 기본 이메일 로그인 방식을 사용자 아이디(userid) 인증으로 변경하는 방법입니다. LoginForm의 유효성 검사 수정, Auth::attempt 컬럼 매핑, 로그인 시도 제한 기준 변경 및 내비게이션 바의 닉네임 연동 오류 해결법을 공유합니다.