๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ „์ฒด ๊ธ€84

ํ•จ์ˆ˜ํ˜•์€ ์™œ ํ•จ์ˆ˜์ง€ํ–ฅํ˜•์ด ์•„๋‹Œ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ผ๊ณ  ํ• ๊นŒ? ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ์™œ 'ํ•จ์ˆ˜์ง€ํ–ฅํ˜•'์ด ์•„๋‹๊นŒ?๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ 'Object-Oriented Programming'์˜ ๋ฒˆ์—ญ์ด๋‹ค. ์—ฌ๊ธฐ์„œ 'Oriented'๊ฐ€ '์ง€ํ–ฅ'์œผ๋กœ ๋ฒˆ์—ญ๋˜์–ด ์šฐ๋ฆฌ๋Š” '๊ฐ์ฒด์ง€ํ–ฅ'์ด๋ผ ๋ถ€๋ฅธ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ 'Functional Programming'์€ ์™œ 'ํ•จ์ˆ˜์ง€ํ–ฅํ˜•'์ด ์•„๋‹Œ 'ํ•จ์ˆ˜ํ˜•'์ผ๊นŒ?๊ฐ‘์ž๊ธฐ ๋“  ์˜๋ฌธ์ธ๋ฐ, ์ฒ˜์Œ์—๋Š” ๋‹จ์ˆœํžˆ ๋ฒˆ์—ญ์˜ ์ฐจ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ฅผ ์ฐพ์•„๋ณด๋ฉด์„œ ํฅ๋ฏธ๋กœ์šด ๋‚ด์šฉ๋“ค์„ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.์ฐจ์ด์ '์ง€ํ–ฅ'์˜ ์˜๋ฏธ'์ง€ํ–ฅ(ๆŒ‡ๅ‘)'์€ "์–ด๋–ค ๋ชฉํ‘œ๋กœ ๋œป์ด๋‚˜ ๋ฐฉํ–ฅ์„ ํ–ฅํ•จ"์„ ์˜๋ฏธํ•œ๋‹ค.๊ฐ์ฒด์ง€ํ–ฅ์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ์ค‘์‹ฌ์„ '๊ฐ์ฒด'์— ๋‘๊ณ , ์ด๋ฅผ ํ–ฅํ•ด ๋‚˜์•„๊ฐ€๋Š” ๋ฐฉ๋ฒ•๋ก ์ด๋‹ค.'ํ˜•'์˜ ์˜๋ฏธ'ํ˜•(ๅž‹)'์€ "์ƒ๊น€์ƒˆ๋‚˜ ๋ชจ์–‘"์„ ์˜๋ฏธํ•œ๋‹ค.ํ•จ์ˆ˜ํ˜•์€ ์ˆ˜ํ•™์  ํ•จ์ˆ˜๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ํ•œ 'ํ˜•ํƒœ'๋ฅผ.. 2024. 7. 2.
Ref๋ฅผ ์ข€ ๋” ์ž˜ ์จ๋ณผ๊นŒ? (forwardRef์™€ useImperativeHandle) ๋“ค์–ด๊ฐ€๋ฉฐ: React์˜ Ref ์ „๋‹ฌ ๋ฌธ์ œ React์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ref๋ฅผ ์ „๋‹ฌํ•˜๋ ค๊ณ  ํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.// ๐Ÿšจ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š” ์ฝ”๋“œconst Input = (props) => { return ;};// ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธconst Parent = () => { const inputRef = useRef(null); return ; // ref๊ฐ€ ์ „๋‹ฌ๋˜์ง€ ์•Š์Œ};์ด๋Š” React๊ฐ€ ๊ธฐ๋ณธ์ ์œผ๋กœ ref๋ฅผ ์ผ๋ฐ˜ prop์œผ๋กœ ์ „๋‹ฌํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์ œํ•œ์ด ์žˆ๋Š” ์ด์œ ๋Š”:1. ์บก์Šํ™” ์œ ์ง€: ๋‚ด๋ถ€ ๊ตฌํ˜„ ์„ธ๋ถ€์‚ฌํ•ญ์„ ๋ณดํ˜ธ2. ์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ ํ๋ฆ„ ๋ณด์žฅ3. ๋ถˆํ•„์š”ํ•œ ๋…ธ์ถœ ๋ฐฉ์ง€ forwardRef: React์˜ ๊ณต์‹์ ์ธ ref ์ „๋‹ฌ ๋ฉ”์ปค๋‹ˆ์ฆ˜React ๊ณต์‹ ๋ฌธ์„œ์— ๋”ฐ๋ฅด๋ฉด, `forwardRef`๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ .. 2024. 6. 28.
[์ฑ…] ์™„์„ฑ๋œ ์›น์‚ฌ์ดํŠธ๋กœ ๋ฐฐ์šฐ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•œ๋น›๋ฏธ๋””์–ด  ํ™œ๋™์„ ์œ„ํ•ด์„œ ์ฑ…์„ ์ œ๊ณต๋ฐ›์•„ ์ž‘์„ฑ๋œ ์„œํ‰์ž…๋‹ˆ๋‹ค.์ฑ… ์ถ”์ฒœ ๋Œ€์ƒ์ž์›น ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์žˆ๋Š” ์‚ฌ๋žŒHTML, CSS๋ฅผ ํ•œ๋ฒˆ์ด๋ผ๋„ ๋‹ค๋ค„๋ณธ ์‚ฌ๋žŒJavascript ์ดˆ๋ณด์ž์‚ฌ์‹ค ๋‚˜๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฆฌ์•กํŠธ๋ฅผ ํ•˜๋ฉด์„œ ๋ณ‘๋ ฌ์ ์œผ๋กœ ํ„ฐ๋“ํ–ˆ๋˜ ์‚ฌ๋žŒ์ธ์ง€๋ผ, ์ˆœ์ˆ˜ ๋ฐ”๋‹๋ผJS ๊ตฌํ˜„์— ์•ฝํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.๊ทธ๋ž˜์„œ ์ด๋ฒˆ '์™„์„ฑ๋œ ์›น์‚ฌ์ดํŠธ๋กœ ๋ฐฐ์šฐ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ' ์ฑ…์„ ๋ณด๋ฉด์„œ ๋‚ด๊ฐ€ ๋†“์น˜๊ณ  ์žˆ๋˜ ๋ถ€๋ถ„๋“ค์— ๋Œ€ํ•ด์„œ ๋‹ค์‹œ๊ธˆ ์ƒ๊ธฐ์‹œํ‚ฌ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์š”๊ตฌ๋œ ์‚ฌํ•ญ์„ ๋‹ค ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ๋žŒ์ด๋ผ๋ฉด ์ด ์ฑ…์„ ์Šคํ‚ตํ•ด๋„ ๋  ๊ฒƒ ๊ฐ™์ง€๋งŒ, ๊ทธ๋ ‡์ง€ ์•Š์€ ์‚ฌ๋žŒ๋“ค์—๊ฒ ๋ชจ๋‘ ์ถ”์ฒœํ•œ๋‹ค. ๋Š๋‚€์ ์š”์ฆ˜ ์ด๋ก ์ฑ…๋“ค์„ ๋ณด๊ฒŒ ๋˜๋ฉด ๊ธ€ ์œ„์ฃผ์˜ ์ฑ…๋“ค์ด ๋งŽ์€๋ฐ, ์›Œ๋‚™ ์ปดํ“จํ„ฐ ์ง€์‹์€ ์ „๋‹ฌํ•ด์•ผํ•  ๊ฒƒ๋„ ๋งŽ๊ณ  ๊นŠ์ด๋„ ์žˆ์–ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๋Ÿด ์ˆ˜ ๋ฐ–์— ์—†๋‹ค๋Š”.. 2024. 4. 24.
scale up๊ณผ scale out ๐Ÿ‘€TL; DR ์Šค์ผ€์ผ ์—…๊ณผ ์Šค์ผ€์ผ ์•„์›ƒ์˜ ์ฐจ์ด ์ธ์ฆ์„œ๋ฒ„๋ฅผ ์Šค์ผ€์ผ ์•„์›ƒํ•œ๋‹ค๊ณ  ํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ผ๊นŒ ์—ฌ๋Ÿฌ ์‚ฌ์šฉ์ž๊ฐ€ ๋™์‹œ ๋กœ๊ทธ์ธ์„ ์š”๊ตฌํ•  ๋•Œ, ์Šค์ผ€์ผ ์•„์›ƒ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒŒ ์ ํ•ฉ ์Šค๋งˆ์ผ๊ฒŒ์ดํŠธ ๋ฐ๋ธŒ์บ ํ”„๋ฅผ ํ•˜๋ฉด์„œ ๋งŽ์ด ๋“ฃ๊ณ , ํ•˜๋Š” ์–˜๊ธฐ ์ค‘์— ํ•˜๋‚˜๊ฐ€ scale out ๊ณผ scale up์ด๋‹ค. ์ด์ „์—๋„ ๋งŽ์ด ๋“ค์—ˆ์ง€๋งŒ, ์‚ฌ์‹ค ๊ทธ๋ƒฅ ๋‘˜๋‹ค ํ™•์žฅํ•œ๋‹ค๋Š” ๋ง๋กœ ๋ฐ›์•„๋“ค์ด๊ณ  ๋ณ„ ์ƒ๊ฐ์ด ์—†์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ํ•˜์ง€๋งŒ, ์ด๋ฒˆ์— ๋ฐœํ‘œ ์ค€๋น„๋ฅผ ํ•˜๋ฉด์„œ ์ธ์ฆ์„ ๋‹ด๋‹นํ•˜๋Š” ์„œ๋ฒ„ ๊ฐœ๋ฐœ์ž๊ฐ€ '์ธ์ฆ ์„œ๋ฒ„์™€ ์œ ์ € ์„œ๋ฒ„๋ฅผ ๋ถ„๋ฆฌํ• ์ง€'์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์„ ๋งŽ์ด ํ–ˆ๋‹ค. ์ด ๊ณ ๋ฏผ์„ ๋งŽ์ด ๋“ฃ๊ณ , ๊ฒฐ๋ก ์„ ๋‚ด๋ฆฌ๊ธธ -> '์ธ์ฆ์„œ๋ฒ„์™€ ์œ ์ €์„œ๋ฒ„๋ฅผ ๋ถ„๋ฆฌํ•˜๊ณ , ์ดํ›„์— ์ธ์ฆ ์„œ๋ฒ„๋ฅผ scale out ํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„ํ•œ๋‹ค' ์˜€๋‹ค. ๋ณ„ ์ƒ๊ฐ ์—†๋‹ค๊ฐ€ ์ด๋•Œ ์™œ scale up์ด ์•„๋‹ˆ๋ผ scal.. 2024. 1. 16.
๋„ˆ setTimeout, setInterval ๋กœ ์‹œ๊ฐ„ ๋ณด์žฅํ•œ๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ์–ด? ์–ด๋–ป๊ฒŒ? ํƒ€์ด๋จธ๋ฅผ ๊ตฌํ˜„ํ•˜๋‹ค๊ฐ€ ๋ฌธ๋“ ๊ทธ๋Ÿฐ ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ์•„๋ฌด ์ƒ๊ฐ ์—†์ด setTimeout ๊ณผ setInterval์„ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์–˜๋„ค๋Š” ์–ด๋–ป๊ฒŒ ๋Œ์•„๊ฐ€๋Š”๊ฑฐ์ง€? ์–˜๋„ค๋ฅผ ๋ฏฟ๊ณ  ์จ๋„๋˜๋Š”๊ฑด๊ฐ€? ๊ณผ์—ฐ setTimeout๊ณผ setInterval์ด ์‹œ๊ฐ„์„ ๋ณด์žฅํ•ด์ฃผ๋Š” ๊ฒŒ ๋งž๋‚˜? ๊ทธ๋ž˜์„œ ๊ณต๋ถ€ํ•˜๊ฒŒ ๋๋‹ค. ๐Ÿ‘€TL; DR setTimeout, setInterval์˜ ์ฐจ์ด์  ์ง€์—ฐ ๊ฐ„๊ฒฉ์ด ๋ณด์žฅ๋˜๋‚˜? ์‹œ๊ฐ„์„ ์ธก์ •ํ•ด์•ผ๋˜๋Š” ํƒ€์ด๋จธ๋ผ๋ฉด Date๊ฐ€ ํ•ด๊ฒฐ์ฑ…์ด ๋ ์ˆ˜๋„..? setTimeout ์ง€์ •ํ•ด์ค€ ์‹œ๊ฐ„์ด ์ง€๋‚œ ํ›„์— 1ํšŒ ํŠน์ • ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ• ๋น„๋™๊ธฐ ํ•จ์ˆ˜ setTimeout์ด ๋น„๋™๊ธฐ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•œ ์ด์œ ๋Š” JS์—”์ง„์ด ์•„๋‹ˆ๋ผ WebAPI์—์„œ ์ฒ˜๋ฆฌ๋ฅผ ํ•œ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด์„œ ์‹ฑ๊ธ€์Šค๋ ˆ๋“œ์ธ JS์—์„œ ๋น„๋™๊ธฐ์ ์ธ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋œ๋‹ค. setInterval ์ง€์ •ํ•ด.. 2024. 1. 16.
styled-components๋ฌด์ƒˆ์˜ tailwind CSS ๋„์ž…๊ธฐ - 1 ๐Ÿ‘€TL; DR ์›๋ž˜๋Š” styled-components๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ–ˆ๋‹ค. ๋””์ž์ธ์‹œ์Šคํ…œ ๊ตฌ์ถ•์„ ํ•˜๋ฉฐ styled-components์˜ ํ•œ๊ณ„๋ฅผ ๋Š๊ผˆ๋‹ค. tailwind CSS๋ฅผ ๋„์ž…ํ–ˆ๋‹ค. ์•„์ง์€ ํ˜ผ๋ž€์Šค๋Ÿฝ๋‹ค.. tailwind CSS๋ฅผ '์ž˜ ์“ฐ๋Š”' ๋ฐฉ๋ฒ•์„ ๋ชจ์ƒ‰์ค‘์ด๋‹ค styled-components๋ฅผ ์‚ฌ์šฉํ–ˆ๋˜ ์ด์œ  ์Šคํƒ€์ผ๋“œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ–ˆ๋˜ ์ด์œ ๋Š” '์ปดํฌ๋„ŒํŠธํ™”'์— ์žˆ์—ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธํ™”ํ•˜๋Š” ๊ฑธ ์ข‹์•„ํ•˜๊ธฐ๋„ ํ–ˆ๊ณ , ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์„ ๋ช…์‹œํ•˜๋ฉด์„œ ๋ช…ํ™•ํžˆ ํ•ด๋‹น ํƒœ๊ทธ์˜ ์—ญํ• ์ด ๋“œ๋Ÿฌ๋‚œ๋‹ค๋Š” ์ ๋„ ์ข‹์•˜๋‹ค. ์ด ์ ์€ ๋ฒ„๊ทธ ํ”ฝ์‹ฑ์—๋„ ๊ต‰์žฅํžˆ ๊ฐ„ํŽธํ•จ์„ ๋Š๋ผ๊ฒŒ ํ•ด์คฌ๋‹ค. (๋ฌธ์ œ์˜ ์›์ธ์„ ์ฐพ๋Š” ๋ถ€๋ถ„์—์„œ ๋ช…์‹œ์„ฑ์˜ ์žฅ์ ) ๊ทธ๋ฆฌ๊ณ  props๋กœ ์กฐ๊ฑด๋ถ€ ์Šคํƒ€์ผ๋ง์˜ ์žฅ์ ๋„ ๋งค์šฐ ์ข‹์•˜๋‹ค. ๋ฐ˜๋ณต๋˜๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒ‰๊น”๋งŒ ๋ฐ”๋€Œ๋Š” ๊ฒฝ์šฐ๋ฅผ ๋งŽ์ด ๋ดค๊ณ , ๋ฐ˜๋ณต๋˜๋Š” ์ฝ”๋“œ.. 2024. 1. 8.
๋ฐ˜์‘ํ˜•