프로젝트 블루아워 우리은행 온택트 해커톤 수상작
프로젝트 설명
- 청년층들의 유입과 기존 은행의 딱딱한 이미지를 탈피 목적으로 기존 아날로그 통장 일기 개선
- 디지털화 시켜서 다양한 기능들이 추가 된 통장일기 서비스 WeMory
프로젝트 관련 자료
서비스 사용자 Usecase
장려상 수상
- 프로젝트 무드보드
- 프로젝트 UI
🏃♀️ Trouble shooting
무한 렌더링 오류
API 무한 호출 이슈에 이은 이슈
문제 발생
함수형 컴포넌트에서 API를 통해 사용자가 가지고 있는 일기장 목록 API를 무한 호출하는 이슈가 발생.
원인
Effect Hook 에 포함된 API가 렌더링으로 인해 무한으로 호출 됨. → React 성능에 과부하가 걸렸고 브라우저가 현저히 느려졌음.
해결 과정
Effect Hook 관련 공식 문서를 통해서, 원인은 의존성 배열이 존재하지 않아 렌더링이 일어나서 무한 루프 발생. → 의존성 배열에 빈 값을 넣어 Mount 이후, 호출 되도록 이슈를 해결.
추가 오류 발생
데이터가 변경되어도 한 번 렌더링 된 이후, 렌더링이 되지 않아 업데이트가 되지 않는 이슈 발생
해결 과정
자체적인 Bool 타입 상태 값을 활용해 Effect Hook을 리랜더링 할 수 있는 새로고침 기능 구현 → 결과적으로 데이터를 업데이트 할 수 있도록 해결함.
