[Vue+Nuxt.js] Vuex ์ƒˆ๋กœ๊ณ ์นจ ์‹œ ์ดˆ๊ธฐํ™” ๋˜๋Š” ๋ฌธ์ œ ํ•ด๊ฒฐ

2022. 6. 6. 02:31ใ†Front-End ์ž‘์—…์‹ค/Nuxt.js

728x90
๋ฐ˜์‘ํ˜•

 

Git Hub

 

 

 

๐Ÿ—‚ ๋ชฉ์ฐจ

โ— [Vue+Nuxt.js] Nuxt.js ๊ธฐ๋ณธ 
โ—[Vue+Nuxt.js] Nuxt.js ์‹œ์ž‘ํ•˜๊ธฐ 
โ— [Vue+Nuxt.js] Nuxt.js Data ํ˜ธ์ถœ ๋ฐฉ์‹๊ณผ API ์—ฐ๋™  
โ—[Vue+Nuxt.js] Nuxt.js๋ฅผ ์ด์šฉํ•˜์—ฌ ์‡ผํ•‘ ์ƒํ’ˆ ๋ชฉ๋ก ํŽ˜์ด์ง€์™€ ์ƒ์„ธ ํŽ˜์ด์ง€ ๊ฐœ๋ฐœ
โ— [Vue+Nuxt.js] Nuxt.js๋ฅผ ์ด์šฉํ•˜์—ฌ ์‡ผํ•‘ ์ƒํ’ˆ ๊ฒ€์ƒ‰ UI ๊ฐœ๋ฐœ
โ—[Vue+Nuxt.js] Vuex๋ฅผ ์ด์šฉํ•˜์—ฌ ์žฅ๋ฐ”๊ตฌ๋‹ˆ Page ๋งŒ๋“ค๊ธฐ
โ— [Vue+Nuxt.js] Vuex ์ƒˆ๋กœ๊ณ ์นจ ์‹œ ์ดˆ๊ธฐํ™” ๋˜๋Š” ๋ฌธ์ œ ํ•ด๊ฒฐ

 

 

๐Ÿ—‚ ๋ถ€๋ก

โ— [FrontEnd] HMR(Hot Module Replacement)
โ— [Nuxt.js] ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ ํ˜ธ์ถœ ๋ฐฉ๋ฒ•

โ— V-Model ๋™์ž‘ ์›๋ฆฌ์™€ ํ™œ์šฉ ๋ฐฉ๋ฒ•
โ— [Nuxt.js] NuxtServerInit

 

 

๐Ÿ—‚ ๋‚ด๊ฐ€ ๋งŒ๋‚œ Error

โ— [vuex] expects string as the type, but found undefined.

 

 

 

 

 

 

๐Ÿš€ ์žฅ๋ฐ”๊ตฌ๋‹ˆ Page Refactoring

    ๐Ÿ”ฝ  Vuex ๋ฌธ์ œ์  ํ•ด๊ฒฐ

        ๐Ÿ“ฆ ๊ฐœ์š”

Vuex๋Š” Component ๊ฐ„์— Data๋ฅผ ์ฃผ๊ณ  ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์—์„œ ์•„์ฃผ ์ข‹์€ ์นœ๊ตฌ์ด์ง€๋งŒ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ์ด ๋œ๋‹ค๋ฉด ์ดˆ๊ธฐํ™”๊ฐ€ ๋˜์–ด๋ฒ„๋ฆฐ๋‹ค๋Š” ์น˜๋ช…์ ์ธ ๋‹จ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์š”.

์ด ์ „  [Vue+Nuxt.js] Vuex๋ฅผ ์ด์šฉํ•˜์—ฌ ์žฅ๋ฐ”๊ตฌ๋‹ˆ Page ๋งŒ๋“ค๊ธฐ์—์„œ ์ด์•ผ๊ธฐ ํ•˜์˜€์ง€๋งŒ, ์ด์œ ๋Š” Java Script ๊ธฐ๋ฐ˜์˜ Vuex๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ์ด ๋˜๋ฉด Java Script๋Š” ์ดˆ๊ธฐํ™”๊ฐ€ ๋˜์–ด๋ฒ„๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋ผ๋Š” ๊ฒƒ์„ ์šฐ๋ฆฌ๋Š” ๊ณต๋ถ€ํ•œ ๋ฐ” ์žˆ์–ด์š”.

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์šฐ๋ฆฌ๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์„ ๊ณ ๋ฏผํ•ด ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

