3주차 개인 프로젝트 나만의 사전 만들기
"My Dictionary"
Issue
Firesotre
기능 구현을 끝내고 디자인을 수정하는 중 갑자기 데이터를 불러오지 못하고 오류가 발생 했다.
Firesotre 할당량이 끝났다고 하길래 당황해서 확인을 해보니 1시간 사이에 하루 읽기 횟수가 끝이 나있었다.
아무래도 useEffect()를 확인 해보려고 값을 이리저리 수정 했던게 루프를 돌아 계속 읽어서 발생한 현상인 것 같았다.
일단 프로젝트는 해야하기에 모든 데이터를 다시 리덕스에서만 관리하게 수정하고 디자인을 추가 하였다.
//기존에 작성한 useEffect
//새로고침 시 한번만 동작한다.
React.useEffect(() => {
dispatch(loadCardFB());
}, [])
//루프 useEffect
//단순하게 "업데이트 해서 casd_list가 바뀔때 마다 랜더링을 다시 해주면 안되나?"
//라고 생각하고 넣어 봤는데 루프가 돌며 Firestore 할당량이 끝나버렸다
//로드 -> 바뀐리스트를 읽어옴 -> 리스트가 바뀌었기에 다시 로드
//이 싸이클이 반복 되어서 그랬다고 생각한다.
React.useEffect(() => {
dispatch(loadCardFB());
}, [state.cardlist.card_list])이벤트 전파(Event Propagation)
포스트잇 영역을 클릭하면 게시글 수정 페이지 로 이동 하고,
휴지통 버튼을 클릭하면 게시글 삭제기능이 동작한다.
처음 기능을 구현 할 때 상위 요소인 포스트잇에 게시글 수정 페이지로 이동하는 Event가 걸려 있어 휴지통 버튼을 클릭하면 삭제가 아닌 게시글 수정 페이지로 이동이 되었다.
검색을 뭐라고 해야 할지도 감이 안잡혀서 여기 저기 뒤져보다가 이벤트 전파(Event Propagation) 현상 이라는 것을 알게 되었고 해결 방법을 찾을 수 있었다.
//단순히 e.stopPropagation() 메소드를 사용하면 된다.
const stopPropagation = (e) => {
e.stopPropagation();
};
완성 레이아웃
- 메인화면
- 수정화면
- 추가화면
생각만 하고 구상하지 못한 기능
- 각 카드와 게시글 수정, 삭제 페이지를 애니메이션으로 한 페이지 처럼 이어보고 싶었다.
- 구상이 잘 되지 않아서 미뤄두었다.
- 모바일에서도 잘 보일 수 있도록 깔끔하게 만들고 싶었다.
- 크기조절, 좌표 설정이 많이 미숙함을 느꼇다. 이번에 계속 해보면서 훨씬 나아진것 같았지만 모바일 까지 생각하기엔 어느정도 시간이 걸릴지 감이 안잡혀서 다음에 적용 해보기로 했다.
느낀점
몇가지 우여곡절이 있었지만 프로젝트를 마무리하고 배포까지 끝이 났다.
익숙하지 않던 CSS와 친해지고자 이것 저것 많이 건드렸는데 결과물이 어떻든 정답이 없고 개인적인 기준만 있으니 정말 시간 가는줄 모르고 하나하나 찾아가며 재미있게 만들었다.
조금 더 건드려 보다가 마감 직전에 제출을 할까도 고민 했지만 내가 구상한 나만의 프로젝트를 하나 만들어 보고 싶어서 이번 프로젝트는 이제 그만 놓아 주었다.
