🎉 성과 완성한 부분 남은 시간이 0초일 때, 게임 재시작 ✨ 느낀 점 👍 알게 된 점 시간이 0초 될 때, 변수 초기화시키기 시간이 0초가 되면, 알림 창을 띄우게 된다. 알림 창의 확인이 눌리기 전까지, alert의 뒤에 있는 코드들은 실행이 되지 않아, UI의 변화를 지연시키는데 사용하게 된다. gameReSet은 시간, 스테이지, 점수 값을 초기값으로 세팅하고, playing에 true값을 주었다. playing은 컴포넌트의 props로 넘겨주어, box의 속성 값(opacity, 한 행의 상자 개수)을 초기값으로 세팅시킬 때 사용한다. 💢 힘들었던 점 콘솔과 UI에 나오지 않는 에러? deps 밑에 밑줄이 나오면, 에러라고 생각하고 고치자 결론적으로 말하자면, useEffect 안에 넣어진 코드..

✨ 느낀 점 👍 알게 된 점 window.confirm코드를 이용해 웹페이지 확인창 띄우기 위의 코드는 다른 곳에 함수를 작성하고 함수를 호출하는 형식으로 작성했는데, 바로 함수를 작성해도 상관없다. 바로 함수를 작성하는 방법은 아래와 같다. const Fn = () => { if(window.confirm('메시지')) { () => {...}// 확인을 누를경우 실행할 함수 } else{ () => {...}// 취소를 누를경우 실행할 함수 }} 탭 닫기 전 확인창 띄우기 protect버튼에는 onClick으로 enablePrevent함수를 호출하도록 한다. enablePrevent함수는 이벤트 함수로 탭을 닫기 전(beforeunload)에 listener함수를 실행한다. listener함수는 ev..

✨ 느낀 점 👍 알게 된 점 useState에 값 추가하는 방법 setState함수로 변숫값을 바꾸는 방법은 총 2가지이다. 1. setState에 바로 값을 집어넣기 2. setState에 함수를 넣어 기존 배열을 복사하고, 새로운 값을 넣으면 된다. map함수는 배열의 하나하나 빼낼 수 있다. map함수로 배열안에 있는 값을 하나씩 빼내어 태그에 값 하나당 태그를 만들어 낼 수 있다. 주의사항으로는 map함수를 이용해 태그를 생성할 때는 key값이 필요한데, map함수로 빼낸 값에 key값이 없으면 map의 두 번째 매개변수를 index로 지정하고, index를 태그 안의 key값으로 넣으면 된다.

🎉 성과 완성한 부분 반응속도 측정하는 게임을 만들었다. 완성한 이유 JavaScript으로 구현 가능한 간단한 게임을 찾던 도중, 제일 재밌어 보이는 것이 반응속도 측정하는 게임이었다. ✨ 느낀 점 🧡 좋았던 점 새로운 배포사이트 사용 Netlify, AWS 다음으로 GitHub Pages 를 이용해 배포하였다. 간단한 웹사이트를 올리기에 딱인거 같다. 👍 알게 된 점 평균 구하기 평균 구하는 방법을 파이썬 알고리즘을 수없이 풀면서 간단하다고 생각했다. 간과한 것이 새로 변수가 추가되면 다시 평균을 구하는 것이어서 어려움을 겪었다. reduce() 함수는 매개변수로 함수를 넣어 사용한다. reduce함수는 기존에 있는 값에 새로운 값을 계속 더할 수 있게 도와준다. 그래서 내가 반응속도를 측정하여 얻은..

🎉 성과 완성한 부분 About 다음으로 Skill 단락을 만들어서 내가 보유한 기술과 자격증을 적었다. 완성한 이유 내가 열심히 공부하고있고, 어느정도 능력을 갖추고 있다라는 것을 보여주고 싶었기때문에 만들게 되었다. ✨ 느낀 점 💢 힘들었던 점 CSS 파일의 자체적인 에러 이번에 column을 이용했지만, column이 잘 작동하지 않아 flex, wrap-flex, table으로 배치를 변경해도 변화가 없었다. 또, 이유는 모르겠지만 body태그에 background-color도 적용되지않아 내가 만든 CSS에 큰 에러가 있다는 것을 깨달았고, 무엇이 문제인지 확인하려 했지만 도저히 못찾겠어서 새로 CSS 파일을 만들기로 했다. 다시 CSS를 재 작업하였고, 그 결과 column 배치가 제대로 적용..