[3주차-ts] 이상형월드컵 자스👉타스 #6
Conversation
| return ( | ||
| <> | ||
| <GlobalStyle/> | ||
| <Game/> |
There was a problem hiding this comment.
<ThemeProvider theme={theme}>theme도 적용해봤으면 좋겠구! GlobalStyle은 components폴더가 아니라 styles 폴더가 따로 있어야 할것같아!
src/components/GameImg.tsx
Outdated
| interface Img{ | ||
| src:string; | ||
| title:string; | ||
| onClick:React.MouseEventHandler<HTMLDivElement>; | ||
| } |
There was a problem hiding this comment.
interface 명이 조금더 정확했슴 좋겠어! 뭔가 태그명으로 <Img>가 있으니까?! ImgProperty라던가~.~
There was a problem hiding this comment.
interface 명이 조금더 정확했슴 좋겠어! 뭔가 태그명으로
<Img>가 있으니까?! ImgProperty라던가~.~
앗 맞네 그냥 이미지 관련이라 이렇게 지었는데 그게 더 명확하겠다~! 의견 고마오!
| declare module "*.jpg"; | ||
| declare module "*.png"; | ||
| declare module "*.jpge"; | ||
| declare module "*.gif"; |
There was a problem hiding this comment.
custom.d.ts도 네이밍이 명확하지는 않은것같아!
customImg.d.ts 도 나쁘지는 않은듯!
| const [fighterList, setFighterList] = useState<Icecream[]>([]); //처음에 세팅되는 모든 참가자 배열 | ||
| const [winners, setWinners] = useState<Icecream[]>([]); //해당 라운드 승리자 저장 배열 | ||
| const round = useRef<number>(1); //지금 진행한 경기 횟수 | ||
| const [gameEnd, setGameEnd] = useState<boolean>(false); //게임이 끝났는지 여부 | ||
| const remain = useRef<number>(0); //남아있는 경기 횟수 | ||
| const [realWinner, setRealWinner] = useState<Icecream>({img:"",name:""}); //최종 승리자 |
src/pages/Game.tsx
Outdated
| export interface Icecream{ | ||
| img:string; | ||
| name:string; | ||
| } |
There was a problem hiding this comment.
export 를 component에서 하는 것보다 따로 type폴더를 만들어서 선언해주면 더 조을것가타!
There was a problem hiding this comment.
export 를 component에서 하는 것보다 따로 type폴더를 만들어서 선언해주면 더 조을것가타!
호곡 마저,, 사실 고칠 때 저 interface 를 어느 컴포넌트에 적어놨는지 헷갈려서 이리저리 헤맸는데,, 왜 이 생각을 못했지?!?!?!??! 당장 고쳐야지,,
src/pages/Result.tsx
Outdated
| import 왕관 from "../img/왕관.png"; | ||
| import { Icecream } from './Game'; |
There was a problem hiding this comment.
그렇게 데면 요기서 Icecream을 Game에서 불러오는게 아니라 type 에서 불러오게찌?
src/pages/Result.tsx
Outdated
| function Result( { winner} :IcecreamProps) { | ||
| return ( | ||
| <ResultContainer> | ||
| <p style={{ fontSize: "1.5rem" }}>우승자!</p> | ||
| <h1 style={{ fontSize: "3rem", fontWeight: "bold" }}>{winner.name}</h1> | ||
| <Winner>우승자!</Winner> | ||
| <WinnerName>{winner.name}</WinnerName> |
There was a problem hiding this comment.
요사이에
| function Result( { winner} :IcecreamProps) { | |
| return ( | |
| <ResultContainer> | |
| <p style={{ fontSize: "1.5rem" }}>우승자!</p> | |
| <h1 style={{ fontSize: "3rem", fontWeight: "bold" }}>{winner.name}</h1> | |
| <Winner>우승자!</Winner> | |
| <WinnerName>{winner.name}</WinnerName> | |
| function Result( { winner} :IcecreamProps) { | |
| const { name, img } = winner | |
| return ( | |
| <ResultContainer> | |
| <Winner>우승자!</Winner> | |
| <WinnerName>{name}</WinnerName> |
구조분해 할당도 사용가능하다는거!-!
There was a problem hiding this comment.
요사이에
구조분해 할당도 사용가능하다는거!-!
훨씬 깔끔하다!! 요렇게 수정 완료~~~
➰이상형월드컵 - TS➰
일단 돌아가긴 하는데 여태 스터디한 자료 왔다갔다 하면서 해가지구 하나 둘 엉성하거나 빠트린 게 있을 것 같은 느낌인데 한 번 봐주십셔