Day 16 개발일지 Web
페이지들을 구현하다보니 재사용으로 사용되는 컴포넌트들이 상당히 많고 이런 불편함을 제거하기 위해서는 현재 재사용 컴포넌트로 만들어놓은 Input으로는 어림도 없다 !!! 때문에 다시 만들기로 마음먹었다.. Input의 종류는 Default(Name, ID, Birth) Input, Email Input, Phone Input, Password Input 이렇게 4개의 Input Component로 구성해서 리팩토링하기로 했다 .. 그렇게 눈물을 머금고 만든 페이지가 바로 회원가입 페이지 !
여기서 또 고민되는 것은 ..... 상태가 너무 많다는 것이다. 위 사진을 보면 이메일은 2개의 상태, phone 번호는 3개의 상태가 존재한다 ! 상태 관리를 좀 더 효율적으로 하고싶기 때문에 다른 프레임워크들의 구조를 확인해보고 바꿔보겠다 ~!
아직도 리액트의 상태관리를 잘 모르겠다 .. 도경님이 말씀해주신데로 API, 프레임워크들의 상태관리 방법을 뜯어보고 학습해보면 좋을 것 같다. State가 나열되어있는 모습이 .. 후 너무 보기 싫다 !! 아직 할일이 많으니 지금은 리팩토링에 만족하고 주말에 시험을 더 내서 해보면 좋을듯하다 !
처음에는 TOTP 모달이랑 버튼 컴포넌트를 개선하고 있었는데, 컴포넌트 개발하면서 계속 확인(테스트)하는게 여간 귀찮은 일이 아니었다. 그래서 저번 프로젝트에서 사용했던 스토리북을 쓰면 좋을 것 같았고, 스토리북 개발환경도 세팅해서 PR까지 날렸다. 버튼 컴포넌트는 ant design에서 힌트를 좀 얻어서 다양하게 활용할 수 있도록 개선했는데 앞으로도 계속 수정해나가야 할 것 같다.
그 다음 express에서 api 파라미터의 유효성을 검사하는 validator 미들웨어를 개선하는 작업을 했다. express-validator라는 미들웨어가 존재하지만 한번 구현해보면 좋은 경험이 될 것 같아서 구현을 시작했고, express-validator의 사용법을 보고 비슷하게 해보려고 검사할 파라미터의 이름을 배열로 받는 형식으로 수정을 했다. 그리고 추가적으로 상수값들을 따로 객체로 뺴서 구조적으로 명확하게 하려고 했다.
마지막으로 한 유저가 여러 세션을 가질 때 어떤 구조로 운영해야 하는지 검색을 좀 해봤다. 찾은 질문은 '한 사람의 여러 세션을 전부 삭제하고 싶을 때 어떻게 해야하냐?'라는 질문인데 답변들을 읽어보니 유저가 가지고 있는 세션들을 따로 저장하는 방법들을 추천하는 것 같았다. 유저의 모든 세션을 삭제하는 건 생각못해봤는데 유저 당 세션을 저장하지 않으면 모든 세션을 다 스캔해야 한다.. 세션을 관리하는 방법을 다시 정리해봐야 겠다.
컨디션이 너무 좋지 않고 모임에 참석하지 못하였으며 컴퓨터도 말썽이라 여러모로 힘들었다. session 관련 API는 시작도 못했고 session 작업을 다시 겨우 작성해서 PR 을 했다. 밀린 부분 좀더 열심히 진행해야겠다는 생각이 들었다.