๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Daily/Today I Learned

210321_TIL (First Project - Day7)

by joooing 2021. 3. 22.
๋ฐ˜์‘ํ˜•

๐ŸŽ ์˜ค๋Š˜ ํ•œ ์ผ

ํ•จ์ˆ˜ ์ž‘์„ฑ ๋งˆ๋ฌด๋ฆฌ
Modal Page์˜ API ์š”์ฒญ ๊ด€๋ จ ํ•จ์ˆ˜ ์ž‘์„ฑ์„ ๋งˆ๋ฌด๋ฆฌ์ง€์—ˆ๋‹ค. Dropdown UI ๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋„ ์žˆ์–ด์„œ ์ด๋ถ€๋ถ„๋„ ์™„์„ฑํ–ˆ๋‹ค. ์ด ๊ณผ์ •์—์„œ datalist์™€ select ํƒœ๊ทธ์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด์„œ ์•Œ๊ฒŒ๋˜์—ˆ๊ณ , ์„œ๋ฒ„์— ๊ณ„์†ํ•ด์„œ ์š”์ฒญ์„ ๋ณด๋‚ผ ์ƒ๊ฐ์ด์—ˆ๋Š”๋ฐ ๊ทธ๋Ÿด ํ•„์š”๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ๋„ ๊นจ๋‹ฌ์•„์„œ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ–ˆ๋‹ค.

Custom Hook ๋งŒ๋“ค์–ด๋ณด๊ธฐ
์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด useRef์™€ useEffect๋ฅผ ์ด์šฉํ•œ Custom Hook ์„ ํ•˜๋‚˜ ๋งŒ๋“ค์—ˆ๋‹ค. ์ข€ ๋” ๋‹ค์–‘ํ•œ ๊ณณ์—์„œ ์“ฐ๊ธฐ ์œ„ํ•ด์„œ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ฒŒ ํ–ˆ๋‹ค.

์ฐจํŠธ์— Gradient ํšจ๊ณผ ์ถ”๊ฐ€
๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ๋œ canvas API ๋ฅผ ์ด์šฉํ•ด์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋งŒ๋“  ์ฐจํŠธ์— gradient ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•ด์„œ ๋„์ „ํ•ด๋ดค๋‹ค. ๋ฆฌ์•กํŠธ๋ผ์„œ gradient ๋งˆ์ € state๋กœ ๊ด€๋ฆฌ๋ฅผ ํ•ด์ค˜์•ผํ–ˆ๋‹ค. ์˜ค๋Š˜ ํ•œ ๊ฒƒ๋“ค์ด dom์ด๋ž‘ ๊ด€๋ จ๋œ ๋ถ€๋ถ„์ด ๋งŽ์•„์„œ ๊ทธ๋Ÿฐ์ง€ ๋ญ๋งŒ ํ•˜๋ ค๊ณ ํ•˜๋ฉด React Hooks ๊ฐ€ ์ž๊พธ ์‹ ๊ฒฝ์“ฐ์ด๊ฒŒํ–ˆ๋‹ค. hooks๋ฅผ ๋งˆ์Šคํ„ฐํ•˜๊ฒ ๋‹ค๋Š” ์˜ค๊ธฐ๊ฐ€ ์ƒ๊ธด ๋‚ ์ด์—ˆ๋‹ค.. ๊ทธ๋ž˜๋„ ์ด์ œ๋Š” ์ข€ ๋ง์„ ๋“ฃ๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ๋ฐœ๋ป—๊ณ  ์ž˜ ์ˆ˜๋Š” ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. ์ ์  ๋งŽ์€ ๋„์ „์„ ํ• ์ˆ˜๋ก ๋จธ๋ฆฌ๋Š” ์•„ํ”„์ง€๋งŒ ์žฌ๋ฐŒ๋‹ค!

 

๐ŸŽ ํ•ด์•ผํ•  ์ผ

โœ”๏ธ ์„œ๋ฒ„, ํด๋ผ์ด์–ธํŠธ ์—ฐ๊ฒฐ ํ…Œ์ŠคํŠธ
โœ”๏ธ UI ๊ฐœ์„ 

 

 

โœ๏ธ ํŽ˜์ด์ง€ ์ „ํ™˜ ํšจ๊ณผ๋‚˜ ์ž์—ฐ์Šค๋Ÿฌ์šด ์Šคํฌ๋กค ๋“ฑ.. ์ •๋ง ์‚ฌ์†Œํ•ด์„œ ์‚ฌ์šฉ์ž๋Š” ๋‹น์—ฐํ•˜๊ฒŒ ์—ฌ๊ธฐ๊ณ  ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์ด๋ผ๊ณ  ๋Š๋ผ์ง€ ๋ชปํ•˜์ง€๋งŒ, ์ •๋ง ๊ทธ๋ ‡๊ฒŒ ์˜์‹ํ•˜์ง€ ๋ชปํ•  ์ •๋„๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ํŽธํ•œ UX๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ฐœ๋ฐœ์ž์˜ ์—„์ฒญ๋‚œ ์ •์„ฑ์ด ํ•„์š”ํ•˜๋‹ค๋Š” ๊ฑธ ๊นจ๋‹ฌ์•˜๋‹ค. ๋””ํ…Œ์ผํ•œ ๋ถ€๋ถ„์„ ์‹ ๊ฒฝ์จ์•ผ๊ฒ ๋‹ค.

๋ฐ˜์‘ํ˜•

'Daily > Today I Learned' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

210323_TIL (First Project - Day9)  (0) 2021.03.28
210322_TIL (First Project - Day8)  (0) 2021.03.27
210320_TIL (First Project - Day6)  (0) 2021.03.21
210319_TIL (First Project - Day5)  (0) 2021.03.20
210318_TIL (First Project - Day4)  (0) 2021.03.19

๋Œ“๊ธ€