1. 기능의 동작 원리와 순서

이메일 중복 검사:

• 사용자가 이메일을 입력하고, 이메일 중복 검사 버튼을 클릭합니다.
• checkEmailRequest 함수가 호출되어 서버에 이메일 중복 여부를 요청합니다.
• 서버는 이메일이 이미 사용 중인지 확인하고 결과를 반환합니다.
• 중복된 이메일이 없다면 사용자는 다음 단계로 진행할 수 있습니다.

이메일 인증 절차:

• 사용자가 '인증 코드 전송' 버튼을 클릭하면 sendVerificationRequest 함수가 호출되어 서버에 인증 코드를 요청합니다.
• 서버는 사용자 이메일로 인증 코드를 보냅니다.
• 사용자는 이메일로 받은 인증 코드를 입력하고, verifyEmailCode 함수를 통해 서버에 코드의 유효성을 검증합니다.

회원가입 폼 제출:

• 사용자가 모든 필드를 작성하고 회원가입 버튼을 클릭합니다.
• validateRegistrationForm 함수를 통해 폼 데이터의 유효성을 검사합니다.
• 모든 검사가 통과하면, fetchRegistration 함수가 호출되어 서버에 회원가입 요청을 보냅니다.
• 서버는 요청을 처리하고 회원가입 결과를 반환합니다.

회원가입 취소 처리:

• 사용자의 이메일 인증은 인증 데이터를 우선 DB에 저장하고, 사용자 이메일로 발송된 인증 코드와 DB에 저장된 인증 코드를 대조함으로써 동작합니다.
• 만약, 사용자가 이메일 인증을 마쳤는데 회원가입을 도중에 중단할 경우. 이미 DB에 저장된 인증 데이터는 삭제되어야 합니다.
• 사용자가 회원가입을 중단하려고 할 때, cancelSignUp 함수가 호출되어 서버에 회원가입 취소 요청을 보냅니다.
• 서버는 DB의 인증 데이터를 삭제함으로써 회원가입 절차를 취소하고, 그 결과를 반환합니다.

2. 코드 파일의 구성

프론트엔드

• RegistrationPage.tsx:

  회원가입 페이지의 레이아웃과 UI 구성을 담당하는 리액트 컴포넌트입니다.
  이메일 인증, 회원가입 폼 및 관련 이벤트 처리를 관리합니다.

• useRegistration.ts:

  회원가입 관련 로직을 담당하는 커스텀 훅입니다.
  이메일 중복 검사, 이메일 인증, 회원가입 처리 등의 기능을 포함합니다.

• RegistrationForm.tsx:

  회원가입에 사용되는 폼을 구현한 컴포넌트입니다.
  사용자 입력을 관리하고 유효성 검사를 수행합니다.

• useModal.ts:

  모달(팝업 창) 관련 상태와 로직을 관리하는 커스텀 훅입니다.
  모달의 열기, 닫기 등의 기능을 제공합니다.

• authService.ts:

  프론트엔드에서 서버로의 인증 관련 API 요청을 관리하는 서비스 레이어입니다.
  회원가입, 로그인, 이메일 인증 등의 요청을 처리합니다.

백엔드

• authRoutes.js:

  인증 관련 엔드포인트(회원가입, 로그인, 이메일 인증 등)를 정의하는 라우팅 파일입니다.
  각 경로에 대응하는 컨트롤러 함수를 연결합니다.

• authController.js:

  인증 관련 요청을 처리하는 컨트롤러 함수들을 포함하고 있습니다.
  회원가입, 로그인, 이메일 인증 등의 로직을 처리합니다.

• authService.js:

  백엔드에서 인증 관련 비즈니스 로직을 담당하는 서비스 레이어 파일입니다.
  데이터베이스 쿼리, 비밀번호 해싱, 토큰 생성 등의 기능을 제공합니다.

• authUtils.js:

  회원가입과 로그인 시 사용되는 유효성 검사 로직을 담고 있는 유틸리티 파일입니다.
  입력된 데이터의 유효성을 검증하는 함수들을 포함합니다.

• error.js:

  애플리케이션에서 사용되는 다양한 종류의 에러 클래스를 정의하는 파일입니다.
  데이터베이스 오류, 인증 오류 등 특정 에러 유형에 대한 처리를 제공합니다.

3-1. 회원가입 기능의 특징 - 프론트엔드

커스텀 훅 사용 (useRegistration.ts):

회원가입과 관련된 로직을 처리하기 위해 useRegistration이라는 커스텀 훅을 사용합니다. 이 훅은 이메일 중복 검사, 이메일 인증, 회원가입 등의 프로세스를 관리합니다. 커스텀 훅을 사용함으로써 코드의 재사용성과 가독성이 향상됩니다.

