header-img
Info :
ํ”„๋ก ํŠธ์—”๋“œ 1
list_img
Front-End์˜ ์ƒํƒœ ๊ด€๋ฆฌ (State Management)
2022.09.26
์ƒํƒœ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ณ  ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ด ํ”„๋ก ํŠธ์—”๋“œ ์—ญ๋Ÿ‰์˜ ํ•ต์‹ฌ์ด๋ผ๋Š”๋ฐ.. ์—ฌ๊ธฐ์„œ ์ž์ฃผ ๋‚˜์˜ค๋Š” ์šฉ์–ด์ธ '์ƒํƒœ ๊ด€๋ฆฌ'๋Š” ๋ฌด์—‡์ธ๊ฐ€? Front-End ์—์„œ์˜ '์ƒํƒœ๊ด€๋ฆฌ'๋ž€? 1. ๋ฐ์ดํ„ฐ๋ฅผ ์„ค๊ณ„๋œ UI/UX์— ๋งž๊ฒŒ ์„ค๊ณ„ํ•˜๊ณ  ๊ตฌํ˜„ํ•˜๋Š” ์ผ์ด๋ฉฐ, 2. ๋„คํŠธ์›Œํฌ๋ฅผ ํ†ตํ•ด ์„œ๋ฒ„๋กœ ์ „๋‹ฌ๋˜๋Š” client์˜ ์š”์ฒญ์— ๋”ฐ๋ผ ๋ณ€ํ™”ํ•˜๋Š” ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ์ผ. ์ƒํƒœ๊ด€๋ฆฌ ๋ฐฉ๋ฒ• 1. ํ”„๋ ˆ์ž„์›Œํฌ ๋“ฑ์žฅ - React, Vue, Svelte ๋“ฑ์˜ ํ”„๋ ˆ์ž„์›Œํฌ ๋“ฑ์žฅ - ์•ต๊ทค๋Ÿฌ์˜ ๋“ฑ์žฅ์œผ๋กœ ์ƒํƒœ๋Š” ๊ณผ๊ฑฐ์˜ DOM์—์„œ ํƒˆ์ถœํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. front-end ๊ฐœ๋ฐœ์ž๋Š” DOM์ด ์•„๋‹Œ JavaScript์—์„œ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ฆ‰, DOM์— ์ ‘๊ทผํ•˜๋Š” ๋กœ์ง์ด ํ•„์š”์—†์–ด์ง€๊ฒŒ ๋˜์—ˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๊ฑฐ๊ธฐ์—๋‹ค ํ•„์š”ํ•œ ์ƒํƒœ๋“ค์„ controler์— ๋ชจ์•„์„œ ๊ด€๋ฆฌํ•˜..