🎉 성과 완성한 부분 자바스크립트 → 타입스크립트 완성한 이유 넘블 챌린지의 개발 조건 중 하나는 자바스크립트 대신 타입 스크립트로 코드를 작성하는 것이다. 따라서 이를 수행하기 위해 타입스크립트로 변환했다. ✨ 느낀 점 👍 알게 된 점 타입스크립트에서 CSS Module 사용하기 1. 터미널에 밑의 코드 입력(CSS Module 기능 설치) npm install -D typescript-plugin-css-modules 2. tsconfig.json 파일에 밑의 코드 입력 3. scr 폴더에 global.d.ts 파일 생성 후 밑의 코드 입력 여기까지 진행완료하면 CSS Module을 사용할 수 있게 된다. 인수 타입 설정하기 문자열을 숫자로 변환시켜주는 함수, 인수타입 문자열로 바꾸기 처음에 에러가 ..

🎉 성과 완성한 부분 컴포넌트 별 파일 분리 완성한 이유 React의 꽃은 재사용이 가능하다는 점이다. 이를 위해, HTML에서 호출되는 App.js파일은 컴포넌트만 불러오도록 하여 깔끔하게 정리하고, 컴포넌트의 각 기능별로 파일을 나누어 폴더 안에 저장하였다. ✨ 느낀 점 ❗ 보완할 점 자바스크립트 → 타입스크립트 넘블 챌린지의 조건은 자바스크립트 대신 타입 스크립트로 코드를 작성하는 것이다. 조금 걱정이 되는 게 타입 스크립트를 한 번도 배워보지 않았던 것이다. 다만, 다행히도 예전에 배웠던 코틀린 문법과 비슷하게, 해당 변수(?)가 받는 인자가 숫자(let a : number)인지 문자(let a : string)인지 체크하는 용도인 거 같다. 내일이 마지막 제출 날인데, 내일 타입 스크립트로 작성..

🎉 성과 완성한 부분 남은 시간이 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..