[3주차 기본 과제] 1 to 50 게임 #4
Conversation
| import styled from "styled-components"; | ||
| import Button from "../button/Button"; | ||
| import Dropdown from "../dropDown/Dropdown"; | ||
| import { useLocation, useNavigate } from "react-router-dom"; |
There was a problem hiding this comment.
useLocation이랑 useNavigate는 처음 봤는데, 페이지를 이동하면서 state 값을 전달하고 데이터를 전달 받는 것이군요..! 새로운 것 알아갑니다!👍
| const onClickGameBtn = () => { | ||
| navigate("/"); | ||
| }; | ||
| const onClickRankBtn = () => { | ||
| navigate("/ranking"); | ||
| }; |
There was a problem hiding this comment.
랭킹 페이지를 누르면 주소 뒤에 "/ranking"이 뜨는데, 게임 페이지를 누르면 왜 "/"가 안 뜨는지 궁금합니다...!!
| onClick={() => handleCardClick(number, index)} | ||
| /> | ||
| ) : ( | ||
| <EmptyCard key={index} /> |
There was a problem hiding this comment.
저는 visibility 속성을 사용해서 두 번째 선택된 카드를 클릭하면 카드가 hidden 되게 하려다... 효과가 안 먹혀서 포기했는데, 빈 카드를 만드는 방법도 있었네요!! 코드 반영 때 참고하겠습니당🧐🙇♀️
| {records.map((record, index) => ( | ||
| <TableRow key={index}> | ||
| <TableData>{record.currentTime}</TableData> | ||
| <TableData>Level {record.level}</TableData> | ||
| <TableData>{record.gameTime}초</TableData> | ||
| </TableRow> |
There was a problem hiding this comment.
리액트의 key에 관해 검색하다가 알게 되었는데, key에 index값을 부여하면 배열 데이터가 변경 되었을 때 성능이 떨어질 수 있어 사용하지 않는 것이 좋다고 합니다..! (아니면 혹시 특별한 이유가 있는 것일까요..?!?🤔)
|
|
||
| const Mainpage = () => { | ||
| const [time, setTime] = useState(0); | ||
| const timerRef = useRef(null); |
There was a problem hiding this comment.
useRef도 처음 보는데..~ useRef를 사용해서 변수를 선언하면 리렌더링 없이 값을 유지할 수 있네요..!!! 새로운 것 또또 알아갑니당...ㅎ..ㅎ
| @@ -0,0 +1,22 @@ | |||
| import styled from "styled-components"; | |||
| import Header from "../components/header/header"; | |||
| const getCardSettings = (level) => { | ||
| switch (level) { | ||
| case 1: | ||
| return { | ||
| gameSize: 3, | ||
| middleNum: 9, | ||
| hideEndNum: 18, | ||
| }; | ||
| case 2: | ||
| return { | ||
| gameSize: 4, | ||
| middleNum: 16, | ||
| hideEndNum: 32, | ||
| }; | ||
| case 3: | ||
| return { | ||
| gameSize: 5, | ||
| middleNum: 25, | ||
| hideEndNum: 50, | ||
| }; | ||
| default: | ||
| return { | ||
| gameSize: 3, | ||
| middleNum: 9, | ||
| hideEndNum: 18, | ||
| }; | ||
| } | ||
| }; |
There was a problem hiding this comment.
레벨 별로 다른 화면 설정을 반환할 때 switch문을 사용한 것 너무 좋은 것 같습니다!
| const gameData = { | ||
| currentTime: currentTime, | ||
| level: level, | ||
| gameTime: time, |
There was a problem hiding this comment.
여기서 프로퍼티 이름이랑 변수 이름이 동일하기 때문에 currentTime이랑 level은 더 간단하게 줄일 수 있을 것 같습니다..!
const gameData = { currentTime, level, gameTime:time }
일부러 형식을 통일하려고 한 것이라면..!!! 죄송합니닿ㅎ😳😅
✨ 구현 기능 명세
💡 기본 과제
18까지 클릭해야한다면, 처음에는 19까지의 숫자가 랜덤으로 보여짐현재 시각,게임의 레벨,플레이 시간3개의 정보를 localStorage에 저장 (랭킹에서 사용)🔥 심화 과제
Level 1:
3 x 3, Level 2:4 x 4, Level 3:5 x 5createPortal
공유과제
제목:
링크 첨부 :
❗️ 내가 새로 알게 된 점
❓ 구현 과정에서의 어려웠던/고민했던 부분
🥲 소요 시간
1d🖼️ 구현 결과물
Screen.Recording.2024-11-05.at.11.27.34.PM.mov
기본 뷰
Screen.Recording.2024-11-05.at.11.29.09.PM.mov
게임 구현
심화 과제 추가본
Screen.Recording.2024-12-18.at.7.47.06.PM.mov