์ฒซ๋ฒˆ์งธ๋Š” Browser Level์—์„œ ์ €์žฅ์ด ๋  ์ˆ˜ ์žˆ๋„๋ก Browser Storage(Local, Session Storage, Cookie)๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๊ณ , 

๋‘๋ฒˆ์งธ ๋ฐฉ๋ฒ•์€ Cart์— Item์„ Server ์ชฝ์— ๋ณด๋‚ด Server์— ์ €์žฅํ•˜๊ณ , ๊ณ„์ •๋ณ„๋กœ ํ•ด๋‹น Data๋ฅผ ์กฐํšŒํ•ด ์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ์ด์—์š”.

์ด๋ฒˆ ๊ณต๋ถ€์—์„œ๋Š” ๋‘๋ฒˆ์งธ ๋ฐฉ๋ฒ•์„ ํ†ตํ•ด ServerInit์— ๋Œ€ํ•ด ๊ณต๋ถ€๋ฅผ ํ•ด ๋ณด๋ ค๊ณ  ํ•ด์š”.

 

 

        ๐Ÿ“ฆ ์žฅ๋ฐ”๊ตฌ๋‹ˆ ๋ชฉ๋ก ์ถ”๊ฐ€ ๊ธฐ๋Šฅ API ์—ฐ๋™

์ด๋ฒˆ์— ์žฅ๋ฐ”๊ตฌ๋‹ˆ ๋‹ด๊ธฐ ๋ฒ„ํŠผ์„ ์ด์šฉ ํ•˜์—ฌ Cart Data๋ฅผ ๋‹ด์„ ๋•Œ API๋ฅผ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ณต๋ถ€ํ•ด ๋ณผ๊ฒŒ์š”.

/api/index.js

 

๋จผ์ € ์œ„์™€ ๊ฐ™์ด 21๋ฒˆ์งธ ์ค„์— ์ƒˆ๋กœ์šด ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์—ˆ์–ด์š”. ํ•ด๋‹น ํ•จ์ˆ˜๋Š” cartItem์„ ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ๋ฐ›๊ฒŒ ๋˜๊ณ , 3๋ฒˆ์งธ ์ค„์— axios.create()๋ฅผ ๋ฐ›์€ ์ƒ์ˆ˜ํ˜• ๋ณ€์ˆ˜ instance๋ฅผ ํ†ตํ•ด API์— post๋กœ URI๋Š” /carts๋กœ ๋ณด๋‚ด์ฃผ๊ณ , ํ˜ธ์ถœํ•  ๋•Œ, Body์— Payload๋ฅผ cartItem์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด ์ฃผ์—ˆ์–ด์š”.

/pages/detail/_id.vue

 

์ด๋ฒˆ์— ์šฐ๋ฆฌ๊ฐ€ ์ฃผ๋ชฉํ•ด์•ผ ํ•˜๋Š” ๋ถ€๋ถ„์€ 42๋ฒˆ์งธ ์ค„์ด์—์š”. /api/index.js์—์„œ exportํ•œ createCartItem()์„ ํ†ตํ•ด ์„ ํƒ ๋œ ์ƒํ’ˆ์„ ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ์„ ํ•ด์ฃผ๊ณ , API์— ์‘๋‹ต๊ฐ’์„ ์ƒ์ˆ˜ํ˜• ๋ณ€์ˆ˜ response์— ์ €์žฅํ•˜๋„๋ก ํ•ด ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

http://localhost:4000/cart

