WHO IS OLDER? (5)

 

 

๋งค์ผ 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