[ Dev Log] 박지훈 / 2021-06-30

## 오늘은 어떻게 프로젝트에 기여했나요?

**목업형태의 타이머 페이지에 타이머 기능구현**

먼저 다음과 같이 타이머 구현 로직 수도코드 작성을 해보았다
- state로 hours, minutes, seconds 관리
- 1초씩 흘러가게끔 setInterval 이용 , 타이머가 0이 될시 clearInterval로 종료
- 흘러가는 타이머를 중지, 시작 제어 할수있는방법 생각해보기

맨처음에 useState로 hours, minutes, seconds 를 관리하려고했는데
문제는 다른페이지로 나가면 상태 초기값으로 초기화 된다
그래서 새로고침 , 다른페이지 이동간에도 state를 저장할수있게 window.localstorage를 생각해서
커스텀 Hooks + localstroage를 이용하기로 했다

**다른페이지에서도 쓸일이 많을것같아 재활용성을 생각해 util 디렉토리를 만들고 커스텀Hooks인 useLocalStorage함수 선언**

**그후 timerpage.js로 가져와 state 정의**

시간 1초씩 흘러가는것을 구현하기위해 setInterval 이용하여 1초마다 함수 반복실행
**시간 분 초 state가 바뀔때마다 setInterval 함수가 반복되게끔 useEffect를 사용하였다** (useEffect없이 setInterval 함수만 이용시 한번만 실행)

**타이머가 작동시 중지 버튼을 누르면 잠시 멈추고
멈춘상태에서 시작버튼을 누르면 다시 시작하게끔 구현 (+ 멈춘상태에서 재시작도 가능)**

**완성**

## 오늘의 프로젝트에서 힘든 점은 무엇인가요?

**타이머 시작 / 정지 (+재시작) 기능**
정말정말 간단한 로직을 이상하게 처음부터 너무 어렵게 다음과 같이 생각했다
- setInterval을 어떻게 중지하는 메소드가 따로있나?
- useEffect안에서 setInterval함수가 반복되는데 useEffect를 잠시 정지를 어떻게?
- useEffect를 함수안에 넣어서 버튼에 onClick으로 핸들링? -> 문제는 useEffect는 함수안에 작성하면안됨

**해결과정**
isRunning 이라는 지금 실행하고있는지 아닌지에 대한 상태를 정의후
useEffect안에서 최상단에 조건식으로 isRunning 상태가 truthy 일경우
setInterval 함수가 작동되게끔 하였다
그리고 버튼에는 isRunning의 상태값을 반대로 바꿔주는식으로 하면 되는
정말 간단한 로직이 있었다 🙃

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] next.js 에러 핸들링
- [ ] typescript 로 리팩토링
- [x] hours 까지 추가