์ž! Cart์— Item์„ ๋‹ด๊ณ  ๋‚˜์„œ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ Network Tab์—์„œ carts์— ๋Œ€ํ•ด Response Header๋ฅผ ๋ณด๋‹ˆ 201(Created)๋กœ ์ •์ƒ ํ˜ธ์ถœ ๋œ ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๊ณ , ๊ทธ ์•„๋ž˜ Console ์ค‘ ๋งจ ์•„๋ž˜๋ฅผ ๋ณด๋ฉด 44๋ฒˆ์งธ์— ์ถœ๋ ฅํ•˜๊ณ ์ž ํ–ˆ๋˜ ์‘๋‹ต ๊ฒฐ๊ณผ๊ฐ’์ด ์ •์ƒ์ ์œผ๋กœ ์ฐํžŒ ๊ฒƒ์„ ๋ณผ ์ˆ˜๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

 

http://localhost:3000/carts

MOCK API Server๋ฅผ ํ™•์ธ ํ•ด ๋ณด๋‹ˆ id 9๋กœ ์ •์ƒ์ ์œผ๋กœ Data๊ฐ€ ๋“ค์–ด๊ฐ„ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ์–ด์š”!
 

 

๋ฐ˜์‘ํ˜•

 

        ๐Ÿ“ฆ ์žฅ๋ฐ”๊ตฌ๋‹ˆ ๋ชฉ๋ก ์ถ”๊ฐ€ ๊ธฐ๋Šฅ API ์—ฐ๋™

์ด๋ฒˆ์—๋Š” Vuex ์ฆ‰, Store์— Actions๋ฅผ ์ด์šฉํ•ด์„œ ์žฅ๋ฐ”๊ตฌ๋‹ˆ ๋ชฉ๋ก ์กฐํšŒ ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด ๋ณด๋„๋ก ํ• ๊ฒŒ์š”.

์ตœ์ดˆ ์•„๋ž˜์™€ ๊ฐ™์ด ํ•จ์ˆ˜ ํ•˜๋‚˜๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์—ˆ์–ด์š”.

/api/index.js

 

์ด ๊ณณ์—์„œ๋Š” 22 ~ 24๋ฒˆ์งธ ์ค„์ด ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์ด์—์š”.
์šฐ๋ฆฌ๊ฐ€ ์œ„์—์„œ API์— ๊ฐ’์„ ์ €์žฅํ–ˆ์œผ๋‹ˆ ๋ถˆ๋Ÿฌ์˜จ๋‹ค๊ณ  ํ•˜์˜€์–ด์š”. API์— HTTP get Method๋ฅผ ํ†ตํ•ด ๊ฐ’์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” API ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์—ˆ๊ณ ,

 

/api/index.js

 

์ด๋ ‡๊ฒŒ ์™ธ๋ถ€์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ export๋ฅผ ํ•ด ์ฃผ์—ˆ์–ด์š”.

์ด๋ฒˆ์—๋Š” /store/index.js์— actions๋ฅผ ๋งŒ๋“ค์–ด ๋ณผ๊ฒŒ์š”.

/store/index.js

 

์ƒ๋‹จ์— fetchCartItems()๊ฐ€ import๋œ ๊ฒƒ์„ ์žŠ์œผ๋ฉด ์•ˆ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

์œ„์™€ ๊ฐ™์ด actions๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์—ˆ๊ณ ,

 

Vuex ๊ตฌ์กฐ๋„

 

/store/index.js

 

์œ„์˜ 6๋ฒˆ์งธ ์ค„์— ์ƒ์ˆ˜ํ˜• ๋ณ€์ˆ˜ ํ•˜๋‚˜์— ๋ฌธ์ž์—ด์„ ์ง‘์–ด ๋„ฃ์–ด์ฃผ๊ณ ,

 

/store/index.js

 

