diff --git a/README.md b/README.md index 261f826..b08f37b 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,11 @@ **๐Ÿ‘‰ ๋ฐฐํฌ ํŽ˜์ด์ง€ : https://alittlekitten.github.io/SsocoTimer/** -**์ตœ์‹  ์—…๋ฐ์ดํŠธ ๋‚ ์งœ : `2022.02.15`** +**์ตœ์‹  ์—…๋ฐ์ดํŠธ ๋‚ ์งœ : `2022.02.16`** -**์ตœ์‹  ๋ฆด๋ฆฌ์ฆˆ ๋ฒ„์ „ : `ver 1.0.1`** +**์ตœ์‹  ๋ฆด๋ฆฌ์ฆˆ ๋ฒ„์ „ : `ver 1.0.2`** -![Honeycam 2022-02-15 00-42-34](https://user-images.githubusercontent.com/14370441/153896342-b6774dcf-ab7b-4221-935b-00af5ffebe6c.gif) +![Honeycam 2022-02-16 02-56-45](https://user-images.githubusercontent.com/14370441/154123927-34d5656d-6cfe-4ff3-b9a0-edd6d16b8e2c.gif) - React์™€ CRA๋ฅผ ์ด์šฉํ•ด์„œ ๊ฐ„๋‹จํ•œ ์Šคํƒ‘์›Œ์น˜๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋Š” ์—ฐ์Šต์šฉ ๋ ˆํฌ์ง€ํ† ๋ฆฌ์ž…๋‹ˆ๋‹ค. - React์˜ ๊ธฐ๋ณธ์ ์ธ ๋™์ž‘ ๋ฐฉ์‹์„ ์ตํžˆ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. @@ -82,56 +82,64 @@ ### `22.02.14` - [x] ๊ฐœ๋ฐœ์ž ์ •๋ณด ์ถ”๊ฐ€ (๊นƒํ—ˆ๋ธŒ ํŽ˜์ด์ง€์™€ ํ‹ฐ์Šคํ† ๋ฆฌ ํŽ˜์ด์ง€ ๋งํฌ ๋ฒ„ํŠผ ์ƒ์„ฑ) -- [x] ๋ฒ„ํŠผ ํฌ๊ธฐ ๋ณ€๊ฒฝ์œผ๋กœ ์ธํ•œ ์š”์†Œ ์œ„์น˜๋ณ€ํ™” ๋ฒ„๊ทธ ์ œ๊ฑฐ +- [x] ๋ฒ„ํŠผ ํฌ๊ธฐ ๋ณ€๊ฒฝ์œผ๋กœ ์ธํ•œ ์š”์†Œ ์œ„์น˜๋ณ€ํ™” ๋ฒ„๊ทธ ์ œ๊ฑฐ [๐Ÿ‘‰ issue๋งํฌ](https://github.com/alittlekitten/SsocoTimer/issues/1) - [x] ๋ฒ„ํŠผ์— transition์ ์šฉ - [x] ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ์ถ”๊ฐ€ (head์˜ ๋กœ๊ณ ์™€ ํƒ€์ดํ‹€, ์„ค๋ช… ์ˆ˜์ •) - [x] ๋„๋ฉ”์ธ๋ช… ๋ณ€๊ฒฝ (reactStopwatch -> SsocoTimer) - [x] ๋ฐฐํฌ ์ฃผ์†Œ ๋ณ€๊ฒฝ (https://alittlekitten.github.io/SsocoTimer/) +### `22.02.15` + +- [x] ํƒ€์ด๋จธ๊ฐ€ ๋๋‚ฌ์„ ๋•Œ ์•Œ๋žŒ ์†Œ๋ฆฌ(๊ผฌ๊ผฌ๋Œ)๊ฐ€ ๋‚˜๊ฒŒ ํ•˜๋Š” ๊ธฐ๋Šฅ ์ถ”๊ฐ€ +- [x] ํ† ๊ธ€ ๋ฒ„ํŠผ์„ ํ†ตํ•ด ์•Œ๋žŒ ์†Œ๋ฆฌ๋ฅผ ์ผœ๊ณ  ๋Œ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ +- [x] ์ œ์ž‘์ž์—๊ฒŒ ๋ฉ”์ผ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋Š” ๋ฒ„ํŠผ ์ถ”๊ฐ€ +- [x] `Timer` 00:00:00์ธ ์ƒํƒœ์—์„œ -๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด -1:59:59๋กœ ๋ณ€ํ•˜๋Š” ๋ฒ„๊ทธ ์ˆ˜์ • [๐Ÿ‘‰ issue๋งํฌ](https://github.com/alittlekitten/SsocoTimer/issues/20) +- [x] `Timer` ์žฌ์ƒ ์ƒํƒœ์—์„œ +-๋ฒ„ํŠผ์—์„œ ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ ธ๋‹ค๊ฐ€ ๋–ผ๋Š” ์ˆœ๊ฐ„ ์žฌ์ƒ์ด ๋ฉˆ์ถ”๋Š” ๋ฒ„๊ทธ ์ˆ˜์ • [๐Ÿ‘‰ issue๋งํฌ](https://github.com/alittlekitten/SsocoTimer/issues/21) +
## ๐Ÿ— ๊ณ ๋ฏผํ•œ ์  ### ์–ด๋–ป๊ฒŒ ์ฆ๊ฐ์ด ๋นจ๋ผ์ง€๋Š” ๋ฒ„ํŠผ์„ ๋งŒ๋“ค์—ˆ๋Š”๊ฐ€ -- setTimeout์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž๋ฅผ ์ ์ฐจ ๊ฐ์†Œํ•˜๊ฒŒ ๋งŒ๋“ฆ -- ์žฌ๊ท€๋ฅผ ํ†ตํ•ด ๊พน ๋ˆ„๋ฅด๊ณ  ์žˆ์œผ๋ฉด ๊ณ„์†ํ•ด์„œ count๊ฐ€ ๋™์ž‘ํ•˜๊ฒŒ ๊ตฌํ˜„ -- ๋งˆ์šฐ์Šค์˜ ํด๋ฆญ๊ณผ ํด๋ฆญํ•ด์ œ๋Š” `onMouseDown`, `onMouseUp`์œผ๋กœ ๊ตฌํ˜„ -- ์˜ˆ์™ธ์‚ฌํ•ญ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด `onMouseLeave`์™€ `onChange`์ด๋ฒคํŠธ๋„ ์‚ฌ์šฉ +- setTimeout์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž๋ฅผ ์ ์ฐจ ๊ฐ์†Œํ•˜๊ฒŒ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. +- ์žฌ๊ท€๋ฅผ ํ†ตํ•ด ๊พน ๋ˆ„๋ฅด๊ณ  ์žˆ์œผ๋ฉด ๊ณ„์†ํ•ด์„œ count๊ฐ€ ๋™์ž‘ํ•˜๊ฒŒ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. +- ๋งˆ์šฐ์Šค์˜ ํด๋ฆญ๊ณผ ํด๋ฆญํ•ด์ œ๋Š” `onMouseDown`, `onMouseUp`์œผ๋กœ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. +- ์˜ˆ์™ธ์‚ฌํ•ญ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด `onMouseLeave`์™€ `onChange`์ด๋ฒคํŠธ๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ### input์— ์ž…๋ ฅ๋ฐ›๊ธฐ -- ์•„๋ฌด ๊ธ€์ž๋‚˜ ์šฐ์„  ์ž…๋ ฅ๋ฐ›๊ณ , input์˜ value๊ฐ€ ๋ณ€ํ•  ๋•Œ๋งˆ๋‹ค `onChange` ์ด๋ฒคํŠธ๋กœ ๊ฐ์‹œ -- ์ž…๋ ฅ๋ฐ›์€ ๊ฐ’์—์„œ ์ˆซ์ž๋ฅผ ์ œ์™ธํ•œ ๊ฐ’์€ ์ „๋ถ€ regex๋ฅผ ์ด์šฉํ•ด์„œ ์ถ”์ถœ -- input๊ฐ’์€ textํ˜•ํƒœ๋กœ ๋ฐ›์œผ๋ฏ€๋กœ numberํ˜•ํƒœ๋กœ ๋ฐ”๊ฟ”์„œ time์— ์ ์šฉ +- ์•„๋ฌด ๊ธ€์ž๋‚˜ ์šฐ์„  ์ž…๋ ฅ๋ฐ›๊ณ , input์˜ value๊ฐ€ ๋ณ€ํ•  ๋•Œ๋งˆ๋‹ค `onChange` ์ด๋ฒคํŠธ๋กœ ๊ฐ์‹œํ•ฉ๋‹ˆ๋‹ค. +- ์ž…๋ ฅ๋ฐ›์€ ๊ฐ’์—์„œ ์ˆซ์ž๋ฅผ ์ œ์™ธํ•œ ๊ฐ’์€ ์ „๋ถ€ regex๋ฅผ ์ด์šฉํ•ด์„œ ์ถ”์ถœํ–ˆ์Šต๋‹ˆ๋‹ค. +- input๊ฐ’์€ textํ˜•ํƒœ๋กœ ๋ฐ›์œผ๋ฏ€๋กœ numberํ˜•ํƒœ๋กœ ๋ฐ”๊ฟ”์„œ time์— ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ### ์ˆซ์ž ๊ฐ์†Œ๊ฐ€ 0์—์„œ ๋ฉˆ์ถ”๊ฒŒ ํ•˜๊ธฐ -- repeatCount ํ•จ์ˆ˜ ๋‚ด์—์„œ setTime ํ•จ์ˆ˜๊ฐ€ ์ž‘๋™ํ•  ๋•Œ ์กฐ๊ฑด๋ฌธ์„ ๊ฑธ์–ด์คŒ -- ๋งŒ์•ฝ ์‹œ๊ฐ„์ด ๊ฐ์†Œํ•ด์„œ 0์ด ๋˜๋Š” ๊ฒฝ์šฐ ๋”์ด์ƒ ๊ฐ์†Œํ•˜์ง€ ์•Š๋„๋ก ์˜ˆ์™ธ์ฒ˜๋ฆฌ +- repeatCount ํ•จ์ˆ˜ ๋‚ด์—์„œ setTime ํ•จ์ˆ˜๊ฐ€ ์ž‘๋™ํ•  ๋•Œ ์กฐ๊ฑด๋ฌธ์„ ๊ฑธ์—ˆ์Šต๋‹ˆ๋‹ค. +- ๋งŒ์•ฝ ์‹œ๊ฐ„์ด ๊ฐ์†Œํ•ด์„œ 0์ด ๋˜๋Š” ๊ฒฝ์šฐ ๋”์ด์ƒ ๊ฐ์†Œํ•˜์ง€ ์•Š๋„๋ก ์˜ˆ์™ธ์ฒ˜๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. ### svg ๋ฒ„ํŠผ ํ˜ธ๋ฒ„์™€ ํด๋ฆญ์‹œ ํšจ๊ณผ ๋„ฃ๊ธฐ -- `{ ReactComponent as Plus }`๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ svgํŒŒ์ผ์„ ์ปดํฌ๋„ŒํŠธ์ฒ˜๋Ÿผ ์‚ฌ์šฉ +- `{ ReactComponent as Plus }`๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ svgํŒŒ์ผ์„ ์ปดํฌ๋„ŒํŠธ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ### ์กฐ๊ฑด๋ถ€ ์Šคํƒ€์ผ ์ ์šฉํ•˜๊ธฐ -- ๊ธฐ์กด์—๋Š” useState๋งŒ์œผ๋กœ time์„ ๊ด€๋ฆฌํ–ˆ์ง€๋งŒ, setTimeout์˜ ์žฌ๊ท€๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ์‹ค์‹œ๊ฐ„์œผ๋กœ time์ด ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ -- ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ž„์‹œ๋กœ ์ „์—ญ์— nowTime์ด๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“ฆ (ํ–ฅํ›„ ์ƒํƒœ๊ด€๋ฆฌ ์‹œ์Šคํ…œ์„ ์ ์šฉํ•˜๋ฉด์„œ ์ „์—ญ๋ณ€์ˆ˜๋ฅผ ์—†์•จ ์˜ˆ์ •) -- Emotion๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ๋งŒ๋“  CSS in JS Component์— props๋ฅผ ์ „๋‹ฌ -- props๋กœ ๋ฐ›์€ nowTime๊ฐ’์„ ์‚ผํ•ญ์—ฐ์‚ฐ์ž์˜ Chaining์„ ์ด์šฉํ•ด์„œ ์กฐ๊ฑด์„ ์ ์šฉํ•œ ํ›„์— ์Šคํƒ€์ผ ๋ฐ˜์˜ +- ๊ธฐ์กด์—๋Š” useState๋งŒ์œผ๋กœ time์„ ๊ด€๋ฆฌํ–ˆ์ง€๋งŒ, setTimeout์˜ ์žฌ๊ท€๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ์‹ค์‹œ๊ฐ„์œผ๋กœ time์ด ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. + - ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ž„์‹œ๋กœ ์ „์—ญ์— nowTime์ด๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. (์ถ”ํ›„ ๋กœ์ง ๋ณ€๊ฒฝ์„ ํ†ตํ•ด ์ „์—ญ๋ณ€์ˆ˜๋ฅผ ์—†์•ด์Šต๋‹ˆ๋‹ค.) +- ์ด๋ ‡๊ฒŒ ๋ณ€ํ™”ํ•œ ์ƒํƒœ๋ฅผ props์— ๋‹ด์€ ํ›„ Emotion๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ๋งŒ๋“  CSS in JS Component์— ์ „๋‹ฌํ–ˆ์Šต๋‹ˆ๋‹ค. +- props๋กœ ๋ฐ›์€ nowTime๊ฐ’์„ ์‚ผํ•ญ์—ฐ์‚ฐ์ž์˜ Chaining์„ ์ด์šฉํ•ด์„œ ์กฐ๊ฑด์„ ์ ์šฉํ•œ ํ›„์— ์Šคํƒ€์ผ์— ๋ฐ˜์˜ํ–ˆ์Šต๋‹ˆ๋‹ค. ### useEffect ํ™œ์šฉ - ๊ธฐ์กด์—๋Š” setState ์•ˆ์—์„œ prev => ๋ฅผ ํ†ตํ•ด ๋‚ด๋ถ€ ์ƒํƒœ๊ฐ’์„ ํ™•์ธํ•˜๊ณ  ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ์‹์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. -- ํ•˜์ง€๋งŒ time์œผ๋กœ ๊ด€๋ฆฌํ–ˆ๋˜ ์‹œ๊ฐ„ ์ƒํƒœ๊ฐ€ second, minute, hour๋กœ ๋‚˜๋ˆ ์ง€๋ฉด์„œ ์ƒํƒœ๋“ค์ด ์—ฐ๊ฒฐ๋˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. -- ๊ธฐ์กด prev๋ฅผ ์ด์šฉํ•˜์—ฌ ์ƒํƒœ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ์‹์€ setState ์•ˆ์—์„œ ๋˜ ๋‹ค์‹œ setState๋ฅผ ํ•˜๋Š” ๊ฒฝ์šฐ ์ค‘๋ณตํ•ด์„œ state๋ฅผ ๋ณ€๊ฒฝ์‹œํ‚ค๋Š” ๋ฌธ์ œ๋ฅผ ์•ผ๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค. (๋ Œ๋”๋ง ๋˜๊ธฐ ์ „์— state๋ฅผ ํ•œ๋ฒˆ์— ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ œ ๋ฐœ์ƒ) -- ๊ทธ๋ž˜์„œ useEffect๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ Œ๋”๋ง์ด ๋œ ์ดํ›„์— state๋ฅผ ๊ด€๋ฆฌํ•ด์ฃผ๋Š” ๋ฐฉ์‹์œผ๋กœ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. + - ํ•˜์ง€๋งŒ time์œผ๋กœ ๊ด€๋ฆฌํ–ˆ๋˜ ์‹œ๊ฐ„ ์ƒํƒœ๊ฐ€ second, minute, hour๋กœ ๋‚˜๋ˆ ์ง€๋ฉด์„œ ์ƒํƒœ๋“ค์ด ์—ฐ๊ฒฐ๋˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. + - ๊ธฐ์กด prev๋ฅผ ์ด์šฉํ•˜์—ฌ ์ƒํƒœ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ์‹์€ setState ์•ˆ์—์„œ ๋˜ ๋‹ค์‹œ setState๋ฅผ ํ•˜๋Š” ๊ฒฝ์šฐ ์ค‘๋ณตํ•ด์„œ state๋ฅผ ๋ณ€๊ฒฝ์‹œํ‚ค๋Š” ๋ฌธ์ œ๋ฅผ ์•ผ๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค. (๋ Œ๋”๋ง ๋˜๊ธฐ ์ „์— state๋ฅผ ํ•œ๋ฒˆ์— ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ œ ๋ฐœ์ƒ) +- useEffect๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ Œ๋”๋ง์ด ๋œ ์ดํ›„์— state๋ฅผ ๊ด€๋ฆฌํ•ด์ฃผ๋Š” ๋ฐฉ์‹์œผ๋กœ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ### useCallback ํ™œ์šฉ - useEffect๋ฅผ ํ™œ์šฉํ•˜๋ฉด์„œ ์ค‘๋ณต๋œ ์ฝ”๋“œ๋“ค์„ ๋ฐ–์— ์„ ์–ธํ•˜๊ณ  ์•ˆ์—์„œ ๊ฐ€์ ธ๋‹ค ์“ฐ๋Š” ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. -- ์ด ๊ณผ์ •์—์„œ ํ•จ์ˆ˜๋ฅผ ์˜์กด์„ฑ ๋ฐฐ์—ด ์•ˆ์— ๋„ฃ๋‹ค๋ณด๋‹ˆ ๋ฆฌ๋ Œ๋”๋ง์ด ๋  ๋•Œ๋งˆ๋‹ค ํ•จ์ˆ˜๊ฐ€ ์ƒˆ๋กœ ์ƒ์„ฑ์ด ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. + - ์ด ๊ณผ์ •์—์„œ ํ•จ์ˆ˜๋ฅผ ์˜์กด์„ฑ ๋ฐฐ์—ด ์•ˆ์— ๋„ฃ๋‹ค๋ณด๋‹ˆ ๋ฆฌ๋ Œ๋”๋ง์ด ๋  ๋•Œ๋งˆ๋‹ค ํ•จ์ˆ˜๊ฐ€ ์ƒˆ๋กœ ์ƒ์„ฑ์ด ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. - useCallback์„ ์‚ฌ์šฉํ•˜์—ฌ ์˜์กด์„ฑ ๋ฐฐ์—ด ์•ˆ์— ๋“ค์–ด๊ฐ„ ์š”์†Œ๊ฐ€ ๋ฐ”๋€Œ์ง€ ์•Š์œผ๋ฉด ๊ธฐ์กด์— ์žˆ๋˜ ํ•จ์ˆ˜๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๋„๋ก ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ### setTimeout / setInterval์˜ ๋”œ๋ ˆ์ด ๋ฌธ์ œ ํ•ด๊ฒฐ @@ -148,10 +156,21 @@ - ์ด์ œ๋Š” css์— ์žˆ๋Š” transform๊ณผ scale์„ ์ด์šฉํ•˜๋ฉด ๋‹ค๋ฅธ ์š”์†Œ์— ์˜ํ–ฅ์„ ๋ผ์น˜์ง€ ์•Š๊ณ  ๋ฒ„ํŠผ์˜ ํฌ๊ธฐ ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค. - transition ์†์„ฑ๊ณผ ํ•จ๊ป˜ ์ ์šฉํ•˜์—ฌ ๋ณด๋‹ค ์ž์—ฐ์Šค๋Ÿฝ๊ณ  ๋ถ€๋“œ๋Ÿฌ์šด UI/UX๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. +### ์•Œ๋žŒ ์žฌ์ƒ / useMemo ํ™œ์šฉ + +- Timer์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์•Œ๋žŒ๊ธฐ๋Šฅ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด ./src/store ํด๋” ๋‚ด๋ถ€์— soundReducer๋ฅผ ๋งŒ๋“ค๊ณ , ๊ฐ™์€ ํด๋”์˜ index.js์—์„œ combineReducers๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ธฐ์กด์˜ ๋ฆฌ๋“€์„œ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. +- Title์—์„œ ํ˜„์žฌ tap ์ƒํƒœ๊ฐ€ Timer์ผ ๋•Œ๋งŒ ์•Œ๋žŒ ๋ฒ„ํŠผ์ด ๋‚˜์˜ค๋„๋ก ์„ค์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค. +- Timer.jsx์—์„œ๋Š” new Audio()๋ฅผ ์ด์šฉํ•ด์„œ ์Œ์›ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ต๋‹ˆ๋‹ค. + - ๋งค๋ฒˆ ์ƒˆ๋กญ๊ฒŒ ๋ถˆ๋Ÿฌ์˜ค์ง€ ์•Š๊ณ  ํ•œ๋ฒˆ๋งŒ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์œ„ํ•ด์„œ useMemo๋ฅผ ์ด์šฉํ•ด์„œ Memoization์„ ํ•˜์˜€์Šต๋‹ˆ๋‹ค. + - ํƒ€์ด๋จธ๊ฐ€ ์žฌ์ƒ์ค‘์— 00:00:00์ด ๋˜๋ฉด Audio์˜ play ๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” `playAlarm`ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋„๋ก ๋กœ์ง์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. +
## ๐ŸŽž ์›€์งค +### ver 1.0.2 +![Honeycam 2022-02-16 02-56-45](https://user-images.githubusercontent.com/14370441/154123905-faca3462-1775-4ea7-a242-e0d3633502c7.gif) + ### ver 1.0.1 ![Honeycam 2022-02-15 00-42-34](https://user-images.githubusercontent.com/14370441/153896373-6e561530-d9bb-4896-80be-556c8a12ba0a.gif)