ํ๋ฆ๋๋ฅผ ๊ทธ๋ ค๋ณผ ์ ์๋ ๋ง์ธ๋๋งต์ ์ดํ๋ฆฌ์ผ์ด์ ์ ๋๋ค.
๋ณต์กํ ๊ตฌ์กฐ๋ ํ๋ฆ์ ์ฝ๊ฒ ๊ทธ๋ ค๋ณด๊ณ , ๋ธ๋ ์ธ์คํ ๋ฐ์ด ํ์ํ ๋ ์์ด๋์ด ๋ณด๋๋ก ํ์ฉํด ๋ณด์ธ์!
- ํธ๋ฆฌ ๊ทธ๋ํ ํ์์ ๋ง์ธ๋ ๋งต์ ๊ทธ๋ฆด ์ ์์ต๋๋ค.
- ๋ ธ๋์ ํธ๋ค์ Drag & Drop ํ๋ฉด ์๋ก์ด ๋ ธ๋๊ฐ ์์ฑ๋ฉ๋๋ค.
- ๋ ธ๋๋ฅผ ํด๋ฆญํ๋ฉด ์์ ํ ์ ์์ต๋๋ค. (๋ ธ๋ ์ด๋ฆ, ๋ฐฐ๊ฒฝ ์ปฌ๋ฌ, ์ฃ์ง ์คํ์ผ)
- ์์ฑํ ํ๋ก์ฐ๋ฅผ ๋ค์ด๋ก๋ ๋ฐ์ ์ ์์ต๋๋ค. (advanced)
React
Redux Toolkit
React Flow library
-
2022/9/16
- ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์ง์ ๋ง๋ค๊ธฐ ๊ณผ์ ๋ฅผ ์งํํ๋ฉฐ ๋ง์ธ๋๋งต ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ํ์ต๋๋ค.
- ๊ธฐํ ์ด๊ธฐ Figma
-
2022/9/18
- ๊ธฐ์กด MindMap์์ SpiderMap๋ก ๊ธฐํ์ ๋ณ๊ฒฝ ํ์ต๋๋ค.
- ํ๋ฉด์ ๋์์ธํ๊ณ , React flow ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ๊ฐํ์ต๋๋ค.
-
2022/9/19
- Redux toolkit์ ํ๋ก์ ํธ์ ์ ์ฉํ์ต๋๋ค.
- Spidermap ์ด๋ฆ์ ๋ถ์ด๊ณ ๋์์ธ์ ์์ ํ์ต๋๋ค.๐ค
๐ธ SpiderMap์์ ๊ด๋ฆฌ๋๋ ์ํ๋ ํฌ๊ฒ ๋ ธ๋๋ค๊ณผ ์ฃ์ง(๋ ธ๋ ์ฐ๊ฒฐ์ )์ด ์๋ค. ๋ ธ๋๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ Flow ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ ๊ณตํ๋ AddNodeOnEdgeDrop ์ปดํฌ๋ํธ ์์๋ก ์ฝ๊ฒ ์ถ๊ฐํ ์ ์์๋ค. ๋ฌธ์ ๋, ์์ ๊ณผ ์ญ์ ๊ฐ ์ด๋ฃจ์ด์ง๋ ๋ชจ๋ฌ ์ปดํฌ๋ํธ๋ก ๋ ธ๋(์ด๋ฆ, ๋ฐฐ๊ฒฝ์)์ ์ฃ์ง(๋ผ์ธ ์คํ์ผ), setState๋ฅผ ์ ๋ฌํ๋ ๊ณผ์ ์์ ๊ณผํ props ์ ๋ฌ๊ณผ ์ํ ๋์ด์ฌ๋ฆฌ๊ธฐ์ ์๊ตฌ์ฌ์ด ๋ค์๋ค.
๊ฒฐ๋ก ์ ์ผ๋ก, ํ๋ก์ ํธ์์ ๊ด๋ฆฌํ๋ state๋ ๋ ธ๋์ ์ฃ์ง, ๋ชจ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ ๊ณตํ๋ state๋ก ๊ด๋ฆฌ๋๊ธฐ ๋๋ฌธ์, store๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด Flow ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ ๊ณตํ๋ API๋ฅผ ์ฌ์ฉํด ์ ์ฉ์ด ํ์ํจ์ ์์๋ค.
์ฒ์์ ๋ชจ๋ ์ค์ ์ด ๋ด๊ธด ๋ ธ๋์ ์ฃ์ง๋ฅผ ์ ์ญ์์ React-Redux๋ก ๊ด๋ฆฌํ๊ณ ์ ํ๋ค. ํ๋ก์ ํธ์ ์ ์ฉํ๋ ๊ฒ์ ์ฒ์์ด๋ผ ๋ณต์ตํ๋ ๊ณผ์ ์์ ์์นญ์ ํ๋ค๊ฐ ์ข ๋ ๊ฐํธํ๋ฉด์ ๋ถํ์ํ ์ฝ๋๋ฅผ ์ค์ผ ์ ์๋ React Toolkit์ ์ถ๊ฐ์ ์ผ๋ก ํ์ตํ๋ค.