31๋ฒˆ์งธ ์ค„์— ํ•จ์ˆ˜ ์ด๋ฆ„์„ ์ƒ์ˆ˜ํ˜• ๋ณ€์ˆ˜๋กœ ์ฃผ์—ˆ๋Š”๋ฐ, ์ด ์ด์œ ๋Š” ๋’ค์— ์„ค๋ช…์„ ํ• ๊ฒŒ์š”. ์ด๋ ‡๊ฒŒ ํ•˜๊ณ , commit์„ ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ๋ฐ›๊ฒŒ ๋˜๋Š”๋ฐ, commit์€ Actions์—์„œ Mutations๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ์ด์šฉํ•˜๋Š” ๊ฑฐ์—์š”.

32๋ฒˆ์งธ ์ค„์— ์œ„์—์„œ ์ด์•ผ๊ธฐ ํ–ˆ๋˜ /api/index.js์— ์„ ์–ธํ–ˆ๋˜ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด์„œ ๋™์ž‘ ์‹œํ‚ค๋Š”๋ฐ, ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ๋๋‚˜๊ธฐ ์ „๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ async์™€ await๋ฅผ ์ด์šฉํ•ด ์ฃผ์—ˆ๊ณ , API ์‘๋‹ต๊ฐ’์€ data๋ผ๋Š” ๊ฐ์ฒด ๋‹ด๊ฒจ์„œ ์˜ค๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ”๋กœ data ๋ณ€์ˆ˜๋ฅผ ๋ฐ›๊ธฐ ์œ„ํ•ด ์œ„์™€ ๊ฐ™์ด ์ž‘์„ฑํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

35๋ฒˆ์žฌ ์ค„์—์„œ ๋“œ๋””์–ด commit์„ ํ†ตํ•ด Mutations๋ฅผ ํ˜ธ์ถœํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, 

/store/index.js

 

Mutations์˜ 25 ~ 27๋ฒˆ์งธ ์ค„์—์„œ ์„ ์–ธํ•œ setCartItems()๋ฅผ ํ˜ธ์ถœํ•˜๋„๋ก ํ•œ ๊ฒƒ์ด์—์š”. ์ด ํ•จ์ˆ˜๋Š” state์™€ ์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ๋‹ด๊ธด Data๋“ค์„ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฐ›๊ฒŒ ๋˜๊ณ , JAVA๋กœ ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•˜๋ฉด Setter์—์š”!

35๋ฒˆ์งธ ์ค„์— commit์„ ํ˜ธ์ถœํ•  ๋•Œ, setCartItems()๋ฅผ ํ˜ธ์ถœํ•˜๊ฒŒ ํ•˜๊ณ , ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ API์—์„œ ๋ฐ›์€ Data๋ฅผ ๋ณด๋‚ด์ฃผ๊ฒŒ ๋˜๋ฉด

Setter์ธ setCartItems()๋Š” ํ•ด๋‹น ๋งค๊ฐœ ๋ณ€์ˆ˜๊ฐ’์„ ๊ทธ๋Œ€๋กœ ๋ฐ›์•„ state์— cartItems[]์— ๊ฐ’์„ ๋„ฃ๊ฒŒ ๋  ๊ฒƒ์ด์—์š”.

 

์ž! ์ด์ œ ๊ทธ๋Ÿผ /pages/cart.vue์—์„œ ํ•ด๋‹น Actions๋ฅผ ์ด์šฉํ•ด์„œ ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผ ๊ฒ ์ง€์š”?

/pages/cart.vue

 

ํŠน์ • Page๊ฐ€ Renderingํ•˜๊ธฐ ์ „์— Data ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด asyncData()๋ฅผ ์จ์•ผํ•ด์š”.
Cart๋ผ๋Š” Page๊ฐ€ ์—ด๋ฆฌ๊ธฐ ์ „์— Cart ๋ชฉ๋ก์„ ๊ฐ€์ ธ์™€์•ผ ํ•˜๋‹Œ๊นŒ asyncData()๋ฅผ ์ด์šฉํ•ด ์ฃผ์—ˆ๊ณ , ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ store๋ฅผ ๋ฐ›๊ฒŒ ํ•ด ์ฃผ์—ˆ์–ด์š”.

