[3주차 기본/심화/공유 과제] 1 to 50 게임 #4
Conversation
| const Button = ({ variant, isSelected, onClick, customStyle, children }) => { | ||
| return ( | ||
| <button | ||
| css={[buttonStyle(isSelected), variantStyle[variant], customStyle]} |
| import { css } from "@emotion/react"; | ||
| import { Theme } from "../../styles/theme"; | ||
|
|
||
| export const buttonStyle = (isClicked) => css` |
| @@ -0,0 +1,37 @@ | |||
| import useMakeGame from "@hooks/useMakeGame"; | |||
There was a problem hiding this comment.
오호,, 훅도 따로 파일을 만들어서 관리할 수 있군요,,
이렇게 따로 떼는건 한 파일에서 너무 복잡해질때만 쓰면 될까요??
| {boardNumbers.map((number, i) => ( | ||
| <NumberCard | ||
| key={i} | ||
| id={`card-${number}`} | ||
| onClick={() => handleNumberClick(number)} | ||
| > | ||
| {number} | ||
| </NumberCard> | ||
| ))} |
| const shuffleArray = (array) => { | ||
| return array.sort(() => Math.random() - 0.5); | ||
| }; |
There was a problem hiding this comment.
영경이 코드에도 작성하긴 했는데
저도 sort()를 사용해서 랜덤하게 섞긴 했지만 Fisher-Yates Shuffle을 써서 구현하는 방법도 있다고 해요오
배열의 마지막 요소부터 순차적으로 무작위 위치에 있는 요소랑 교환해가지고 섞는 방법인데 배열의 크기가 커져도 효율적이고 더 빠르고 무작위성을 보장한다고 합니댜!
| import { Global, ThemeProvider } from "@emotion/react"; | ||
| import GlobalStyle from "./styles/global"; | ||
| import { Theme } from "./styles/theme"; | ||
| import Home from "@pages/Home/Home"; |
There was a problem hiding this comment.
Global과 ThemeProvider를 이렇게 사용한다는 걸 알 수 있었어요!!!
리액트에서 페이지와 컴포넌트를 @pages, @components로 받아오는 건가요???
찾아보니까 라우터..? 랑은 다른 것 같은데 파일 구조로 import하지 않고 이렇게 받아오는 이유가 궁금합니다
| return shuffleArray(numbers); | ||
| }; | ||
|
|
||
| const useMakeGame = (level, time, handleTimeChange) => { |
There was a problem hiding this comment.
저는 레벨별로 칸 수나 종료 숫자 등을 각각 지정해줬는데, level+2 나 row를 이용해 사이즈를 지정해서 동적으로 적용시키는게 좋은 것 같아요.
저는 문제 의도와는 다르게 정적으로 값을 할당해버린 것 같네요ㅠㅠ
| clickedCard.classList.remove(`card-${currentNumber}`); | ||
| setCurrentNumber(currentNumber + 1); | ||
| } | ||
| }; |
There was a problem hiding this comment.
레벨별로 숫자에 따른 처리도 이렇게 생각할 수 있다는걸 배워갑니당
| {boardNumbers.map((number, i) => ( | ||
| <NumberCard | ||
| key={i} | ||
| id={`card-${number}`} | ||
| onClick={() => handleNumberClick(number)} | ||
| > | ||
| {number} | ||
| </NumberCard> | ||
| ))} |
| @@ -0,0 +1,37 @@ | |||
| import useMakeGame from "@hooks/useMakeGame"; | |||
There was a problem hiding this comment.
오호,, 훅도 따로 파일을 만들어서 관리할 수 있군요,,
이렇게 따로 떼는건 한 파일에서 너무 복잡해질때만 쓰면 될까요??
✨ 구현 기능 명세
💡 기본 과제
18까지 클릭해야한다면, 처음에는 19까지의 숫자가 랜덤으로 보여짐현재 시각,게임의 레벨,플레이 시간3개의 정보를 localStorage에 저장 (랭킹에서 사용)🔥 심화 과제
Level 1:
3 x 3, Level 2:4 x 4, Level 3:5 x 5createPortal
공유과제
제목: useEffect, 클린업 함수, useLayoutEffect, useRef
링크 첨부 : https://wave-web.tistory.com/95
❗️ 내가 새로 알게 된 점
card-${number}를 줬습니다. 이후 클릭했을 때 해당 id를 가진 카드에게clicked라는 클래스를 추가해주었습니다.이때 레벨을 바꿔서 새로운 게임을 만들거나, 게임을 끝까지 완료한 후 새로운 게임을 만들 때 이를 초기화 하는 과정에서 모든 카드에서
clicked라는 클래스를 제거하기 위해이러한 방식으로 모든 카드들을 선택하고 clicked라는 클래스를 지워줬습니다. 학교 수업에서나 배웠던
^=선택자를 사용해보니 좀 신기하네요.@emotion/react라이브러리만으로 가능했는데 왜인지 모르겠지만 js환경에서는 에러가 발생해서@emotion/babel-plugin라이브러리를 따로 설치하여vite.config.js파일에서 설정해줬더니 에러를 해결하긴 했습니다.❓ 구현 과정에서의 어려웠던/고민했던 부분
컴포넌트, 커스텀훅과 같은 것들을 다른 파일에서 import할 때 경로를 @로 시작하는 절대경로로 가져오기 위해서
jsconfig.json,vite.config.js파일 등을 수정하는 과정에서 여러가지 어려움이 많았습니다. 두 파일 중 하나의 파일에서 뭔가 잘못하면 경로설정이 안되면서 에러가 뜨고, 현재는 절대경로로 호출이 가능은 하지만 자동완성이 잘 안돼서 완전하지 못한 것 같아요. 좀 찾아보니 typescript로는vite-tsconfig-paths와 같은 라이브러리를 사용하는 등의 방식으로 구현이 가능한데 javascript로는 한계가 좀 있는것 같습니다.게임을 실행하여 현재 타이머가 흘러가고 있는 도중에 레벨을 변경하면 타이머도 초기화 되고, 새로운 게임이 생성되도록 구현하는 부분에 있어서 level이 변경되는것을 커스텀훅에서 감지는 하지만 리렌더링이 일어나지 않는 부분에서 어려움이 있었습니다.
현재는 useEffect를 사용하여 level의 변화를 감지하고, 게임 및 시간을 초기화 시켜주는 로직을 넣어놨는데 다른 방법이 있을지 궁금합니다..
디자이너가 준 피그마 없이 하려니까 참 어렵네요
🥲 소요 시간
30h🖼️ 구현 결과물
과제 구현 결과물