오직 내 필요에 의해 만들게 된 앱이다.
엄마가 혈당이 높으셨는데, 마침 어쩌다 알게된 7초 스쿼트가 혈당을 낮추는데 좋다는 이야기를 듣고나서 엄마와 같이 스쿼트를 했다. 7초동안 스쿼트를 하고 올라오고, 올라오는데 2~3초가 걸렸고 할 때마다 달랐다. 그리고 다시 7초 동안 스쿼트를 하고.. 시간 세는게 번거로웠다. 몇 번은 계산을 틀리기도 하고.. 그래서 스터디에서 셀프 프로젝트를 시작한다고 했을때 바로 7초 스쿼트 카운터를 만들자고 결심했다.
이 프로젝트를 시작했을 때가 리액트의 기초를 막 뗀 상태였는데 클로저 오류를 정통으로 부딪쳐서 이해하는데 한참 걸렸었다.. 지금은 굉장히 값진 공부를 했다고 생각한다.
더 붙이고 싶은 기능도 많았지만 팀 프로젝트와 같이 진행하는 바람에 여러가지 시도를 하지 못했는데 그 점이 아쉽다.

초기 구상과 현재 코드 비교

1. setTImeout 메소드를 사용할 것인가?

   • 맨 처음에 setInterval 메소드를 유념해 두었고 오류를 고치다가 useInterval 커스텀 훅을 먼저 알게되었고 사용하였다.
     후에 뒤늦게 setTimeout을 중첩해서 쓰면 setInterval과 같은 동작을 할 수 있다는 것을 알게되어서 쓰지 않았다.

2. 이미지 가이드에만 useEffect를 사용할 것인가?

   • 횟수 카운터에도 쓰고 세트 카운터에도 썼다. 엄청 많이썼다.

3. useRef를 최소한으로 쓸 수 있는 법은?

   • 이 점은 useInterval을 쓰면서 자동으로 해결되었다.

트러블슈팅 with TIL

1. 초 시간을 더해주지 못하는 오류 (setInterval 오류)

   • 클로저Closure가 되버린 내부함수가 일으키는 오류 (feat. setInterval)

2. setInterval 대신 useInterval을 사용하자

3. 페이지가 새로 마운트 되면 이전 페이지에 있던 상태가 초기화 되는 오류

   • 전역상태 라이브러리 이용. Recoil과 React-Redux의 직관력 비교

에러리포트

1. Too many re-render 오류 (2초후 자동 카운트 정지 기능 추가 오류)
   • useEffect를 이용하기