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

[eunbeann]

✨ 구현 기능 명세

• 기본 과제
  • recoil로 상태 관리
  • JSX → TSX

🌼 PR Point

import { atom } from 'recoil';
import { EasyVersion } from '../utils/ShuffledCard';

export interface CardInfo {
    alt: string;
    cardId: number;
    matched: boolean;
    src: string;
}

export const modalOnData = atom<boolean>({
    key: 'modalOnData',
    default: false,
});

export const cardsNumData = atom<CardInfo[]>({
    key: 'cardsNumData',
    default: EasyVersion,
});

export const scoreData = atom<number>({
    key: 'scoreData',
    default: 0,
});

export const nowLevelData = atom<string>({
    key: 'nowLevelData',
    default: 'EASY',
});

export const firstCardData = atom<CardInfo | null>({
    key: 'firstCardData',
    default: null,
});

export const secondCardData = atom<CardInfo | null>({
    key: 'secondCardData',
    default: null,
});

export const disabledData = atom<boolean>({
    key: 'disabledData',
    default: false,
});

• 전역적으로 쓰이는 값들은 atom으로 선언

const [animateScore, setAnimateScore] = useState<boolean>(false);

• props-drilling이 심하지 않은(거의 없는) 값들은 그냥 useState로 처리해줌!

export interface CardInfo {
    alt: string;
    cardId: number;
    matched: boolean;
    src: string;
}

interface SingleCardProps {
    card: CardInfo;
}

const SingleCard = ({ card }: SingleCardProps) => {

•••

{cardsNum && Array.isArray(cardsNum) && cardsNum.map((card) =>
 <SingleCard key={card.cardId} card={card} />)}

• Props TypeScripts 전환할 때 신경쓰기! 🥺
  • 전달하는 값이 뭔지, 필요한 값이 뭔지 따져보면서 흐름타면서 확인할 필요가 있는 것 같다.

🥺 소요 시간, 어려웠던 점

• 타입 스크립트를 처음 써봐서 감 잡는게 너무 어려웠지만 웨비들 도움으로 어떻게든 완성!!

• 타스랑 정붙일 수 있었던 과제였습니다…😎 사이좋게 지내자~

• 리코일을 좀 더 야무지게 써보려고 했는데 흠.. 아직은 좀 더 연습해보는 걸로

🌈 구현 결과물

[urjimyu]

과제하느라 넘넘 고생 많았어!! 세미나에서 배운 내용 최대한 많이 써보려고 한 고민의 흔적이 보인다! 특히 리코일 열심히 쓰려고 한 게 느껴졌어☺️ 수고했어!!

[urjimyu]

location 쓰는 것도 신기하다! 아예 URL 정보를 가져와서 새로고침 했구나! 야무지구만!

[urjimyu]

atoms 진짜 적극적으로 쓰려고 한 게 보여서 좋다! 나는 두 개만 지정해서 하고 있었는데 은빈이처럼 더 많이 써봐야겠다! 최고최고

[urjimyu]

EasyVersion만 100을 곱한 이유가 궁금하당!

[eunbeann]

아 이거 ㅋㅋㅋ id 값이 왕 소수로 나오니까 콘솔에서 보기에 조금 복잡시러운 것 같아서 그렇게 했는데 사실 id 값은 완전 내부값이라 의미가 없는 것 같아서 시도했다가 관둔 흔적입니다..
통일성있게 고치기... ~~!! ㅠㅠ