[Vue] Store/Router

hyojeongยท2021๋…„ 10์›” 11์ผ
0

๋ฐ๋ธŒ์ฝ”์Šค

๋ชฉ๋ก ๋ณด๊ธฐ
45/50
post-thumbnail

๐Ÿ“šTIL

day38

Vuex Store

  • store๋Š” ์ „ํ˜€ ๊ด€๋ จ ์—†๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค ์‚ฌ์ด์—์„œ๋„ ๋ฐ์ดํ„ฐ๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์œ ์šฉ
  • ์ƒํƒœ๊ด€๋ฆฌ ํŒจํ„ด : state(์ค‘์•™์ง‘์ค‘ํ™”๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐ์ดํ„ฐ), view(ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š” ๋‚ด์šฉ), action(๋ฐ˜์‘์„ฑ ๋ฐ์ดํ„ฐ๋“ค์„ ๋™์ž‘)
  • createStore๋ฅผ ํ†ตํ•ด์„œ store ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•ด์ค€ ์ดํ›„ use๋ฅผ ํ†ตํ•ด์„œ ์—ฐ๊ฒฐ
  • store๊ธฐ๋ณธ ๊ตฌ์„ฑ : state(๋ฐ์ดํ„ฐ), getters(๊ณ„์‚ฐ๋œ ๋ฐ์ดํ„ฐ), mutations(๋ฐ์ดํ„ฐ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ), actions(๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ ์™ธ์˜ ๋กœ์ง๋“ค)
  • state : vuex์—์„œ๋Š” ๊ด€๋ฆฌํ•˜๊ณ  ์‚ฌ์šฉํ•  ๋ฐ์ดํ„ฐ๋ฅผ ์ƒํƒœ(state)๋ผ๊ณ  ๋ถ€๋ฅด๋ฉฐ ์ค‘์•™์— ์ง‘์ค‘๋˜์–ด์žˆ๋Š” ์ €์žฅ์†Œ ์—ญํ• ๋กœ ๋ฐ์ดํ„ฐ ์ˆ˜์ •์— ์šฉ์ด
  • state๋Š” ์ง์ ‘ ์ ‘๊ทผํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Œ
  • this.$store๋ฅผ ํ†ตํ•ด์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅ

store์˜ ๋ชจ๋“ˆํ™”

  • store๋ฅผ ๋ชจ๋“ˆํ™”ํ•ด์„œ ๋‚ด๋ณด๋‚ธ ํ›„ ๊บผ๋‚ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ
  • export๋ฅผ ํ†ตํ•ด์„œ ๋‚ด๋ณด๋‚ธ ํ›„ mapState, mapGetters, mapMutations, mapActions๋ฅผ ์ „๊ฐœ์—ฐ์‚ฐ์ž๋ฅผ ํ†ตํ•ด์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Œ

day39

Vue router

  • route๋ฅผ ๊ตฌ์„ฑํ•˜์—ฌ plugin์œผ๋กœ ์—ฐ๊ฒฐํ•˜๋ฉด this.$route/ $router๋ฅผ ํ†ตํ•ด ์ ‘๊ทผ ๊ฐ€๋Šฅ
  • this.$route : ํ˜„์žฌ ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Œ
  • this.$router : ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ์กฐ์ž‘์„ ํ•  ์ˆ˜ ์žˆ๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋งค์†Œ๋“œ๋“ค์ด ๋“ค์–ด์žˆ์Œ
  • : ์ž๋ฆฌ์— ํ•ด๋‹นํ•˜๋Š” ํŽ˜์ด์ง€๋“ค์ด ์ถœ๋ ฅ๋˜๋ฉฐ ํŽ˜์ด์ง€๊ฐ€ ๋ฐ”๋€” ๋•Œ ๋‹ค์‹œ ๊ทธ๋ ค์ฃผ๋Š” ์˜์—ญ
  • HOME : HOME์ด๋ผ๋Š” ๋ฒ„ํŠผ์„ ํ†ตํ•ด ์ด๋™ ๊ฐ€๋Šฅ
  • path:'/:notFount(.*)' : 404 Error๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ฃผ์†Œ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ ์–ด๋–ค ํŽ˜์ด์ง€๋ฅผ ์ถœ๋ ฅํ•  ์ง€ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์Œ
  • this.$router.push('url') : ์›ํ•˜๋Š” ์ฃผ์†Œ๋กœ ๋ณ€๊ฒฝ

๐ŸŽจ2021. 10. 06

store์™€ router ๊ฐ•์˜๋ฅผ ๋“ค์—ˆ๋‹ค. store์˜ ๊ฐœ๋…์„ ์–ด์ œ๋ณด๋‹ค ๋” ๊นŠ๊ฒŒ ๋ฐฐ์› ๋Š”๋ฐ ๋…ธ์…˜ํ”„๋กœ์ ํŠธ ๋•Œ customEvent๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋˜ ๋ฐฉ์‹๋ณด๋‹ค ํ›จ์”ฌ ๊ฐ„ํŽธํ•˜๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด vue๊ฐ€ ๋งค๋ ฅ์ ์œผ๋กœ ๋Š๊ปด์กŒ๋‹ค. Vanilla Js๋ฅผ ์‚ฌ์šฉํ•ด์„œ routerํ•˜๋Š” ๊ณผ์ •์€ ๊ต‰์žฅํžˆ ์–ด๋ ค์› ๋‹ค. ๋…ธ์…˜ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๋•Œ ํŠนํžˆ ์ฝ”๋“œ๊ฐ€ ๊ต‰์žฅํžˆ ์ง€์ €๋ถ„ํ•ด์ ธ์„œ ์•„์‰ฌ์› ๋Š”๋ฐ Vue๋Š” ๋ฅผ ํ†ตํ•ด์„œ ์ถœ๋ ฅํ•  ์˜์—ญ์„ ์ง€์ •ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณต์žก๋„๊ฐ€ ์ค„์–ด๋“ค๊ณ  ์ฝ”๋“œ ๊ด€๋ฆฌ๊ฐ€ ๊น”๋”ํ•ด์ ธ์„œ ์ข‹์•˜๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์“ฐ๋Š” ์ด์œ ๋ฅผ ์•Œ ๊ฒƒ ๊ฐ™๋‹ค. ํ›จ์”ฌ ๊ฐ„ํŽธํ•˜๊ฒŒ ์ฝ”๋“œ๋ฅผ ์งค ์ˆ˜ ์žˆ์„๊ฒƒ ๊ฐ™๋‹ค!
๋‚ด์ผ๋„ Vue ๊ฐ•์˜ ๋“ฃ๊ธฐ ~~!

profile
Front-end Develop๐Ÿฅฐ

0๊ฐœ์˜ ๋Œ“๊ธ€