๋งค์ผ 1 ~ 2์๊ฐ ์ ๋์ฉ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ค๋ณด๋ ํ๋ฃจ๋์ ์ ๋ฆฌํ ๊ฒ ๋ง์ง ์๊ณ , ์งํ ์ํฉ์ ํ๋์ ๊ธ ์์ ๋ณด๋ ๊ฒ์ด ํ๋ฆ ํ์ ์ ๋ ์ฉ์ดํ ๊ฒ์ด๋ผ ์๊ฐ์ด ๋ค์ด 3์ผ์น ๋ชจ์ ์ ๋ฐ์ดํธ ํฉ๋๋ค. ํ์์ ์ธ ๊ธฐ๋ฅ ๊ตฌํ์ ๋ง๋ฌด๋ฆฌํ๊ณ ์๋ง ๋ค์ ์ฃผ์ฏค์ด๋ฉด CSS๊น์ง ๊ฑฐ์ ๋ค ์์ฑ๋์ง ์์๊น ํฉ๋๋คใ ใ ใ
10 / 13 (Wed)
Play
๊ฒ์ ์งํ ์ํฉ์ ์คํฌ๋กค ์์ด ํ ํ์ด์ง ์์ ๋ณผ ์ ์๋๋ก flex ์ฌ์ฉ
์ ๋ต์ ํด๋ฆญํ ๊ฒฝ์ฐ useState(setScore)๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ +1
๊ฒ์์ ์์ํ ์งํ์ ๊ฒฝ์ฐ(score = 0)๋ฅผ ์ ์ธํ๊ณ
setTimeout์ ์ฌ์ฉํ์ฌ delay ์๊ฐ๋งํผ ๊ฐ ์ธ๋ฌผ์ด ์ธ์ ํ์ด๋ฌ๋์ง๋ฅผ ๋ณด์ฌ์ค ํ ๋ค์ ๋ผ์ด๋๋ก ๋์ด๊ฐ๋๋ก ๊ตฌํ
10 / 14 (Thu)
People
์ ์ ๊ฐ ์ด๋ฏธ์ง๋ฅผ ํ๋ฒ ํด๋ฆญํจ์ผ๋ก์จ ํ๋์ ๋ผ์ด๋๊ฐ ๋๋ฌ์์๋ ๋ค์ ๋ผ์ด๋๋ก ๋์ด๊ฐ๊ธฐ ์ ๊น์ง ํด๋ฆญํ ํ์๋งํผ score๊ฐ ์ฌ๋ผ๊ฐ๋ ๋ฌธ์ ํด๊ฒฐ
์ผํญ์ฐ์ฐ์ ์ฌ์ฉํ์ฌ header์ Boolean ๊ฐ์ ๋ฐ๋ผ onClick ์ด๋ฒคํธ ์ ์ฉ ๋ฌ๋ฆฌ ํ๊ฒ ํจ
Play
๊ฒ์ ์์ํ ์งํ์ ์๋ ๊ฒฝ์ฐ๋ก ๋๋์ด setTimeout์ delay์ ์ผํญ์ฐ์ฐ์๋ฅผ ์ ์ฉํจ์ผ๋ก์จ ์ค๋ณต๋๋ ์ฝ๋ ๊ฐ๊ฒฐํ
End
App ์ปดํฌ๋ํธ์์ End ์ปดํฌ๋ํธ๋ก props๋ฅผ ํตํด score ๊ฐ ์ ๋ฌ
์ค๋ต์ ํด๋ฆญํ ๊ฒฝ์ฐ End ์ปดํฌ๋ํธ๋ก ๋์ด๊ฐ๋๋ก Hook์ ์ผ์ข ์ธ useHistory ์ฌ์ฉ ์์
10/15 (Fri)
Play
useEffect๋ฅผ ๋ ๋ฒ ์ฌ์ฉํด์ ๋ง์์ ๊ฒฝ์ฐ์ ํ๋ ธ์ ๊ฒฝ์ฐ๋ก ๋๋์ด ๊ธฐ๋ฅ ๊ตฌํ
ํ๋ ธ์ ๊ฒฝ์ฐ useHistory ์ฌ์ฉํ์ฌ header์ result ์ด๊ธฐํ ๋ฐ End ์ปดํฌ๋ํธ ์ด๋
Button
End ์ปดํฌ๋ํธ์์๋ ์ฌ์ฉ๋๋ score๋ Play ๋ฒํผ์ ํด๋ฆญ ์์ ์ด๊ธฐํ
handlePlayClick ํจ์ ๊ตฌํ ํ onClick ์ด๋ฒคํธ ์ ์ฉ
randomApi
์ค๋ณต๋ฐฉ์ง๋ฅผ ์ํด ๊ธฐ์กด ๋๋ฏธ๋ฐ์ดํฐ์์ splice ์ฌ์ฉํ์ง๋ง
์ ํ์ ์ธ ๋๋ฏธ๋ฐ์ดํฐ์ ํ๊ณ๋ฅผ ๋ณด์ํ๊ธฐ ์ํด splice ์ ๊ฑฐ
'Challenge > Project Log' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Colorboration (1) - SR(Software Requirement) ํ๊ณ (1) | 2021.11.11 |
---|---|
WHO IS OLDER? (6) (0) | 2021.10.25 |
WHO IS OLDER? (4) (0) | 2021.10.13 |
WHO IS OLDER? (3) (0) | 2021.10.08 |
WHO IS OLDER? (2) (0) | 2021.10.07 |