[TIL] 22.01.14

머리말

팀 프로젝트를 하고 있는데 타이머를 제작중이다. 아직 서버가 만들어지기 전이라 nextjs 의 /pages/api 폴더에서 mock api를 통해서 작업을 진행했다.
타이머 로직을 만들기가 까다로웠는데 다행히 레퍼런스가 있어서 그 부분을 커스텀 훅으로 살짝 수정을 했다. 1초마다 남은 시간 값을 서버에 전달을 하고 싶어서 put으로 계속 쏘는 방식으로 작업을 진행햇다.

작업 예상

• 미팅 진행 페이지를 만든다
• 타이머를 만든다
  • 타이머 기능을 만든다
    • 스타트
    • 스탑
    • 리셋
    • mock api 와 연동한다
      • mock api 데이터를 만든다
• 404 페이지
• error 페이지

작업

• 타이머가 정보를 내려주는 mock api
  
  
  local 실행시
  
  
  GET - http://localhost:3000/api/timer
  
  
  PUT - http://localhost:3000/api/timer body: {remainingTime: number}
  • 소스 코드
    

        // src/pages/api/timer
        
        // 기본 타이머 정보 값
        interface Timer {
            id: string
            start: boolean
            duration: number
            remainingTime: number
            level: number
        }
        
        export default function handler(
            req: NextApiRequest,
            res: NextApiResponse<Timer>
        ) {
        		// 1초마다 타이머 정보값 수정 확인
            if (req.method === 'PUT') {
                const newData = {
                    ...data,
                    remainingTime: JSON.parse(req.body.remainingTime),
                }
                res.status(200).json(newData)
            } else {
                res.status(200).json(data)
            }
        }
        ```
        
    
- timer 계산 hooks
```tsx
    // ## 사용예시
    // ## 실제구현 src/hooks/useTimer 참고
    
    // 인자 duration: 지속 시간, onEnd: 타이머 종료 후 callback 함수
    /*
    	- minutes 남은 시간에서 분 부분
    	- seconds 남은 시간에서 초 부분
    	- remainingTime 남은 시간 밀리세컨드 단위
    	- start 타이머 시작 함수
    	- stop 타이머 스탑 함수
    	- reset 타이머 재시작 함수
    */
    
    {...}
    const { minutes, seconds, start, stop, reset, isRunning, remainingTime } =
            useTimer({
                duration: data?.data?.duration,
                onEnd: () => {},})
    
     
    const putRemainTime = async (time) => {
            await axios.put(
                'http://localhost:3000/api/timer',
                {
                    remainingTime: Math.floor(time),
                },
                { withCredentials: true }
            )
        }
    
    // * useEffect를 통해서 서버에 1초마다 바뀐 값을 던져줌
    useEffect(() => {
            let timer
            if (isRunning) {
                timer = setTimeout(() => putRemainTime(remainingTime / 100))
            }
            if (!isRunning) {
                clearTimeout(timer)
            }
            return () => clearTimeout(timer)
        }, [isRunning, seconds])

• 404, error 페이지
  기본 세팅함

  후기

  개인 노션에도 작업이 들어가기전 작업 시나리오를 그려봤고, 작업이 끝나고 글로 정리를 했는데 아주 마음에 든다. 앞으로 꾸준히 이런 방식으로 작업을 하면 남는게 많을 거 같다.

이와는 별개로 팀프로젝트를 하면서 의사소통의 중요함을 절실히 배우고 있다. 남은 시간에 비해 할 일이 많고 정리가 안 된 부분이 많아서 마음이 급하다ㅠ