[7주차 과제] 3주차 과제 리팩토링

[simeunseo]

🔗 배포 페이지

✨ 구현 기능 명세

• jsx → tsx 로 모두 변환해주세요!
• recoil로 카드 게임에서 필요한 상태를 관리해주세요!

🌼 PR Point

• Recoil

  기존에 contextAPI로 관리하고있었던 레벨과 점수를 levelState와 scoreState라는 recoilState로 관리했습니다!

  export const levelState = atom<string>({
    key: "levelState",
    default: "easy",
  });

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

• Typescript

  여려군데에 사용되는 타입은 따로 밖에 정의해주었습니다. 근데 여러군데 사용되는게 요거밖에 없었네용...

  export interface CardData {
    pk?: number;
    imgId?: number;
  }

• Trouble Shooting

  • 이미지 사용과 관련된 에러메시지

    

    이 자료를 통해 해결 했는데, src 폴더에 custom.d.ts 파일을 만들어서 아래와 같이 지정해줌으로써 해결됐습니다.

    declare module "*.png";
    declare module "*.gif";
    declare module "*.mp3";

  • event를 사용할 때 type 지정

    event를 사용하는 지점에서 이런 오류가 있었어요!
    
    이 자료를 통해 해결 했는데, event의 type과 target의 타입을 분리시켜 지정해주면 해결이 됩니다.
    <기존>

    onLoadStart={(e: React.SyntheticEvent<HTMLAudioElement, Event>) => {
      const e.target.volume = 0.01;
    }}

    <변경>

    onLoadStart={(e: React.SyntheticEvent<HTMLAudioElement, Event>) => {
      const target = e.target as HTMLAudioElement;
      target.volume = 0.01;
    }}

🥺 소요 시간, 어려웠던 점

• 4.5h
• 합세에서 타스를 빡세게(?) 연습했었터라.. 그리고 뭔가 예상치 못한 오류가 나오는 일은 없어서 착착착 type을 잘 붙일 수 있었습니다!!!
• 근데 사실 ㅠㅠ 기존 코드의 전체적인 구조라든가, card 관련 배열들 prop drilling 하는거라든가 아쉬운 부분이 매우매우 많았는데 시험기간 이슈로 시간을 많이 내지 못했습니다.... 너무너무너무너무너무아쉬워요ㅠㅠ 흑흑
• 그래서 리뷰는 리팩토링을 좀 더 진행한 다음에 받고싶어서... 조금만 기다려주세요 금잔디들 ❤️‍🔥

🌈 구현 결과물

🔗 배포 페이지

236503303-f3fc4d08-50e9-473f-94b7-92568d95c6c5.mp4