리팩토링
코드리뷰 후 리팩토링 계획을 세우고 리팩토링과 작은 추가기능구현을 마친지 시간이 꽤 흘렀지만 블로그에 기록하면서 다시한번 정리해보려고 합니다.
- 모듈/컴포넌트화
제가 작성했던 대부분의 컴포넌트가 fetch함수를 그대로 포함하고 있어서 관련함수들을 모듈화 하고 재활용 가능한 부분이나 반복되는 부분을 컴포넌트화 시켜 리팩토링 했습니다.
- 토큰만료 대응
axios interceptor를 이용하려고 했는데 사실 refreshToken이 따로 발급되는 구조가 아니라서 굳이 axios interceptor까지도 필요하지 않았습니다. accessToken이 기존에 24시간만 쿠키에 저장되어있도록 되어있어서 로그인 상태지만 쿠키가 비어있는 상태에서 accessToken이 필요한 페이지로 이동시 ProtectedRoute에서 alert 후 로그인 페이지로 이동시켜주는 로직을 추가했습니다.
- 라이브러리 활용
-
login, singup 페이지 use-hook-form 사용했습니다.
-
accountApi , authApi 파일 내 관련 fetch함수 모듈화 완료했습니다.
-
mypage내 컴포넌트 useQuery사용해 리팩토링 (window.location.href를 이용해 페이지 전체를 새로고침하는 로직 삭제)
-
Axios 사용
로그인시 아이디/패스워드가 틀려서 로그인이 불가한 경우 400번 에러가 뜨는데 fetch 함수를 이용하면 에러가 뜨더라도 요청 자체가 실패한 경우가 아니면 catch 구문으로 넘어가지 않아 try문 안에서 if(response.ok) 구문등을 이용해 분기처리하는게 좀 까다로웠습니다.
비밀번호가 틀렸을 경우 400번 에러가 뜨지만 catch구문으로 넘어가지 않고 파싱돤 데이터로 에러메시지가 나옵니다.
그래서 여기에서 axios를 사용해 catch 구문으로 넘어가는 것을 확인하고
400번에러가 뜨는 경우, 저 에러메시지를 사용자에게 alert경고창을 띄우는 로직으로 구현해 보았습니다.
이후 추가 기능구현
- 계좌 삭제를 위해서 해당 계좌 아이디와 signature 불리언 데이터가 필요하기 때문에 버튼 클릭시 해당계좌 아이디를 가져오고 signature에 window.confirm 메소드 반환값을 할당하여 확인을 누르면 최종적으로 계좌삭제 api를 호출하여 계좌삭제기능을 구현했습니다.
- mypage 내 거래내역에서 상세보기 버튼을 누르면 모달창으로 거래상세내역을 보여주는 기능을 구현했습니다.