35๋ฒˆ์งธ ์ค„์— store์•ˆ์— dispatch()๋ฅผ ํ˜ธ์ถœํ•ด์„œ ์œ„์—์„œ ์ด์•ผ๊ธฐ ํ•œ๋Œ€๋กœ Actions๋ฅผ ์ด์šฉํ•˜๋ ค๊ณ  ํ•œ Code์—์š”.

 

 

์•—! ๊ทผ๋ฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ ํ•ด ๋ฒ„๋ ธ์–ด์š”!

์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ •๋ฆฌ๋Š” '์ด ๊ณณ'์— ์ค€๋น„ ํ•ด ๋‘์—ˆ์Šต๋‹ˆ๋‹ค!


http://localhost:4000/cart

 

์ด๋ ‡๊ฒŒ ์ •์ƒ์ ์œผ๋กœ Mock API Server์— ์ €์žฅ๋˜์–ด ์žˆ๋Š” Data๋ฅผ ์ •์ƒ์ ์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๊ณ , ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•ด๋„ Data๊ฐ€ ๋‚ ์•„๊ฐ€์ง€ ์•Š๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•˜์˜€์–ด์š”!

 

 

 

 

    ๐Ÿ”ฝ  NuxtServerInit

        ๐Ÿ“ฆ NuxtServerInit์ด๋ž€?

NuxtServerInit์— ๋Œ€ํ•œ ์†Œ๊ฐœ๋Š” '์ด ๊ณณ'์— ์ค€๋น„ ํ•ด ๋‘์—ˆ์–ด์š”!

/store/index.js

NuxtServerInit ๊ฐœ์š”์—์„œ ๊ณต๋ถ€ ํ•ด๋ดค๋“ฏ์ด NuxtServerInit์€ actions์— ํ•˜๋‚˜์˜ ํ•จ์ˆ˜์ธ ๊ฒƒ์ด์—์š”.
์ด ์นœ๊ตฌ๋Š” Nuxt ์ž์ฒด๊ฐ€ ๊ตฌ๋™ํ•  ๋•Œ, ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— created(), asyncData() ๋ณด๋‹ค ํ›จ์”ฌ ๋น ๋ฅด๊ฒŒ Data๋ฅผ ๊ฐ€์ ธ์˜ค๊ฒŒ ํ•  ์ˆ˜ ์žˆ์–ด์š”. ์ผ์ข…์˜ Life Cycle Hook์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์ตœ์ดˆ 45๋ฒˆ์งธ ์ค„์„ ๋ณด๋ฉด nuxtServerInit()์„ ๋งŒ๋“ค์–ด ์ฃผ๊ณ , ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ store์— Context์™€ nuxt์˜ Context ๊ฐ’์ด ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ๋“ค์–ด์˜ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์–ด์š”.

๊ทธ๋Ÿฐ ๋’ค 46๋ฒˆ์งธ ์ค„์— stroeContext์•ˆ์— dispatch()๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ 31๋ฒˆ์งธ ์ค„์— FETCH_CART_ITMES()๋ฅผ ํ˜ธ์ถœํ•˜๋„๋ก ํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

์ด๋ ‡๊ฒŒ ํ•œ ์ด์œ ๋Š” Service๊ฐ€ ์ปค์ง€๋ฉด nuxt๊ฐ€ ๊ตฌ๋™๋˜๊ธฐ ์ „ ๊ฐ€์ ธ์™€์•ผ ํ•  Data๊ฐ€ ๋งŽ์„ํ…๋ฐ, ์ˆ˜์‹ญ, ์ˆ˜๋ฐฑ์ค„์„ nuxtServerInit()์— ์ ๋Š” ๊ฒƒ๋ณด๋‹ค actions์—์„œ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ณ , dispatch๋ฅผ ํ†ตํ•ด ์ ‘๊ทผํ•˜๊ฒŒ ํ•ด์ฃผ๋ฉด ๋” ๊ฐ€๋…์„ฑ์ด ์ข‹๊ธฐ ๋•Œ๋ฌธ์ด์—์š”.

์ฐธ๊ณ ๋กœ NuxtServerInit()์€ Nuxt๊ฐ€ ์•Œ์•„์„œ ๊ตฌ๋™์„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋”ฐ๋กœ ํ˜ธ์ถœํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

