0903 Full-Stack(React-Spring) 회원가입: 이메일 인증 기능 구현
✅ 1. 백엔드(BE): 이메일 인증을 위한 API 및 비즈니스 로직 설계
- 안전하고 신뢰성 있는 회원가입 절차를 위해, 사용자의 이메일 소유권을 확인하는 인증 시스템의 서버 API를 구축했습니다.
➕ 주요 개념
-
엔티티 및 Repository 설계:
EventUser엔티티 외에, 이메일 인증 과정을 추적하기 위한 별도의 엔티티EmailVerification를 설계했습니다. 이 테이블에는 인증 코드, 만료 시간이 기록됩니다.- 각 엔티티에 대한 기본적인 DB 작업을 위해
JpaRepository를 생성했습니다.
-
비동기 이메일 발송:
- 사용자에게 인증 코드를 담은 이메일을 발송하는 로직을 구현했습니다. 이메일 발송은 외부 SMTP 서버와의 통신이 필요하여 시간이 걸릴 수 있으므로, 비동기(
@Async)로 처리하여 API 응답이 지연되지 않도록 설계했습니다.
- 사용자에게 인증 코드를 담은 이메일을 발송하는 로직을 구현했습니다. 이메일 발송은 외부 SMTP 서버와의 통신이 필요하여 시간이 걸릴 수 있으므로, 비동기(
-
상태를 가진 인증 프로세스:
- 이메일 중복 확인 API:
GET /api/auth/check-email?email=...과 같은 엔드포인트를 통해, 가입 전에 이미 사용 중인 이메일인지 실시간으로 확인할 수 있는 API를 제공했습니다. - 인증 코드 검증 API:
POST /api/auth/code?email=...&code=...요청 시, 서버는 사용자가 입력한 코드와 DB에 저장된 코드가 일치하는지, 그리고 만료 시간이 지나지 않았는지를 검증합니다. 검증 성공 시, 해당 이메일은 "인증 완료" 상태로 변경됩니다.
- 이메일 중복 확인 API:
✅ 2. 프론트엔드(FE): 단계별(Step-based) UI 및 사용자 경험(UX) 설계
- 이메일 입력, 중복 확인, 인증 코드 입력 등 여러 단계로 구성된 회원가입 절차를 사용자 친화적으로 안내하기 위한 UI 및 상태 관리 로직을 구현했습니다.
➕ 주요 개념
-
단계별 UI 구성 (Multi-step Form):
- 회원가입 과정을 여러 단계(Step)로 나누고, 현재 진행 중인 단계를 상태(state)로 관리합니다.
- 사용자의 진행 상황을 시각적으로 알려주기 위해 프로그레스 바(Progress Bar)를 구현하여 피드백을 제공했습니다.
-
실시간 유효성 검증 및 디바운싱:
- 이메일 패턴 검증: 사용자가 이메일을 입력하는 즉시, 정규식을 통해 올바른 이메일 형식인지 클라이언트 단에서 검증하여 즉각적인 피드백을 줍니다.
- 이메일 중복 검증: 사용자가 타이핑을 멈췄을 때만 중복 확인 API를 호출하도록 디바운싱(Debouncing) 기법을 적용했습니다. 이를 위해
lodash라이브러리의debounce함수를 사용하여, 불필요한 API 요청을 최소화하고 서버 부하를 줄였습니다.
-
인증 코드 입력 UI 및 로직:
- 다중
ref바인딩: 인증 코드 4자리를 각각의<input>으로 나누어 구현하고, 사용자가 한 칸을 입력하면 다음 칸으로 자동으로 포커스가 이동하도록ref배열을 사용하여 DOM을 직접 제어했습니다. - 인증 코드 타이머: 인증 코드의 유효 시간을 사용자에게 보여주는 타이머를 구현했습니다. 시간이 만료되면 인증코드를 재발급 받아야 하게끔 설계했습니다.
- 다중
✅ 3. 백엔드와 프론트엔드의 유기적인 연동
- 클라이언트와 서버가 상태를 주고받으며 전체 인증 프로세스를 완성합니다.
- API 연결 정보 관리: 프론트엔드에서 사용할 백엔드 API의 기본 URL, 엔드포인트 등을 별도의 설정 파일(
host-config.js)로 분리하여 관리의 효율성을 높였습니다. - 인증 흐름:
- [FE] 사용자가 이메일 입력 → [FE] 디바운싱 후 중복 확인 API 호출 → [BE] 중복 여부 응답.
- [FE] 사용 가능 이메일 확인 후 자동으로 다음 단계로 넘어감 → [BE] 인증 코드 생성, DB 저장, 이메일 발송.
- [FE] 인증 코드 입력 페이지로 전환, 타이머 시작.
- [FE] 사용자 코드 입력 완료 → [BE] 코드 검증 API 호출.
- [BE] 코드 검증 후 성공/실패 응답 → [FE/BE] 실패 시 코드 재발급.
📌 요약
- 백엔드는 이메일 중복 확인, 인증 코드 발송 및 검증을 위한 상태 기반의 API를 구축했으며, 이메일 발송은 비동기로 처리하여 성능을 확보했습니다.
- 프론트엔드는 단계별 UI와 프로그레스 바를 통해 사용자 경험을 향상시켰고, 디바운싱을 적용하여 불필요한 서버 요청을 최적화했습니다.
- 인증 코드 입력 UI는 다중
ref를 활용한 자동 포커스 이동과 타이머 기능으로 사용 편의성을 높였습니다. - 이러한 과정을 통해 클라이언트와 서버가 긴밀하게 통신하며, 안전하고 사용자 친화적인 이메일 인증 기반 회원가입 플로우를 완성했습니다.
