라라벨 브리즈, 프로필 수정 페이지에 nickname 항목 추가

이전 포스트에서는 데이터베이스의 users 테이블에 아이디와 닉네임 필드를 추가하고, 이메일 대신 아이디로 로그인하도록 수정했다.

그런데 이 작업으로 인해서 프로필 수정 페이지에 문제가 생겼다.

프로필 수정 페이지로 들어가면, 이렇게 에러가 발생하는 것이다.

이전에 users 테이블에서 name 컬럼을 삭제했는데, 프로필 수정 페이지에서는 계속 users 테이블의 name 컬럼을 찾고 있기 때문이다.

오늘의 포스트는 이 문제를 해결할 것이다.

이전 포스트

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

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

프로필 수정 페이지에 nickname 항목 추가 · 4th-avenue/laravel13-livewire@6f7eeae · GitHub

설명 없음

github.com

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

update-profile-information-form.blade.php 파일 수정

어디를 어떻게 수정해야 하는지 설명하기 복잡하니 위의 깃허브 링크를 참고하길 바란다.

public string $nickname = '';

프로필 수정 페이지로 이동할 때, DB에서 유저 정보를 가져와 채워 넣는 타깃이 name에서 nickname으로 변경되었다.

'nickname' => [
    'required',
    'string',
    'max:24',
    Rule::unique(User::class)->ignore($user->id)
],
'email' => [
    'required',
    'string',
    'lowercase',
    'email',
    'min:7',
    'max:50',
    Rule::unique(User::class)->ignore($user->id)
],

email에 대한 유효성 검사의 min과 max 설정을 회원가입 때 사용했던 register.blade.php의 유효성 검사와 똑같이 수정했고, nickname에 대한 유효성 검사를 추가했다.

기존의 이름(name)과 달리, 닉네임은 중복되지 않아야 하기 때문에 Rule::unique가 추가되었다.

회원가입 때 nickname의 유효성 검사에 있던 검증 규칙은 unique:users,nickname이었다.

unique:users,nickname은 지정된 데이터베이스 테이블 내에 같은 값이 존재하지 않아야 한다는 뜻으로, 회원가입 시에는 정상적으로 작동한다.

하지만 회원 정보를 수정할 때에도 이 검증 규칙을 사용하면, email 주소만 수정하려고 할 때 nickname의 값이 중복이 된다고 에러 메시지가 뜨면서 nickname도 반드시 수정하지 않으면 email도 수정을 할 수 없게 된다.

반면에 Rule::unique(User::class)->ignore($user->id)는 User 모델의 특정 필드가 데이터베이스에 고유해야 하지만, 현재 사용자의 ID를 무시하고 유효성을 검사한다는 것을 의미한다.

$this->dispatch('profile-updated', name: $user->nickname);

이 코드는 Livewire 컴포넌트 내에서 다른 컴포넌트 또는 리스너에게 이벤트를 전달하는 역할을 한다.

• $this->dispatch: 현재 Livewire 컴포넌트에서 이벤트를 발행하는 메서드다.
• 'profile-updated': 발행되는 이벤트의 이름이다. 이 이름을 통해 다른 컴포넌트에서 이벤트를 감지하고 처리할 수 있다.
• name: $user->nickname: 이벤트와 함께 전달되는 데이터다. name이라는 키를 가지고, 값으로 $user->nickname (즉, 사용자의 닉네임)을 전달한다.
  여기서 name이라는 키를 nickname으로 바꾸고 싶다면, livewire/layout/navigation.blade.php 에서도 코드를 수정해야 한다.
  그래서 그냥 수정하지 않고 name을 사용하기로 했다.

간단하게 설명하자면, 사용자가 프로필 정보를 수정하고 저장 버튼을 클릭하면, 이 코드가 실행되어 profile-updated 이벤트가 발생하고, 수정된 사용자의 nickname이 함께 전달된다.

그러면 다른 컴포넌트(예: 상단 네비게이션 바)에서 이 이벤트를 수신하고, 전달된 사용자의 nickname을 이용하여 화면에 표시되는 사용자 nickname을 업데이트하는 것이다.

HTML 코드 부분에서는 기존의 name을 수정하는 필드를 nickname을 수정하는 필드로 변경했다.

이전에 register.blade.php를 수정했을 때와 거의 같다.

새로 추가된 spellcheck="false" 속성에 대해서는 이미지와 함께 설명하겠다.

nickname 입력 필드에 맞춤법 검사 기능 끄기

닉네임 입력 필드에 spellcheck="false" 속성을 넣지 않을 경우에는 이렇게 입력한 값에 빨간 밑줄이 표시된다.

맞춤법 검사 기능이 켜져 있어서 그런 건데, 보기에도 좋지 않고, 사용자가 '내가 입력한 닉네임이 중복된 닉네임인가?' 하는 오해를 불러일으킬 수도 있다.

이 spellcheck="false" 속성을 update-profile-information-form.blade.php 뿐만 아니라 회원가입 페이지(register.blade.php)의 닉네임 입력 필드에도 넣어야 한다.

브라우저 자체 내장 맞춤법 검사기는 영문이나 일반 문장을 쓰는 곳에서는 유용하지만, 사용자가 의도한 고유의 닉네임 같은 영역에서는 흐름을 방해하는 요소가 될 수도 있다.

그럴 때는 이렇게 spellcheck="false" 속성을 사용하도록 하자.

다음 포스트

라라벨, 설정한 횟수만큼 연속 로그인 실패 시 설정한 시간만큼 로그인 제한하기

라라벨 브리즈 환경에서 로그인 연속 실패 시 계정 접속을 제한하는 방법입니다. LoginForm의 RateLimiter 속성을 변경하여 시도 횟수와 제한 시간을 커스텀하고, lang 패키지의 auth.php를 수정해 한국어 에러 메시지로 수정하는 팁을 공유합니다.