0808 Toy Project 회원가입/로그인 프론트엔드 고도화
✅ 회원가입 폼 실시간 유효성 검사 (Real-time Validation)
- 사용자 경험(UX)을 향상시키기 위해, 폼 필드 입력 시 실시간으로 유효성을 검사하는 기능을 추가했습니다. 사용자는 폼을 제출하기 전에 입력 값의 유효 여부를 즉시 피드백 받을 수 있습니다.
➕ 주요 검증 로직
- 사용자명: 길이(15자 이내) 및 형식(영문/숫자)을 실시간으로 검사합니다.
- 이메일: 정규식을 통해 올바른 이메일 형식을 검사합니다.
- 비밀번호: 강도 검사를 수행합니다 (대/소문자, 숫자, 특수문자 포함 및 최소 길이).
- 비밀번호 확인: 비밀번호 필드와 값이 일치하는지 실시간으로 비교합니다.
- 피드백: 각 필드의 검증 결과(성공, 실패, 중복 등)에 따라 적절한 안내 메시지와 아이콘을 동적으로 표시합니다.
➕ 디바운스(Debounce)를 이용한 성능 최적화
- 개념:
input 이벤트와 같이 짧은 시간 안에 연속으로 발생하는 이벤트를 그룹화하여, 마지막 이벤트가 발생한 후 일정 시간이 지나면 콜백 함수를 한 번만 실행하는 기법입니다.
- 적용: 사용자명, 이메일 등의 입력 필드에
debounce를 적용하여, 사용자가 타이핑을 멈췄을 때만 API 요청(중복 확인)이나 복잡한 유효성 검사를 수행하도록 했습니다. 이를 통해 불필요한 서버 요청과 연산을 줄여 프론트엔드 성능을 최적화했습니다.
✅ 사용자명/이메일 중복 확인 (서버 연동)
- 회원가입 시 고유해야 하는 사용자명과 이메일의 중복 여부를 서버 API와 연동하여 실시간으로 확인하는 기능을 구현했습니다.
- 백엔드 API 추가 (
AuthController):
/api/auth/check-username, /api/auth/check-email 엔드포인트를 추가하여 특정 사용자명/이메일의 사용 가능 여부를 boolean 값으로 반환하도록 구현했습니다.
- 서비스 로직 추가 (
UserService):
- Repository를 조회하여 사용자명/이메일의 존재 여부를 확인하는 메서드를 추가했습니다.
- 프론트엔드 연동 (
signup.js):
- 사용자가 입력을 멈추면(디바운스 처리 후),
api.js 모듈을 통해 해당 엔드포인트로 GET 요청을 보냅니다.
- 서버로부터 받은 응답(true/false)에 따라 중복 여부를 UI에 즉시 반영합니다.
application.yml 설정 변경:
ddl-auto 값을 create에서 update로 변경했습니다. 이를 통해 애플리케이션 재시작 시 기존 데이터가 삭제되지 않고 유지되어, 중복 확인 기능을 정상적으로 테스트하고 운영할 수 있습니다.
✅ 인증 상태 관리 모듈화 (auth.js)
- 애플리케이션 전반의 인증 관련 로직을 중앙에서 관리하기 위해
auth.js 모듈을 추가했습니다. 이를 통해 코드의 중복을 제거하고 유지보수성을 높였습니다.
➕ auth.js의 역할
- 상태 관리: 로그인 여부, 사용자 정보, JWT 토큰을 관리합니다.
- 로컬 스토리지 추상화:
login(token, userInfo): 로그인 성공 시 토큰과 사용자 정보를 로컬 스토리지에 안전하게 저장합니다.logout(): 로컬 스토리지에서 인증 정보를 삭제하고 로그인 페이지로 리다이렉트합니다.isAuthenticated(), getUserInfo(): 현재 인증 상태 및 사용자 정보를 반환합니다.
- UI 업데이트:
updateHeaderUI() 메서드를 통해 로그인 상태에 따라 헤더의 UI(e.g., "로그인" 버튼을 "로그아웃" 버튼으로 변경)를 동적으로 변경합니다.
- 상수 관리: 로컬 스토리지에 사용될 키(
'accessToken', 'userInfo')를 상수로 정의하여 오타로 인한 오류를 방지하고 재사용성을 높였습니다.
✅ 로그인/홈 페이지 동적 UI 구현 및 리팩토링
- 인증 상태에 따라 페이지의 내용이 동적으로 변경되도록 구현했습니다.
login.js 리팩토링:
- 로그인 폼 제출 시
api.js를 통해 서버에 요청합니다.
- 로그인 성공 시, 기존의 복잡한 로직 대신
authService.login(token, userInfo)을 호출하여 인증 정보 저장과 헤더 UI 업데이트를 위임합니다. 이로써 login.js는 로그인 처리 자체에만 집중할 수 있게 되었습니다.
home.js 동적 렌더링:
- 페이지 로드 시
authService.isAuthenticated()를 호출하여 로그인 상태를 확인합니다.
- 로그인 상태라면 환영 메시지와 주요 컨텐츠를 보여주고, 비로그인 상태라면 로그인/회원가입을 유도하는 UI를 렌더링합니다.
app.js를 통한 전역 로그아웃 처리:
- 모든 페이지의 헤더에 있는 로그아웃 버튼의 클릭 이벤트를
app.js에서 이벤트 위임(Event Delegation) 방식으로 한 번에 처리합니다.
data-action="logout" 속성을 가진 요소가 클릭되면 authService.logout()을 호출하여 로그아웃 로직을 수행합니다.
📌 요약
- 회원가입 폼에 실시간 유효성 검사와 서버 연동 중복 확인 기능을 추가하여 사용자 경험을 크게 개선했습니다.
- 디바운스(Debounce) 기법을 적용하여 불필요한 이벤트 및 API 호출을 줄여 프론트엔드 성능을 최적화했습니다.
- 인증 관련 로직을
auth.js 모듈로 중앙화하여 코드의 중복을 제거하고 유지보수성과 가독성을 높였습니다.
- 인증 상태에 따라 UI를 동적으로 변경하고, 전역 이벤트 처리를 통해 공통 기능(로그아웃)을 효율적으로 관리하도록 리팩토링했습니다.
