[3주차 기본 과제] 🌼 몰티즈를 찾아라 💖 #9

urjimyu · 2023-05-05T14:59:39Z

✨ 구현 기능 명세

😔에러 때문에 잘 구현되었는지 확인이 불가해서 시도한 부분만 체크했습니다

기본 과제

✅ `게임 난이도 선택`

1. 난이도의 종류
1. easy → 10개 :: 5쌍 맞추기
2. normal → 14개 :: 7쌍 맞추기
3. hard → 18개 :: 9쌍 맞추기
2. 난이도 중간에 바꿀시, 카드 모두 뒤집어서 처음으로 돌아가기

✅ `정답 수 노출`

1. (현재 나의 스코어) / 전체 정답 으로 상단에 노출

✅ `카드 선택`

1. 2개의 카드를 선택하면 다른 카드는 선택할 수 없습니다.

해당 카드의 일치 여부를 조사
1. 정답일 경우

1. 정답 스코어 증가
2. 카드 뒤집힌 채로 유지
1. 오답일 경우
1. 카드 다시 뒷면으로 돌리기

✅ `카드 배열 순서`

1. 카드가 배열되는 순서는 반드시 랜덤으로 지정
2. 난이도에 따라 지정되는 쌍도 랜덤으로 지정

🌼 PR Point

현재 아래 삼항연산자 부분 때문에 리렌더링이 계속되는 문제로 인해 화면을 확인할 수 없습니다. 처음에는 버튼 각각에 클릭이벤트로 넣어주는 식으로 하다가 더 깔끔하게 해보겠다고 이것 저것 바꿔봤는데 오히려 이상해진 것 같아요.

	// 선택한 레벨에 맞는 카드 개수 지정
	level === "EASY"
		? setCardNum(5)
		: level === "NORMAL"
		? setCardNum(7)
		: setCardNum(9);

현재 카드를 선택했을 때 뒤집어지면서 보여지는 부분 + 정답인지 확인해서 정답리스트에 넣는 부분 등 중요한 부분들이 구현되지 않았습니다.
마음이 급하다고 제대로 틀을 짜지 않고 코드부터 작성하는 일은 이제 정말 그만... 반성중입니다😔
어떤 기준으로 쪼개서 만드는 게 좋은지 헷갈리면서 점점 꼬였던 것 같아요. 특히 props drilling의 문제를 체감할 수 있었습니다..

🥺 소요 시간, 어려웠던 점

아마도 15시간 이상..? 리액트에 대해 좀 더 복습하고 과제를 시작했으면 나았을 것 같다고 생각했습니다.

🌈 구현 결과물

리팩토링 후에 올리겠습니다😢

…ek2/thoughts

- 삼항연산자 부분 때문에 무한루프 문제 생김

eunbeann

호딱 리펙토링해서 완성된 춘식이 카드 보고시푸요!!! 곰방 잘 완성할 것 같은데?! 졸전땜에 바쁜데 고생이 많아잉 ㅠㅠ

eunbeann · 2023-06-10T13:28:03Z

cardgame/.eslintrc.cjs