모달 관리 (useModal.ts):

useModal 커스텀 훅을 통해 모달 창의 상태와 로직을 관리합니다. 이 훅은 모달의 열기, 닫기 및 상태 관리를 담당하여, 모달 관련 코드를 중앙에서 관리할 수 있게 해 줍니다.

폼 유효성 검사 (RegistrationForm.tsx):

RegistrationForm 컴포넌트에서 사용자 입력 폼의 유효성을 검증합니다. 이는 사용자가 올바른 데이터를 입력했는지 확인하는 중요한 과정입니다.

서비스 레이어 분리 (authService.ts):

authService.ts에서는 백엔드 API와의 통신을 관리하는 로직을 별도로 분리하여 관리합니다. 이러한 구조는 프론트엔드의 네트워크 요청 관련 코드를 체계적으로 관리할 수 있게 합니다.

3-2. 회원가입 기능의 특징 - 백엔드

트랜잭션 사용 (authService.js):

deleteTempUser 함수에서 데이터베이스 트랜잭션을 사용하여 임시 사용자 데이터 삭제 프로세스를 관리하고 있습니다. 이는 데이터베이스의 무결성을 유지하는 데 중요한 역할을 합니다. 여기서는 먼저 email_verification 테이블에서 관련 레코드를 삭제한 후, users 테이블에서 해당 이메일을 가진 사용자를 삭제합니다. 이 과정에서 발생할 수 있는 오류에 대비하여 트랜잭션을 사용하고 있으며, 오류 발생 시 롤백을 수행하여 데이터 일관성을 보장합니다.

비밀번호 해싱 (authService.js):

사용자의 비밀번호는 bcrypt 라이브러리를 사용하여 해싱 처리됩니다. 이는 보안상 중요한 부분으로, 평문 비밀번호를 데이터베이스에 저장하지 않고 해시된 형태로 저장함으로써 사용자 정보의 보안을 강화합니다.

이메일 중복 검사 및 유효성 검사 (authUtils.js):

회원가입 시 입력된 이메일의 중복 여부와 유효성을 검사하는 로직이 구현되어 있습니다. 이메일 형식의 유효성을 정규식을 통해 검증하고, 중복 여부는 데이터베이스 쿼리를 통해 확인합니다.

에러 핸들링 (error.js):

다양한 종류의 에러를 정의하여, 발생하는 오류에 따라 적절한 HTTP 상태 코드와 메시지를 반환하는 구조가 마련되어 있습니다. 이를 통해 클라이언트 측에서 더 명확하게 오류를 처리할 수 있습니다.

4. 취약점과 개선 사항

프론트엔드:

• 폼 유효성 검사 강화 (RegistrationForm.tsx):

현재 폼의 유효성 검사는 기본적인 수준에 머무르고 있습니다. 비밀번호 복잡성(대문자, 소문자, 숫자, 특수문자 포함 여부 등) 검사와 같은 보다 강화된 유효성 검사를 도입할 수 있습니다.

• 에러 핸들링 개선 (useRegistration.ts, authService.ts):

사용자에게 보다 명확한 피드백을 제공하기 위해 에러 메시지와 에러 핸들링을 개선할 필요가 있습니다. 네트워크 요청 실패 시나 서버로부터의 오류 응답에 대해 사용자가 이해하기 쉬운 안내 메시지를 제공해야 합니다.

백엔드:

• 보안 취약점 감소 (authController.js, authService.js):

비밀번호 저장 시 bcrypt를 사용하여 해시 처리하는 것은 좋은 점이지만, SQL 인젝션 공격이나 기타 보안 취약점에 대한 보호 조치도 고려해야 합니다. 예를 들어, 입력 데이터의 적절한 처리(예: SQL 쿼리 파라미터화)가 중요합니다.

• 에러 처리 및 로깅 (error.js):

현재는 일반적인 에러 유형에 대해 처리하고 있지만, 보다 상세한 에러 처리 로직을 추가하여 시스템의 안정성을 높일 필요가 있습니다. 로깅 시스템을 도입하여 예상치 못한 오류를 추적하고, 디버깅을 용이하게 하는 것도 고려할 수 있습니다.

• 입력 데이터 검증 (authUtils.js):

서버 측에서도 입력 데이터의 유효성을 검증해야 합니다. 클라이언트 측 검증만으로는 충분하지 않으며, 서버 측에서도 데이터 검증을 통해 부적절한 데이터의 처리를 방지해야 합니다.