[ 7์ฃผ์ฐจ ๊ณผ์ ] ๐ฃ ์นด๋๊ฒ์ TypeScript ์ ํ ๐ฃ #21
Conversation
Week4/search weather
| modalOpenAtom, | ||
| } from "../atoms/atom"; | ||
|
|
||
| const ModalWrapper = styled.div` |
There was a problem hiding this comment.
styled components ์ฌ์ฉํ ๋๋ ์ฐ๋ฆฌ๊ฐ ์ฒ์์ ๋ชฉํํ๋ '์๋งจํฑ ํ๊ทธ' ์์ง๋ง์!!
| margin-top: 2rem; | ||
| padding: 1rem; | ||
| border: none; | ||
| background-color: palevioletred; | ||
| color: white; | ||
| font-weight: 600; | ||
| cursor: pointer; |
There was a problem hiding this comment.
์ฐ๋ฆฌ ๊ณง ์น์ผํ๋๊น ๋๋ถ๋ถ์ ์จ๋น๋ค์ด ์ฑํํ๋ ์ปจ๋ฒค์ ์ธ css ์์ ์งํค๊ธฐ & ๊ฐํ์ผ๋ก ๋ถ๋ฅํด์ฃผ๊ธฐ๋ฅผ ๋์ ์ฐ์ตํด๋๋ฉด ์ข์ ๊ฒ ๊ฐ๋ด. ์ํํํฉ์๋ค!
| const Confetti = styled.div` | ||
| position: absolute; | ||
| top: -1rem; | ||
| left: ${() => Math.random() * 1000}rem; |
There was a problem hiding this comment.
์ผใ ใ ใ ์ด๋ฐ์์ผ๋ก ๋ฟ๋ ค์ฃผ๋๊ตฌ๋
| const setDifficultyFn = useSetRecoilState(difficultyAtom); | ||
| const setMatchingCardsArr = useSetRecoilState(matchingCardsAtom); | ||
| const setMatchedCardsArr = useSetRecoilState(matchedCardsAtom); |
There was a problem hiding this comment.
์๊ธฐ Recoil ์ธํฐ๋ค๋ ํ์ ์ง์ ํด์ฃผ์!! useSetRecoilState<ํ์ >(~) ์ด๋ฌ์ผ
| /** ๋ชจ๋ฌ ์ด๊ณ ๋ซ๋ useState */ | ||
| const setIsModalOpen = useSetRecoilState(modalOpenAtom); |
There was a problem hiding this comment.
useRecoilState ์ ๋ค๋ผ๋ฆฌ ํจ์ ์๋จ์ ๋ญ์ณ๋๋ฉด ์ข์๊ฑฐ๊ฐํ!
| const reRandomCardList = setRandomCardList( | ||
| setRandomCardList(setRandomCardList(setRandomCardList(gamePokemonList))) | ||
| ); |
There was a problem hiding this comment.
ํใ ใ ใ ใ setRandomCardList ํจ์ ๋ด์์๋ ๋๋ค์ ๋๋ฒ์ด๋ ํด์ฃผ๋๋ฐ ๋ค๋ฒ์ด๋ ์คํํด์ค์ผํ๋ ์ด์ ๊ฐ ์์๊น?? ๋ถํ์ํ ํจ์ ์คํ์ ์์๋ฒ๋ฆฌ์ง ์์์ง?-?
| @@ -0,0 +1,76 @@ | |||
| export const POKEMON_LIST = [ | |||
There was a problem hiding this comment.
์ธํฐํ์ด์ค๋ก ์ ๋ฐฐ์ด๋ฐ์ดํฐ ํ์ ๋ ์ง์ ํด์ฃผ๋ฉด ์ข์๊ฑฐ๊ฐํ!
| @@ -0,0 +1,42 @@ | |||
| import { atom } from "recoil"; | |||
|
|
|||
| export const darkModeAtom = atom({ | |||
There was a problem hiding this comment.
์๋ค๋ ํ์ ์ง์ ํด์ฃผ์!
| export const darkModeAtom = atom({ | |
| export const darkModeAtom = atom<boolean>({ |
| currentDifficulty: string; | ||
| } | ||
|
|
||
| interface DifficultyButtonProps extends DifficultyBtnWrapperProps { |
There was a problem hiding this comment.
์ค extends๊น์ง ์ฌ์ฉ ใ ใ ใ ใ ์ธ๋ฏธ๋์์ ๋ฐฐ์ด๊ฑฐ ์ผ๋ฌด์ง๊ฒ ํ์ฉํ๋๋ฐ??
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
div ๊ฐ๊ธฐ๊ธฐ ๋ฉ์ถฐ์ด์ดใ ใ ์ด์ด์ด์ด์
| import { RecoilRoot, useRecoilValue } from "recoil"; | ||
| import { darkModeAtom } from "./atoms/atom"; | ||
|
|
||
| const GlobalStyle = createGlobalStyle` |
There was a problem hiding this comment.
๊ธ๋ก๋ฒ ์คํ์ผ์ ๋ฐ๋ก styleํด๋๋ฅผ ๋ง๋ค์ด์ ๋ฃ์ด์ฃผ๋ฉด ์ข์ ๊ฒ ๊ฐ์์ฉ~!
|
|
||
| overflow: scroll; | ||
| overflow-x: hidden; | ||
| background-color: ${(props) => props.theme.bgColor}; |
There was a problem hiding this comment.
| background-color: ${(props) => props.theme.bgColor}; | |
| background-color: ${({theme}) =>theme.bgColor}; |
์ด๋ ๊ฒ๋ ์ธ ์ ์์ ๊ฒ ๊ฐ๋ค์ฉ
| {howManyCorrect} /{" "} | ||
| { | ||
| { | ||
| Easy: "5", | ||
| Normal: "7", | ||
| Hard: "9", | ||
| }[currentDifficulty] | ||
| } |
| } | ||
|
|
||
| interface DifficultyButtonProps extends DifficultyBtnWrapperProps { | ||
| children: React.ReactNode; |
There was a problem hiding this comment.
์ค ์น ๋๋ฐ์ ํ์ ์ด ์ด๋ ๊ฒ ์ฐ์ด๋๊ตฐํ!! ๋ฐฐ์๊ฐ๋๋ค~
| `; | ||
|
|
||
| interface CardProps { | ||
| Primarykey: number; |
There was a problem hiding this comment.
์ด ๋ณ์๋ ์ ๋๋ฌธ์๋ก ์์ํด์ฉ???
โจ ๊ตฌํ ๊ธฐ๋ฅ ๋ช ์ธ
1๏ธโฃ jsx โ tsx ๋ก ๋ชจ๋ ๋ณํํด์ฃผ์ธ์! โ๏ธ
2๏ธโฃ recoil๋ก ์นด๋ ๊ฒ์์์ ํ์ํ ์ํ๋ฅผ ๊ด๋ฆฌํด์ฃผ์ธ์! โ๏ธ
๐ผ PR Point
1๏ธโฃ ๋ชจ๋ ํ๋กญ ๋๋ฆด๋ง์ ์ ๊ฑฐํ์์ต๋๋ค.
2๏ธโฃ Recoil ๋ก ์ ์ญ์ํ๊ด๋ฆฌ๋ฅผ ์งํํ์์ต๋๋ค.
3๏ธโฃ Atom ์๋ interface ๋ฅผ ์ง์ ํด์ฃผ์์ต๋๋ค.
4๏ธโฃ interface Card ๋ฅผ ์ง์ ํด์ฃผ์์ต๋๋ค.
5๏ธโฃ ์นด๋ ๋งค์นญ interface ๋ฅผ ์ง์ ํด์ฃผ์์ต๋๋ค.
๐ฅบ ์์ ์๊ฐ, ์ด๋ ค์ ๋ ์
5h๐ ๊ตฌํ ๊ฒฐ๊ณผ๋ฌผ