[✍️ Dev Log] FE 정재혁 / 2022-01-20

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

- [x] 콘서트 크롤링까지 남은시간 타이머 기능 수정
- [x] 세부적인 기능 고도화 작업
- [x] CSS 고도화 작업

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

- 헤더 타이머에서 setInterval로 콘서트 크롤링까지 남은시간 타이머를 만들고 있는데, 이가 계속 엄청난 렉을 일으켜 꼭 고도화작업이 필요했다. 알고보니 setInterval이 useEffect와 함께 엄청난 함수 콜 스택을 만들어 미친 듯한 렉을 만들어내는 것이었다. 어제 새벽 늦게까지 고민하던 문제인데 커스텀 훅을 만들어도 잘 해결이 안되던 문제를 생각보다 간단하게 해결했다.

```ts
let isPause = false;
let timer;

function startTimer(){
isPause = false;
timer = setInterval(function(){
특정함수();
}
}

function stopTimer(){
clearInterval(timer);
isPause = true;
}

function 특정함수(){
if(!isPause){
실행부..
}
}

```
Reference: https://aljjabaegi.tistory.com/423 [알짜배기 프로그래머]

위와 같이 setInterval과 함께 실행되는 함수의 실행부를 상태조건문으로 감싸서 상태에 따라서만 실행을 제어하는 것이다.
아무리 clearInterval을 해도 함수의 콜스택이 쌓이는 것을 막을 수 없었는데, 위와 같이 간단한 방법으로 해결하였다.
### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] CSS 고도화 작업
- [x] 애니메이션 작업
- [x] 버그 수정