usehookform onblur? ⇒ usehookform 라이브러리에서 제공하는 레지스터 메서드의 옵션 중 onBlur 기능을 이용하여 인풋 창에서 입력 후 포커스 벗어났을 때 실행시키고자 하는 함수를 통해 유효성 검증 및 이메일 및 닉네임 중복여부 체크하였다. 올바른 결과값이 아닌경우 상태를 알려 줌으로써 watch 메서드의 매 순간 리렌더링도 발생하지 않을 뿐더러 중복 체크 버튼 또한 사라지니 UI/UX 측면과 기능적 측면을 향상 시킬 수 있었다고 생각한다.

전역 상태를 관리하기 위해 redux-toolkit과 리덕스 펄시스트를 사용하였습니다. 저희가 개발한 웹앱의 대다수 페이지에서 데이터를 요청하기 위해 유저아이디를 사용하였는데. 전역적으로 사용할 수 있도록 하고 새로고침 시 휘발되는 데이터가 아닌 보관가능한 상태를 사용하기 위하여 사용하였습니다. 또한 미들웨어를 통해 리덕스-thunk를 적용하여 비동기 함수로 요청하고 이행되었을 때 slice 의 state 값을 재할당 해줌으로써 컴포넌트 코드 내부에서도 클린한 모습을 유지 할 수 있게하였습니다.

앱모습을 띈 우리 작품이 좀 더 앱스러운 모습을 보여주게하기 위해 파이어베이스의 메시징 기능과 서비스 워커를 이용하여 백그라운드 상에서 푸쉬 알림을 받을 수 있도록 시도하였습니다. 발급받은 토큰 값을 파이어베이스에서 제공하는 테스트 메시지 보내기 기능을 도움받아 시도하였을 때 성공하였으나, 등록된 토큰 관리 및 자동으로 메시지 송신하는 부분을 구현하지 못해 아쉽고 시간 투자하여 구현해 내보고자 합니다.

next-pwa 이용하여 웹앱 적용

카카오 공유하기 연결

redux-toolkit과 redux-persist 이용하여 상태 관리

FCM 과 ServiceWorker, 로컬 api 통한 데이터 송신

하단 네비게이션, 인증 등록, 회원가입, 회원정보 수정, 검색, 습관 통계 페이지 구현