1. 기능의 동작 원리와 순서
아이디 찾기 기능:
- 이름과 전화번호 입력: 사용자가 자신의 이름과 전화번호를 입력합니다.
- 서버 요청: '이메일 찾기' 버튼 클릭 시, findEmailHandler 함수가 호출되며, 서버에 이름과 전화번호로 이메일을 찾는 요청을 보냅니다.
- 이메일 찾기 처리: 서버는 findEmailByNameAndPhone 함수를 이용해 데이터베이스에서 해당 이름과 전화번호를 가진 사용자의 이메일을 조회합니다.
- 이메일 반환: 사용자의 이메일이 데이터베이스에서 발견되면, 이메일 주소를 사용자에게 반환합니다. 만약 발견되지 않으면, 일치하는 사용자가 없다는 메시지를 반환합니다.
비밀번호 초기화 기능:
- 이메일 입력: 사용자가 비밀번호를 잊었을 때, 이메일 주소를 입력합니다.
- 인증 이메일 요청: '비밀번호 재설정 이메일 전송' 버튼 클릭 시, sendPasswordResetEmailHandler 함수가 호출되며, 서버에 이메일을 통한 인증 요청을 보냅니다.
- 인증 코드 생성 및 이메일 발송: 서버는 createVerificationCode 함수를 사용하여 인증 코드를 생성하고, 이를 데이터베이스에 저장한 뒤, 사용자의 이메일 주소로 인증 코드를 포함한 이메일을 발송합니다.
- 인증 코드 입력 및 검증: 사용자는 이메일을 통해 받은 인증 코드를 입력하고, '인증 코드 확인' 버튼을 클릭합니다. verifyEmailCodeHandler 함수가 호출되며, 서버에 코드의 유효성을 검증하는 요청을 보냅니다.
- 비밀번호 변경 요청: 인증이 성공하면, 사용자는 새 비밀번호를 입력합니다. '비밀번호 변경' 버튼 클릭 시, verifyAndResetPasswordHandler 함수가 호출되며, 서버에 새 비밀번호로 변경하는 요청을 보냅니다.
- 비밀번호 변경 처리: 서버는 updateUserPassword 함수를 사용해 새로 입력된 비밀번호를 해시하여 데이터베이스에 업데이트합니다.
- 비밀번호 변경 완료: 비밀번호 변경이 완료되면, 사용자에게 변경 완료 메시지를 반환합니다.
2. 코드 파일의 구성
프론트엔드
-
FindAccountPage.tsx:
아이디 찾기 및 비밀번호 초기화 페이지의 레이아웃과 UI를 구성하는 리액트 컴포넌트입니다.
이메일 찾기, 비밀번호 초기화 폼 및 관련 이벤트 처리를 담당합니다. -
FindEmailForm.tsx:
아이디(이메일) 찾기에 사용되는 폼을 구현한 컴포넌트입니다.
사용자 입력을 관리하고, 이름과 전화번호를 통해 이메일을 찾는 기능을 수행합니다. -
ResetPasswordForm.tsx:
비밀번호 초기화를 위한 폼을 구현한 컴포넌트입니다.
사용자의 이메일 입력 및 비밀번호 재설정 과정을 관리합니다. -
useFindEmail.ts 및 useResetPassword.ts:
아이디 찾기 및 비밀번호 초기화와 관련된 로직을 담당하는 커스텀 훅입니다.
각각 이메일 찾기 및 비밀번호 재설정의 상태 관리와 처리 로직을 포함합니다. -
PasswordResetModal.tsx:
비밀번호 초기화 과정 중 사용되는 모달(팝업 창) 컴포넌트입니다.
사용자에게 추가적인 안내 및 입력 폼을 제공합니다. -
useModal.ts:
모달 창의 상태 관리 및 로직을 처리하는 커스텀 훅입니다.
모달 창의 열기, 닫기 및 상태 관리 기능을 제공합니다. -
authService.ts:
서버로의 인증 관련 API 요청을 처리하는 서비스 레이어입니다.
아이디 찾기, 비밀번호 초기화 등의 요청을 서버에 전달합니다.
백엔드
-
authRoutes.js:
인증 관련 엔드포인트를 정의하는 라우팅 파일입니다.
아이디 찾기, 비밀번호 초기화 등의 경로에 대응하는 컨트롤러 함수를 연결합니다. -
authController.js:
아이디 찾기, 비밀번호 초기화 등 인증 관련 요청을 처리하는 컨트롤러 함수들을 포함합니다.
각 엔드포인트에 대한 요청 처리 로직을 담당합니다. -
authService.js:
인증 관련 비즈니스 로직을 담당하는 서비스 레이어 파일입니다.
이메일 찾기, 비밀번호 초기화, 사용자 정보 조회 등의 기능을 제공합니다.
3-1. 아이디 찾기, 비밀번호 초기화 기능의 특징 - 프론트엔드
커스텀 훅 사용 (useFindEmail.ts 및 useResetPassword.ts):
아이디 찾기와 비밀번호 초기화 기능의 상태 관리 및 비즈니스 로직을 별도의 커스텀 훅으로 분리하여 관리합니다. 이는 기능별 코드의 모듈화 및 재사용성을 향상시키며, 컴포넌트의 가독성을 높입니다.
모달 관리 (useModal.ts):
비밀번호 초기화와 관련된 모달의 상태 및 동작 로직을 useModal 커스텀 훅을 통해 중앙에서 관리합니다. 이를 통해 모달 관련 코드의 중복을 최소화하고 일관된 상태 관리를 가능하게 합니다.
API 요청 처리 (authService.ts):
백엔드 서버와의 통신을 담당하는 로직을 authService.ts에 모듈화하여 관리합니다. 이는 네트워크 요청 관련 코드의 중복을 줄이고, 관리 및 유지보수를 용이하게 합니다.
에러 핸들링:
네트워크 요청 중 발생하는 예외 사항을 적절히 처리하고 사용자에게 의미 있는 피드백을 제공합니다. 이는 사용자 경험의 질을 향상시키는 중요한 부분입니다.
3-2. 아이디 찾기, 비밀번호 초기화 기능의 특징 - 백엔드
트랜잭션 사용 (authService.js):
비밀번호 초기화 기능은 이메일 인증 기능을 포함하는 복수의 과정을 필요로 합니다. 한 단계의 작업이 실행되고, 다음 작업이 실행되기 직전에 초기화 기능이 취소되었을 경우 이전에 진행된 작업도 취소되어야 합니다. 특히 이메일 인증의 경우 인증 코드를 보낸 뒤에 비밀번호 초기화 작업 자체를 취소할 경우, DB에 저장된 인증 데이터를 삭제하지 않으면 이후 다시 이메일 인증을 시도했을 때 오류가 발생할 소지가 존재합니다. 따라서 트랜잭션이 적용된 deleteVerificationInfo 함수를 통해 사용자와 관련된 여러 테이블의 데이터를 일관성 있게 관리할 수 있습니다.
비밀번호 해싱 (authService.js):
사용자의 비밀번호는 bcrypt 라이브러리를 사용해 해싱 처리함으로써 보안을 강화합니다. 해싱은 사용자 비밀번호를 안전하게 저장하는 데 필수적인 조치입니다.
이메일 중복 검사 및 인증 로직 (authController.js 및 authService.js):
사용자 이메일의 중복 검사와 인증 코드 관련 처리를 포함하여, 사용자의 이메일 관련 기능을 철저하게 관리합니다. 이메일 인증은 회원가입 및 비밀번호 재설정 과정에서 중요한 역할을 합니다.
에러 처리 및 안정성 확보:
각종 요청 처리 중 발생할 수 있는 예외 상황에 대해 적절한 에러 처리 및 응답 메시지를 구현하여, 시스템의 안정성과 사용자 경험을 향상시킵니다.
4. 취약점과 개선 사항
프론트엔드:
- 에러 핸들링 개선:
useFindEmail.ts와 useResetPassword.ts에서 네트워크 요청 실패나 서버 오류에 대한 예외 처리가 필요합니다. 사용자에게 명확하고 이해하기 쉬운 에러 메시지를 제공하고, 예외 상황에 대한 적절한 처리를 통해 사용자 경험을 향상시켜야 합니다.
- 입력 데이터 검증 강화:
현재 구현된 입력 폼의 데이터 검증 로직이 기본적인 수준에 머물러 있습니다. 사용자 입력에 대한 보다 엄격한 검증, 특히 비밀번호의 복잡성 검사 등을 통해 보안을 강화할 필요가 있습니다.
백엔드:
- SQL 인젝션 및 보안 취약점 대비:
authService.js와 authController.js에서 SQL 인젝션 공격 및 기타 보안 취약점에 대한 보호 조치가 필요합니다. 예를 들어, 입력 데이터를 적절하게 처리하고 SQL 쿼리를 파라미터화하는 등의 방법으로 보안을 강화해야 합니다.
- 상세한 에러 처리 및 로깅 시스템 구축:
현재는 일반적인 에러 유형에 대해서만 처리가 되어 있습니다. 보다 세밀한 에러 처리 로직과 로깅 시스템을 구축하여 시스템의 안정성을 높이고 예상치 못한 오류를 효과적으로 추적할 필요가 있습니다.
- 서버 측 입력 데이터 검증 강화:
서버 측에서도 입력 데이터의 유효성을 검증하는 로직을 강화해야 합니다. 클라이언트 측 검증만으로는 불충분하며, 서버 측에서도 부적절한 데이터의 처리를 방지하는 것이 중요합니다.
