๋ฐ๋ก๊ฐ๊ธฐ https://light9639.github.io/Vuex-TodoList/
โจ Vuex-TodoList ์ฌ์ดํธ์ ๋๋ค. โจ
๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ์ํ์ ๋ค๋ฉด ๋ค์ด๋ก๋ ํ yarn์ ์ค์นํ๊ณ
yarn vite
# or
yarn dev
๋ฅผ ๋๋ฅด๊ณ http://127.0.0.1:5173/ ๋ก ์ ์ํ๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ๋ฉด์ ๋์ธ ์ ์์ต๋๋ค.
- 1์ธ ๊ฐ๋ฐ 2023.01.18 ~ 2022.01.19(2์ผ ์์)
- Vue.js๋ฅผ ์ด์ฉํด TodoList๋ฅผ ๋ง๋ค๊ณ ์ ํ์ฌ ์ ์ํ๊ฒ ๋์์ต๋๋ค.
- Vue์
@click
,v-model
๊ธฐ๋ฅ๋ค์ ํ์ฉํ์ฌ ์ ์ํ Vue.js TodoList์ ๋๋ค.
- React์ ํจ๊ป SPA ์ ์์ ๊ฐ์ฅ ์ ๋ช ํ Vue.js๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ TodoList์ ๋๋ค.
- @click ์ด๋ฒคํธ๋ฅผ ์์ฑํ ํจ์๋ฅผ ์ ์ฉํ์ฌ Vuex Mutations๊ฐ ์คํ๋๋๋ก ์์ฑํ์ต๋๋ค.
- WebPack์ ์ฌ์ฉํ๋ ๋์ Vite๋ผ๋ 2์ธ๋ ๋ฒ๋ค๋ง ํด์ ์ฌ์ฉํ์ฌ ์๋ฒ์์ ์๋ํ๋ JS์ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ์๋๋ฅผ ๋์์ต๋๋ค.
- Vue.js์ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ Vuex๋ฅผ ์ฌ์ฉํ์ฌ state๋ฅผ ์์ฑ ๋ฐ ์์ ํ๋๋ก ๋ง๋ค์์ต๋๋ค.
this.$store.state.commit
,this.$store.state.dispatch
๋ฌธ์ ๊ฐ์ํํ๊ธฐ ์ํ์ฌmapState
,mapMutations
๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ์ํ์์ผฐ์ต๋๋ค.
- Vuex-persistedstate ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด Vuex ๋ฐ์ดํฐ๋ฅผ Localstorage์ ์ ์ฅํจ์ผ๋ก์จ ์๋ก๊ณ ์นจ์ ํด๋ ๋ฐ์ดํฐ๊ฐ ์ฌ๋ผ์ง์ง ์์ต๋๋ค.