회고록
1. 저번 게임점수가 100점이 넘어가는 현상이 생겨 해결이 완료된지 알았지만 계속적으로 들어오는 현상이 발견
- 점수를 넣어주는 부분을 확인하여 연속적으로 클릭되어도 지정한 시간안에서 한번만 실행되게 작업을 하기 위해 찾아보던 와중 Lodash를 활용하여 throttle을 사용하는 방법이 있어서 사용하게 되었다.
const handleResult = useCallback(
throttle(() => {
const dataAnswer = JSON.stringify(wrongAnswer);
handleUpsertScore();
insertResult({ userId: data?.id, answer: dataAnswer, game: 'speaking', weekNumber: weekNumber });
localStorage.setItem('speakingResult', dataAnswer);
}, 2000),
[handleUpsertScore, insertResult],
);해당 코드를 이용하여 작업을 진행햇지만 몇가지 오류가 발생하였다
- throttle 함수가 제대로 import가 되지 않는 현상
- 쓰로틀링이 제대로 작동하지 않고 누를때마다 발생하는 현상
첫번째 문제를 확인하는데 있어 import를 제대로 적용하니 '모듈 lodash에 대한 선언 파일을 찾을 수 없습니다' 또 다른 현상이 발생하였다
-> 구글링을 통하여 확인하니 typescript에서 lodash를 사용하려면 해당 타입 선언을 다른 곳에서 찾아야 한다고 했다 그래서 공식문서에 들어가 @type/lodash를 찾아서 설치하여 해결하였다
두번째 현상에서 위에 코드에서 useCallback을 사용하였는데 거기서 사용하는 의존성 배열 부분인 handleUpsertScore함수에서 렌더링이 일어날때마다 다른 메모리에 다시 재설성 되어서 함수가 바뀌었다 인식을하고 계속 실행되었던 현상이였다 그래서 함수를 제거하고 다시 실행하여 보니 잘 작동하는 모습을 볼 수 있었다.
단순히 동작을 하지 않아 throttle함수를 잘못 사용하고 있는줄 알았지만 하나하나 주석처리하면서 동작을 해보니 잘 작동하는걸 볼 수 있었고 오류를 잡을 수 있었다 이러한 오류 하나하나에 많은걸 배우는거 같다
2. 게임 오답을 공통 팝업으로 사용해서 데이터를 Zustand로 불러올때 새로고침 했을 경우 없어지는 현상
지금 생각해보면 당연한 결과지만 작업을 할때만 해도 Zustand로 관리하면 더 편할거 같았고 새로고침 관련해서는 생각을 못해봐서 Zustand로 했었는데 막상 작업을 하고나서 새로고침을 했더니 데이터가 없어져서 팝업이 빈 화면으로 나온 현상이 있었다. 이러한 현상을 위해 여러가지 생각을 해보았다
- 데이터베이스에 담아서 매번 데이터를 불러와서 보여주기
- 로컬스토리지에 데이터를 담아 보여주기
위 방법중 2번을 택하였는데 그 이유는 1번을 사용할 경우 데이터 통신을 해야한다는 점과 마지막에 끝난 데이터를 보여줘야 한다는게 걸려서 2번을 택하였다 로컬스토리지에 담는게 더 편했지만 너무 로컬스토리지에 담는게 많아 지는거 같아서 걱정을 했지만 검색을 통해 문제가 없을거 같아서 안심했다.
