TIL1107

회고록

최종 프로젝트 중간점검

최종 프로젝트 중간 점검에 앞서 각종 버그를 체크를했다.

1. 내가 개발한 기능중에서 오디오 기능중 마이크 녹음 버튼을 눌렀을때 녹음중이라는 텍스트 대신 정확도 계산이라는 텍스트가 나오는 현상이 있어 이 부분을 삼항 연산자로 녹음할때는 녹음중이라는 부분이 API 통신중에는 정확도 계산중이라는 텍스트가 나오게 작업하였다

녹음이 되는 기존 코드를 zustand로 전역관리를 해놔서 다행히 추가 코드 없이 바로 구현이 가능해서 다행이였던거 같다

2. 게임이 끝나고 게임결과를 보거나 다른 게임을 하는등 다른 페이지로 넘어갔다가 다시 페이지로 돌아가면 처음부터 시작되는게 아닌 마지막에 풀었던 문제로 남아있는 부분이 있었다. 처음에는 서버 컴포넌트에서 리렌더링을 다시 해야 할 거 같아서 계속 생각했지만 좀 더 쉽게 useEffect를 사용하는 곳이 있어 언마운트 될 때 함수를 이용해 초기화 시켜줘서 쉽게 접근 할 수 있었다

	// 컴포넌트가 unmount 될때 클리어 함수를 이용하여 초기화
    return () => {
      setRandomText([]); // 랜덤 문장 초기화
      resetText(); // 텍스트 초기화
      resetPercent();
      resetTimer();
      setIsDelay(false);
      resetIndex();
    };
  }, []);

3. index가 9일때 결과보기가 나오고 index가 증가하지 않는데 index를 계속 함수에서 실행되고 리렌더링되고 다시 호출하고 무한 루프가 발생하는 오류가 발생하였다

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

해당 오류를 해결하기 위해 의존성 배열을 가지고 한번만 호출되게 하기 위해 useEffect를 사용하여 해결하였다 추후 조건문을 이용하여 함수 호출을 조정하였다

  const handleIndex = () => {
    if (index < 9) {
      addIndex();
    } else if (index === 9) {
      handleUpsertScore();
      setResult(true);
    }
  };