feat: 07-Stopwatch 과제 구현 (최병찬)

[chan-byeong]

📝 과제 요약

• 과제명: Stopwatch
• 소요 시간: 2h 30m

💡 설계 및 고민한 부분

AI 없이 스스로 설계하며 가장 신경 쓴 핵심 로직이나 아키텍처(컴포넌트 구조, 상태 관리 등), 혹은 사용자 경험(UX) 개선 사항을 적어주세요.

• 시간 갱신을 어떻게 처리해야할 지 고민함

초기에는 setInterval을 통해서 시간을 갱신함. 하지만 setInterval은 콜스택의 영향을 받기 때문에 엄밀한 시간 갱신을 보장하지 못한다. 그래서 콜스택과 독립적이게 일정주기마다 화면을 갱신하는 requestAnimationFrame을 활용하여 시간을 갱신하는 것이 더 낫다고 판단하여 수정하였다.

setInterval과 rAF를 구현할 때 버튼의 이벤트 핸들러 내부에서 관련 기능을 실행/중지 하는 방식으로 구현하였으나, setInterval과 rAF는 side-effect이기 때문에 이를 useEffect 내부에서 관리하는 것이 옳다고 판단하였다. 그래서 deps array에 isRunning을 넣은 뒤 useEffect 내부에서 시간을 업데이트하는 기능을 구현하였다.

📖 학습한 내용 및 어려웠던 점 (선택)

문제를 풀며 새롭게 알게 된 개념이나, 구현 중 막혔던 부분이 있다면 공유해 주세요.

• requestAnimationFrame 관련 개념을 다시 공부

❓ 질문 사항 (선택)

라이브 리뷰 때 팀원들과 함께 토론하고 싶거나 의견이 궁금한 부분이 있다면 남겨주세요.

📸 스크린샷 (선택)

UI 관련 과제인 경우 결과 화면 캡처나 GIF를 첨부해 주세요.