[ 7주차 기본 과제 ] 카드게임 리팩토링

[seojisoosoo]

✨ 구현 기능 명세

1️⃣ jsx → tsx 로 모두 변환해주세요!

2️⃣ recoil로 카드 게임에서 필요한 상태를 관리해주세요!

🌼 PR Point

type/cardType.ts

• props의 인터페이스나 함수 안에 들어가는 인터페이스는 컴포넌트 안에서 바로 선언해주었어요, 어떤 타입인지 바로 알아볼 수 있도록 하기 위함이었는데요, 만일 두 번 이상 사용되는 타입이라면 따로 타입 폴더로 빼서 만들었습니다!

export interface cardType {
  name: string;
  img: string;
}

export interface idxType {
  idx: number;
}

export interface selectCardType extends idxType {
  selected: boolean;
}

recoil/card.tsx

• 카드 레벨과 리셋 여부를 리코일 아톰으로 사용했어요!
• 특별히 리코일로 변경시키거나 데이터를 패칭하는 과정은 없어서 셀렉터를 이용하기 보다는 전역변수 사용을 위한 아톰을 사용하는 것이 적절하다고 판단했습니다!

import { atom } from 'recoil';
import { levelType } from '../core/levelType';

export const cardsLevel = atom({
  key: 'cardsLevel',
  default: levelType.EASY,
});

export const cardsReset = atom({
  key: 'cardsReset',
  default: false,
});

common

• 스타일드 컴포넌트에서 props를 내려주면 잘 작동되지만 위와 같은 props warning이 날 때가 많습니다! 그래서 Transient props($)를 이용해 warning이 나는 것을 막아주었어요.
  ${({ $isReverse }) => $isReverse && 180}

• 사실 타입스크립트는 자동으로 타입을 인식하는 친구이기 때문에, 그러한 특징을 활용하고 싶어서 useState에서 초기값을 설정해준 경우 등, 타입을 자동으로 잘 인식하는 부분의 경우는 타입 명시를 생략했어요!

🥺 소요 시간, 어려웠던 점

• 2h

🌈 구현 결과물

https://youtu.be/naI35EoQvEs

[Chanwoo-Jeong]

솔직히 ts 저 응앱니다 많이 배워갑니데이

[Chanwoo-Jeong]

옹 모달이나 카드는 프롭으로 유지했구나?

[Chanwoo-Jeong]

크 levelType.EASY

[Chanwoo-Jeong]

$ 붙여주는 건 뭔지 궁금해요!