/pages/cart.vue

์ด๋Ÿฌํ•œ ์ด์œ ๋กœ ๊ธฐ์กด์— cart.vue์—์„œ asyncData()๋ฅผ ํ†ตํ•ด Data๋ฅผ ๋ฐ›์•„์˜ค๊ฒŒ ํ–ˆ๋˜ Code๊ฐ€ ๋ชจ๋‘ ํ•„์š”๊ฐ€ ์—†์–ด์ ธ ๋ฒ„๋ ธ์–ด์š”.




 

        ๐Ÿ“ฆ Cart Component ๋ถ„๋ฆฌํ•˜๊ธฐ

 

/pages/cart.vue

Component ๋ถ„๋ฆฌ๋ฅผ ์œ„ํ•ด ๋ชฉ๋ก์„ ๋ณด์—ฌ์ฃผ๋Š” ๋ถ€๋ถ„๋“ค์— Code๋ฅผ ๋ชจ๋‘ ๋–ผ์–ด ๋‚ด ๋ฒ„๋ ธ์–ด์š”.

๊ทธ๋Ÿฐ ๋’ค ํ•ด๋‹น Code๋ฅผ ๊ฐ€์งˆ Component CartList.vue๋ฅผ ๋งŒ๋“ค๊ณ , ํ•ด๋‹น Component๋ฅผ import ํ•ด ์ฃผ์—ˆ์–ด์š”.



/components/CartList.vue

์œ„์™€ ๊ฐ™์ด ๋–ผ์–ด๋‚ธ Code๋“ค์„ ๋ถ™ํ˜€์ฃผ์—ˆ๊ณ , Style์ด ๊นจ์ง€์ง€ ์•Š๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด CSS Code ๋ถ€๋ถ„๋„ ๊ทธ๋Œ€๋กœ ๋ณต์‚ฌํ•ด ์™”์Šต๋‹ˆ๋‹ค.

Vue์™€ ๊ฐ™์€ Framwork๋ฅผ ์ด์šฉํ•˜๋Š” ์ด์œ ๋Š” Component๋ฅผ ์ž˜๊ฒŒ ์ž˜๋ผ์„œ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด๋Š” ๋“ฑ์— ์ด ์ ์„ ์–ป๊ธฐ ์œ„ํ•จ์ด๋ผ๊ณ  ํ•ด์š”.

๊ทธ๋Ÿฐ๋ฐ ์œ„์˜ List์—์„œ ์กฐํšŒ ๋˜๋Š” ๊ฐ๊ฐ์˜ Item๋“ค๋„ Component๋กœ ์ž˜๋ผ์ค˜์•ผ ํ•˜์ง€ ์•Š์„๊นŒ์š”?

ํ•˜์ง€๋งŒ ๊ทธ๋ ‡๊ฒŒ ๋˜๋ฉด ๋„ˆ๋ฌด ๋งŽ์€ Props๊ฐ€ ์ƒ๊ธด๋‹ค๋Š” ๋‹จ์ ์ด ์ƒ๊น๋‹ˆ๋‹ค. ๋˜ํ•œ, ์‹ค๋ฌด์—์„œ๋Š” Component ์ž์ฒด์—์„œ Data๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค˜์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด ๋งŽ๋‹ค๊ณ  ํ•ด์š”. ํ•˜์ง€๋งŒ, ์šฐ๋ฆฌ๊ฐ€ ๊ณต๋ถ€ ํ–ˆ๋“ฏ์ด Component์—์„œ๋Š” asyncData()๋ฅผ ์‚ฌ์šฉํ•ด ์ค„ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— Rendering์ด ๋˜๊ธฐ ์ „์— Data๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ fetch ์†์„ฑ์ด๋ผ๋Š” ์นœ๊ตฌ๋ผ๋„ค์š”.

 

 

 

        ๐Ÿ“ฆ fetch ์†์„ฑ ์†Œ๊ฐœ์™€ ์ ์šฉ

