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

🎉 성과 완성한 부분 flex-flow를 이용하여 정렬하기 사각형을 감싼 상자 360px로 고정하기 사각형 개수 변화때마다 사각형 크기 조절 ✨ 느낀점 👍 알게 된 점 사각형 개수 변할때마다, 사각형 크기 조절 사각형을 flex-wrap하기위해 계산식에 사용할 row변수를 1로 지정한다. 그리고 초기 사각형 크기로 176px을 지정한다. 색깔이 같은 사각형과 다른 색깔을 가진 사각형의 style에 boxsize 변수를 넣는다. 사각형 크기는 BoardCalculate 함수를 이용해 계산한다. 계산한 값을 setBoxsize를 이용해 동기화한다. BoardCalculate 함수에 사용되는 row변수값은 사각형의 개수(변수 count)가 변화하면 +1씩 더한 값을 가진다.

🎉 성과 완성한 부분 15초 시간제한 기능 다시 구현하기(setTimeout → setInterval) 색깔 다른 사각형 클릭시 스테이지 +1, 시간 15초로 초기화, 점수 Math.pow(stage, 3) * 남은시간 색깔 같은 사각형 클릭시 시간 3초 감소 ✨ 느낀점 👍 알게 된 점 setInterval을 사용하여 15초 제한 다시 구현 useEffect 함수는 timer가 변경될때마다 실행이 되는데, 이를 통해 time함수가 실행되어 1초씩 감소하게된다. 그러나 강제로 시간을 15초로 초기화하니, time()함수가 2번이 실행되어서 15초 -> 13초 -> 11초 ... 2초씩 감소하게 되었다. 그래서 setTimeout을 버리고, setInterval을 사용하게 되었다. 근데, setInterva..

도전을 즐겁게, 넘블 No Humble, We Numble! www.numble.it 👩‍💻 이 프로젝트로 정한 이유 스스로 React에 대해 잘모른다고 생각했기때문에 추가적인 토이 프로젝트를 진행하겠다고 생각했다. 혼자서 프로젝트를 하는것은 의욕이 나지않는다고 생각해 인터넷을 통해 함께 프로젝트를 진행하는게 있는지 찾아보았다. 넘블이라는 사이트에서 React를 활용해 다른 색깔 찾기 게임을 제작하는 프론트엔드 개발자 챌린지가 있다는 것을 알게되었고, 오늘부터 진행하게 되었다. 특이한 점은 아무런 교육이나 강의가 없고, 조건과 힌트만 주어진 상태에서 혼자서 프로젝트를 개발하는 것이다. 🎉 성과 완성한 부분 15초 시간제한 기능 구현하기 0초 되었을때, 게임종료가 되었다는 메시지 띄우기 사각형의 색상을 랜..

🎉 성과 완성한 부분 1. 포트폴리오 웹사이트에 프로젝트를 등록했다. 2. jQuery로 구현한 내비게이션 바를 JavaScript로 구현했다. 완성한 이유 1. 트위터 클론코딩 개발이 끝났기 때문에, 프로젝트 단락 부분에 추가했다. 2. 네비게이션바를 구현하기 위해 jQuery를 이용했는데, 웹사이트가 실행되자마자 메뉴 버튼을 누르면 내가 원한 위치랑 다르게 이동하게 되어서, 고치게 되었다. ✨ 느낀 점 👍 알게 된 점 JavaScript를 이용하여 버튼 클릭하면 부드럽게 해당 위치로 이동시키기 버튼에 해당되는 id를 querySelector로 가져와 homebtn변수의 값으로 넣는다. 이동시키고 싶은 위치의 태그의 id값을 querySlector로 가져와 homescroll변수의 값으로 넣는다. 버튼..