1. 기능의 동작 원리와 순서
사용자 정보 조회
- 클라이언트는 토큰을 사용하여 getUserInfoHandler를 호출합니다.
- 미들웨어 authenticateAccessToken에서 액세스 토큰의 유효성을 검증합니다.
- 유효한 토큰인 경우, getUserInfo 함수를 통해 데이터베이스에서 사용자 정보를 조회합니다.
- 조회된 사용자 정보는 클라이언트에게 JSON 형태로 반환됩니다.
사용자 정보 수정
- 사용자는 수정할 정보를 입력하고, 해당 요청을 서버로 보냅니다.
- updateUserInfoHandler는 요청된 정보를 받아 처리합니다.
- 미들웨어 authenticateAccessToken에서 토큰의 유효성을 검증합니다.
- 토큰이 유효하면, updateUserInfo 함수를 통해 데이터베이스에 정보를 업데이트합니다.
- 업데이트 성공 메시지는 클라이언트에게 JSON 형태로 반환됩니다.
주문 내역 조회
- 사용자가 주문 내역 조회를 요청합니다.
- getOrdersByUserIdHandler가 호출되어 사용자의 ID로 주문 내역을 조회합니다.
- 미들웨어 authenticateAccessToken에서 토큰의 유효성을 검증합니다.
- getOrdersByUserId 함수를 사용하여 사용자의 주문 내역을 데이터베이스에서 조회합니다.
- 조회된 주문 내역은 클라이언트에게 JSON 형태로 반환됩니다.
2. 코드 파일의 구성
프론트엔드
-
UserProfilePage.tsx:
사용자 프로필 페이지의 레이아웃과 UI를 구성하는 리액트 컴포넌트.
사용자 정보 조회 및 수정, 주문 내역 조회 기능을 담당합니다. -
UserInfoForm.tsx:
사용자 정보를 수정할 수 있는 폼을 구현한 컴포넌트.
사용자 입력 관리 및 유효성 검사를 수행합니다. -
UserOrdersForm.tsx:
사용자의 주문 내역을 표시하는 컴포넌트.
주문 내역을 조회하고, 주문별 세부 정보를 보여줍니다. -
AlertConfirmModal.tsx 및 LoadingModal.tsx:
사용자 인터랙션 및 데이터 로딩 시 사용되는 모달(팝업 창) 컴포넌트.
경고, 확인 메시지 및 로딩 상태 표시를 담당합니다. -
useAlertConfirmModal.ts:
AlertConfirmModal 컴포넌트의 상태 및 로직을 관리하는 커스텀 훅.
-
useUserInfo.ts:
사용자 정보와 관련된 로직을 처리하는 커스텀 훅.
사용자 정보 조회 및 업데이트 기능을 포함합니다. -
userService.ts 및 authService.ts:
서버로의 사용자 관련 API 요청을 처리하는 서비스 레이어.
사용자 정보 조회, 업데이트, 인증 관련 요청 등을 담당합니다.
백엔드
-
userRoutes.js:
사용자 정보 조회 및 수정, 주문 내역 조회와 관련된 엔드포인트를 정의하는 라우팅 파일.
각 경로에 대응하는 컨트롤러 함수를 연결합니다. -
userController.js:
사용자 관련 요청(정보 조회 및 수정, 주문 내역 조회 등)을 처리하는 컨트롤러 함수들을 포함.
각 기능별로 로직 처리를 담당합니다. -
userService.js:
백엔드에서 사용자 관련 비즈니스 로직을 처리하는 서비스 레이어 파일.
데이터베이스 쿼리 및 로직 처리를 담당합니다. -
authenticateToken.js:
JWT 기반의 액세스 토큰 및 리프레시 토큰을 검증하는 미들웨어.
토큰의 유효성을 검사하고, 사용자 인증을 처리합니다.
3-1. 사용자 마이 페이지 기능의 특징 - 프론트엔드
커스텀 훅 사용 (useUserInfo.ts, useAlertConfirmModal.ts 등):
사용자 정보와 관련된 로직 및 모달 관리 로직을 처리하기 위해 커스텀 훅을 사용합니다. 이는 코드의 재사용성과 가독성을 향상시키며, 기능별 로직을 체계적으로 관리할 수 있게 합니다.
모달 컴포넌트 (AlertConfirmModal.tsx, LoadingModal.tsx):
사용자 인터랙션과 데이터 로딩 시 사용되는 모달 창의 상태와 로직을 관리합니다. 중앙화된 상태 관리를 통해 모달 관련 코드를 효율적으로 관리할 수 있습니다.
폼 처리 및 유효성 검사 (UserInfoForm.tsx, UserOrdersForm.tsx):
사용자 정보 수정 및 주문 내역 조회에 사용되는 폼에서 입력 데이터의 유효성을 검사합니다. 이는 사용자로부터 정확한 데이터를 수집하는 데 중요합니다.
서비스 레이어 분리 (userService.ts, authService.ts):
백엔드 API와의 통신을 관리하는 로직을 별도로 분리하여 관리합니다. 이를 통해 네트워크 요청 관련 코드의 체계적인 관리가 가능합니다.
3-2. 사용자 마이 페이지 기능의 특징 - 백엔드
토큰 기반 인증 (authenticateToken.js):
JWT 토큰을 사용하여 사용자 인증을 처리합니다. 액세스 토큰 및 리프레시 토큰의 유효성을 검증하는 미들웨어가 포함되어 있어 보안성을 강화합니다.
데이터베이스 쿼리 관리 (userService.js):
사용자 정보 조회, 업데이트, 주문 내역 조회 등의 기능을 위한 데이터베이스 쿼리를 관리합니다. 데이터베이스와의 상호 작용은 서비스 레이어에서 중앙화되어 처리됩니다.
에러 핸들링 및 로깅 (userController.js):
에러 발생 시 서버 오류 응답을 보내고, 로그를 남깁니다. 이를 통해 오류 상황에서도 적절한 클라이언트 응답과 시스템 모니터링이 가능합니다.
RESTful API 디자인 (userRoutes.js):
사용자 정보 및 주문 내역과 관련된 API 엔드포인트를 RESTful 원칙에 따라 설계합니다. 이는 API의 일관성과 이해도를 높여줍니다.
4. 취약점과 개선 사항
프론트엔드:
- 폼 유효성 검사 강화:
현재 구현된 폼의 유효성 검사는 기본적인 수준에 머무르고 있습니다. 예를 들어, UserInfoForm.tsx에서 비밀번호의 복잡성 검사(대문자, 소문자, 숫자, 특수문자 포함 여부 등)를 강화할 수 있습니다.
- 에러 핸들링 개선:
useUserInfo.ts, userService.ts 등에서 발생하는 네트워크 요청 실패나 서버 오류에 대한 에러 메시지와 핸들링을 개선할 필요가 있습니다. 사용자가 이해하기 쉬운 안내 메시지를 제공하여 사용자 경험을 개선할 수 있습니다.
백엔드:
- 보안 취약점 감소:
userController.js, userService.js에서 SQL 인젝션과 같은 보안 취약점에 대한 추가적인 보호 조치를 고려해야 합니다. 입력 데이터의 적절한 처리(예: SQL 쿼리의 파라미터화)가 중요합니다.
- 에러 처리 및 로깅 개선:
error.js를 포함한 다른 파일에서 예외 사항에 대한 보다 상세한 에러 처리 로직을 추가하여 시스템의 안정성을 높일 필요가 있습니다. 로깅 시스템을 도입하여 예상치 못한 오류를 추적하고 디버깅을 용이하게 하는 것이 좋습니다.
- 입력 데이터 검증 강화:
서버 측에서도 클라이언트 측 검증에 의존하지 않고, 입력 데이터의 유효성을 검증해야 합니다. 서버 측에서도 데이터 검증을 통해 부적절한 데이터의 처리를 방지하는 것이 중요합니다.