/store/index.js

์ตœ์ดˆ fetch() Test๋ฅผ ์œ„ํ•ด nuxtServerInit์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ์ฃผ์„์ฒ˜๋ฆฌ ํ•ด ์ฃผ๋„๋ก ํ• ๊ฒŒ์š”.

 

 

/components/CartList.vue

19๋ฒˆ์งธ ์ค„์—์„œ /store/index.js ์•ˆ์— actions์— FETCH_CART_ITEMS๋ฅผ importํ•˜๊ณ , dispatch๋ฅผ ํ†ตํ•ด Mutation์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•œ FETCH_CART_ITEMS()๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ฃผ์—ˆ์–ด์š”.

๊ทธ๋Ÿผ API์— ์ €์žฅ๋˜์–ด ์žˆ๋˜ Cart ๋ชฉ๋ก์ด ์กฐํšŒ๊ฐ€ ๋˜์–ด์•ผ ํ•˜๋Š” ๊ฒƒ์ด์—์š”.

์ •๋ง component์—์„œ asyncData()์ฒ˜๋Ÿผ fetch()๊ฐ€ ๋™์ž‘์„ ํ•œ๋‹ค๋ฉด ๋ง์ด์—์š”.


http://localhost:4000/cart


์œ„์™€ ๊ฐ™์ด ์ •์ƒ์ ์œผ๋กœ ์ž˜ ๋™์ž‘ํ•˜๊ณ , Vue devtool์„ ํ†ตํ•ด ๋ณด๋ฉด Component๋„ ์ œ๋Œ€๋กœ ๋ถ„๋ฆฌ๊ฐ€ ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์–ด์š”.

 

 

 

        ๐Ÿ“ฆ fetch ์†์„ฑ ํŠน์„ฑ ๋ฐ ์ฃผ์˜ ์‚ฌํ•ญ

fetch()๋ฅผ ์ด์šฉํ•œ Component๋ฅผ ์ด๋™ํ•  ๋•Œ, ๋‹ค๋ฅธ Page ๋“ฑ์—์„œ ์ด๋™์„ ํ•œ๋‹ค๊ณ  ํ•˜๋ฉด Component๊ฐ€ Rendering๋˜๊ณ , API์— ๊ฐ’์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋“ฑ์— Data ๋ถˆ๋Ÿฌ์˜ค๋Š” ์ž‘์—…์œผ๋กœ ์ธํ•ด ์ž ์‹œ ๋™์•ˆ ๋นˆ ๊ฐ์ฒด๊ฐ€ ๋ณด์ด๋Š” ๋“ฑ์— ์ƒํ™ฉ์ด ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ, ๋ฐ”๋กœ ํ•ด๋‹น Component์˜ URL์„ ์น˜๊ณ  ์ ‘๊ทผ์„ ํ•ด ๋ฒ„๋ฆฌ๋ฉด Data๋ฅผ ๋ถˆ๋Ÿฌ์˜จ ์ƒํƒœ์—์„œ Rendering์ด ๋œ๋‹ค๋Š” ๊ฒƒ์„ ๊ธฐ์–ตํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์ด์—์š”.

asyncData()์˜ ๊ฒฝ์šฐ์—๋Š” Page๊ฐ€ Rendering ๋˜๊ธฐ ์ „์— ํ˜ธ์ถœ๋˜๊ธฐ ๋•Œ๋ฌธ์— this Keyword๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์ง€๋งŒ, fetch()์˜ ๊ฒฝ์šฐ์—๋Š” this Keyword๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

fetch()๋Š” ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์—†๋Š” ๊ฒƒ๋„ ํŠน์ง•์ด์—์š”. ์˜ˆ์ „์—๋Š” ์ด์šฉํ•  ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ, ์ง€๊ธˆ์€ ์ด์šฉํ•  ์ˆ˜ ์—†๋‹ค๊ณ  ํ•˜๋„ค์š”.

 

 

 

 

 

 

 

 

 

728x90
๋ฐ˜์‘ํ˜•