프로젝트 블루아워 우리은행 온택트 해커톤 수상작
프로젝트 설명
- 청년층들의 유입과 기존 은행의 딱딱한 이미지를 탈피 목적으로 기존 아날로그 통장 일기 개선
- 디지털화 시켜서 다양한 기능들이 추가 된 통장일기 서비스 WeMory
🧑💻 프로젝트 역할
- 팀장 및 웹 프론트엔드 개발 (프론트엔드
80%기여) - React기반의 클라이언트 개발 및 모바일 웹 앱 사이트
- 토큰 인증 방식을 통해 서버를 Stateless하게 관리하여 확장성을 고려했습니다.
- Redux(Redux-thunk)를 통해 비동기 API 로직을 구현했고, 로그인 유저 정보를 전역 관리하여 로그인 상태를 구현했습니다.
프로젝트 관련 자료
장려상 수상
서비스 사용자 Usecase
- 프로젝트 무드보드
- 프로젝트 UI
🏃♀️ Trouble shooting
메인 페이지 접속했을 때 데이터 로드가 안되는 문제 발생
문제 발생
메인 페이지에 접속 시 작성한 일기 리스트 목록이 띄어지지 않는 문제 발생
원인
Effect Hook 에 포함된 API가 렌더링으로 인해 무한으로 호출 됨. → React 성능에 과부하가 걸렸고 브라우저가 현저히 느려졌음.
해결 과정
Effect Hook 관련 공식 문서를 통해서, 원인은 의존성 배열이 존재하지 않아 렌더링이 일어나서 무한 루프 발생. → 의존성 배열에 빈 값을 넣어 Mount 이후, 호출 되도록 이슈를 해결.
추가 오류 발생
데이터가 변경되어도 한 번 렌더링 된 이후, 렌더링이 되지 않아 업데이트가 되지 않는 이슈 발생
해결 과정
자체적인 Bool 타입 상태 값을 활용해 Effect Hook을 리랜더링 할 수 있는 새로고침 기능 구현 → 결과적으로 데이터를 업데이트 할 수 있도록 해결함.
