[1人 프로젝트] 다른 색깔 찾기 게임 4회차

🎉 성과

완성한 부분

1. 남은 시간이 0초일 때, 게임 재시작

 

 

---

 

 

✨ 느낀 점

👍 알게 된 점

시간이 0초 될 때, 변수 초기화시키기

시간이 0초가 되면, 알림 창을 띄우게 된다. 알림 창의 확인이 눌리기 전까지, alert의 뒤에 있는 코드들은 실행이 되지 않아, UI의 변화를 지연시키는데 사용하게 된다. gameReSet은 시간, 스테이지, 점수 값을 초기값으로 세팅하고, playing에 true값을 주었다. playing은 컴포넌트의 props로 넘겨주어, box의 속성 값(opacity, 한 행의 상자 개수)을 초기값으로 세팅시킬 때 사용한다. 

 

 

💢 힘들었던 점

콘솔과 UI에 나오지 않는 에러?

deps 밑에 밑줄이 나오면, 에러라고 생각하고 고치자

결론적으로 말하자면, useEffect 안에 넣어진 코드들의 deps를 적지 않아서 발생하는 문제였다. 내가 생각한 대로 코드를 작성하고, 코드를 실행했더니 timer가 0초가 되어 게임이 재시작될 때 상자들의 위치가 이상하게 되는 것이었다. 처음에는 방금 작성한 코드의 문제인 줄 알아서, 다른 useState로 정의한 변수의 값이 이상한 줄 알고 코드를 뒤엎었다가, 롤백을 하는 등 고생을 했다. 정말 부끄럽지만, 3일 차가 되어서야 useEffect를 손보기 시작했고, useEffect에 넣은 코드들 중 바뀌는 변숫값(stage, boxCount)을 deps에 모두 집어넣은 후에야 에러가 잡혔다. useEffect 사용할 때는 무조건 deps를 꼼꼼히 살펴보겠다는 다짐을 하게 되었다. 

 

웃긴 내용은 코드를 뒤집어엎으면서, 조금씩 코드를 손보았는데 얼추 코드가 예쁘게 작성되었다. 개고생 해가면서 얻은, 나쁘지 않은 경험이었다. 여담으로 내가 처음에 작성한 코드는, 애초에 에러가 없었다!

 

 

❗  보완할 점

1. 컴포넌트 별 파일 분리하기

나는 처음부터 파일을 분리하여 코드를 작성하면, 연속적으로 작업을 할 때는 별 무리 없이 이어서 작성이 가능하다. 그러나 1시간이 지난 후에 코드를 들여다보면, 내가 작성한 코드를 해석하는 시간이 필요하다는 것이었다. 그래서 처음부터 한파일에 몰아서 작업을 하고, 코드 작업이 마무리되었을 때 컴포넌트 별로 파일을 분리한다. 이번에도 한 파일에 몰아서 작업을 끝마쳤기 때문에, 컴포넌트 별로 파일을 분리할 시간이다.