@@ -0,0 +1,16 @@
+module.exports = {


옹 언니 이런 과제에도 eslint 적용했구나!! 야무져잉

eunbeann · 2023-06-10T13:35:19Z

cardgame/src/App.jsx

+		<>
+			<MainPage />
+		</>


언니 인덴트 설정 볼 때 마다 신기하네..

ㅋㅋㅋ저거 잘못된 거 나중에 알았음ㅠ

eunbeann · 2023-06-10T13:35:47Z

cardgame/index.html

+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>


타이틀 바꿔줘잉 ~~

eunbeann · 2023-06-10T13:37:29Z

cardgame/index.html

+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>


타이틀 바꿔줘잉~~~ ❤️

eunbeann · 2023-06-10T13:38:03Z

cardgame/src/App.jsx

+	return (
+		<>
+			<MainPage />
+		</>


언니 인덴트 볼 떄 마다 신기해..

eunbeann · 2023-06-10T13:43:07Z

cardgame/src/components/Buttons.jsx

+	return (
+		<StyledLevelButton
+			type="button"
+			isClick={isClick}


이 코드 혹시 무슨 기능을 하는 것 인가요??
이 컴포넌트에만 쓰인 것 같은데 따로 하는 기능이 뭐지 모르겠어서 !!

eunbeann · 2023-06-10T13:43:53Z

cardgame/src/components/Card.jsx

+		clickedList,
+		matchedList,
+		setClickedList,
+	} = props;


Props 이렇게 내려주는 거 가독성 괜찮네! 난 맨날 괄호에 때려 박았는데 요거 리코일로 리팩하면 더 깔끔해지겟당~~

eunbeann · 2023-06-10T13:45:44Z

cardgame/src/components/LevelButtons.jsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import { LevelButton } from "./Buttons";
+const LevelButtonsWrapper = styled.div`


얘는 왜 여깃지요?? 다른 컴포넌트들 전부 컴포넌트 export 아래에 styled-component 만들었으니까
이것도 통일감있게 가는게 좋지 않을까요??

eunbeann · 2023-06-10T13:46:48Z

cardgame/src/pages/main/MainPage.jsx

+	// 레벨 버튼 누르면 카드가 초기화되어야 함
+	const resetCards = () => {
+		setScore(0);
+		// setClickedFirst(null);


주석 지워줘도 좋겠어요~~

urjimyu and others added 30 commits May 4, 2023 04:00

Merge branch 'main' of https://github.com/GO-SOPT-WEB/JiMinYu into we…

01fd58a

…ek2/thoughts

chores: 불필요한 파일 제거

1bd8e81

chores: reset css 추가

1051f02

feature: 버튼 누르면 레벨에 맞게 그리드 생성

c4f6d16

style: 버튼 스타일 설정

cf5f5f8

feature: 헤더 html 작성

09fd76c

feature: 카드 이미지 데이터 상수 파일 생성

d3f7bc7

chore: 제목 변경

9d2ea66

chore: 문법 오류 수정

1541530

chores: react 프로젝트 설정

57cf8ef

chores: 폴더 옮김

efe970e

chores: styled 사용

53a078c

feature: 버튼 컴포넌트 생성

d0a9157

feature: 메인페이지에서 동작할 것들 분리

f4f2fd6

chores: prop types 에러 해결

34e3ce4

chores: prop types 에러 해결

aa6eccf

feature: 레벨 선택에 따라 카드 개수가 달라지도록 설정

131a93b

feature: 레벨 버튼들에 클릭 이벤트 지정

1c05559

feature: header에 점수판 설정

53f1658

feature: 버튼 종류에 따라 스타일 다르게 적용

2401070

feature: App에 메인페이지 넣어줌

9c288a2

refactor: 불필요한 변수 제거

71055f2

feature: 일치여부 판단 가능하도록 matched 추가

7e51b13

feature: 게임 초기화 적용

16d36c7

feature: 조건에 맞게 카드 뿌려주기

04d1758

feature: 레벨에 맞는 개수만큼 카드 랜덤하게 뽑는 함수 분리

b60259b

chores: 삭제했던 파일 복구

4355135

feature: 리셋 버튼 기능 추가

0b85d28

feature: 카드에 이미지 넣어줌

38825a0

chores: reset 파일 추가

66256a8

urjimyu added 4 commits May 5, 2023 23:34

feature: 카드 뒤집어지도록 설정

b99649c

chores: 아직 사용 못한 부분 주석

11b328d

- 삼항연산자 부분 때문에 무한루프 문제 생김

feature: 선택한 카드와 정답 카드 리스트 추가

1f5479a

chores: 불필요한 폴더 삭제

3525614

urjimyu requested review from pinktopaz, eunbeann, Happhee, parkheeddong, Yeonseo-Jo, lydiacho and hae2ni May 5, 2023 15:00

urjimyu added the 기본과제 label May 5, 2023

urjimyu removed request for pinktopaz, eunbeann, Yeonseo-Jo, Happhee, lydiacho, hae2ni and parkheeddong May 9, 2023 04:28

eunbeann reviewed Jun 10, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[3주차 기본 과제] 🌼 몰티즈를 찾아라 💖 #9

[3주차 기본 과제] 🌼 몰티즈를 찾아라 💖 #9

urjimyu commented May 5, 2023

eunbeann left a comment

eunbeann Jun 10, 2023

eunbeann Jun 10, 2023

urjimyu Jul 2, 2023

eunbeann Jun 10, 2023

eunbeann Jun 10, 2023

eunbeann Jun 10, 2023

eunbeann Jun 10, 2023

eunbeann Jun 10, 2023

eunbeann Jun 10, 2023

eunbeann Jun 10, 2023

[3주차 기본 과제] 🌼 몰티즈를 찾아라 💖 #9

Are you sure you want to change the base?

[3주차 기본 과제] 🌼 몰티즈를 찾아라 💖 #9

Conversation

urjimyu commented May 5, 2023

✨ 구현 기능 명세

✅ 게임 난이도 선택

✅ 정답 수 노출

✅ 카드 선택

✅ 카드 배열 순서

🌼 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

eunbeann left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

✅ `게임 난이도 선택`

✅ `정답 수 노출`

✅ `카드 선택`

✅ `카드 배열 순서`