2022. 6. 6. 02:31ใFront-End ์์ ์ค/Nuxt.js

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๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ ๊ณต๋ถํด ๋ณผ๊ฒ์.

๋จผ์ ์์ ๊ฐ์ด 21๋ฒ์งธ ์ค์ ์๋ก์ด ํจ์๋ฅผ ๋ง๋ค์ด ์ฃผ์์ด์. ํด๋น ํจ์๋ cartItem์ ๋งค๊ฐ ๋ณ์๋ก ๋ฐ๊ฒ ๋๊ณ , 3๋ฒ์งธ ์ค์ axios.create()๋ฅผ ๋ฐ์ ์์ํ ๋ณ์ instance๋ฅผ ํตํด API์ post๋ก URI๋ /carts๋ก ๋ณด๋ด์ฃผ๊ณ , ํธ์ถํ ๋, Body์ Payload๋ฅผ cartItem์ ์ ๋ฌํ ์ ์๋๋ก ํด ์ฃผ์์ด์.

์ด๋ฒ์ ์ฐ๋ฆฌ๊ฐ ์ฃผ๋ชฉํด์ผ ํ๋ ๋ถ๋ถ์ 42๋ฒ์งธ ์ค์ด์์. /api/index.js์์ exportํ createCartItem()์ ํตํด ์ ํ ๋ ์ํ์ ๋งค๊ฐ ๋ณ์๋ก ์ ๋ฌ์ ํด์ฃผ๊ณ , API์ ์๋ต๊ฐ์ ์์ํ ๋ณ์ response์ ์ ์ฅํ๋๋ก ํด ์ฃผ์์ต๋๋ค.

์! Cart์ Item์ ๋ด๊ณ ๋์ ๊ฐ๋ฐ์ ๋๊ตฌ Network Tab์์ carts์ ๋ํด Response Header๋ฅผ ๋ณด๋ 201(Created)๋ก ์ ์ ํธ์ถ ๋ ๊ฒ์ ํ์ธ ํ ์ ์๊ณ , ๊ทธ ์๋ Console ์ค ๋งจ ์๋๋ฅผ ๋ณด๋ฉด 44๋ฒ์งธ์ ์ถ๋ ฅํ๊ณ ์ ํ๋ ์๋ต ๊ฒฐ๊ณผ๊ฐ์ด ์ ์์ ์ผ๋ก ์ฐํ ๊ฒ์ ๋ณผ ์๊ฐ ์๋ ๊ฒ์ด์์.

MOCK API Server๋ฅผ ํ์ธ ํด ๋ณด๋ id 9๋ก ์ ์์ ์ผ๋ก Data๊ฐ ๋ค์ด๊ฐ ๊ฒ์ ํ์ธํ ์ ์์์ด์!
๐ฆ ์ฅ๋ฐ๊ตฌ๋ ๋ชฉ๋ก ์ถ๊ฐ ๊ธฐ๋ฅ API ์ฐ๋
์ด๋ฒ์๋ Vuex ์ฆ, Store์ Actions๋ฅผ ์ด์ฉํด์ ์ฅ๋ฐ๊ตฌ๋ ๋ชฉ๋ก ์กฐํ ๊ธฐ๋ฅ์ ๋ง๋ค์ด ๋ณด๋๋ก ํ ๊ฒ์.
์ต์ด ์๋์ ๊ฐ์ด ํจ์ ํ๋๋ฅผ ๋ง๋ค์ด ์ฃผ์์ด์.

์ด ๊ณณ์์๋ 22 ~ 24๋ฒ์งธ ์ค์ด ๊ฐ์ฅ ์ค์ํ ๋ถ๋ถ์ด์์.
์ฐ๋ฆฌ๊ฐ ์์์ API์ ๊ฐ์ ์ ์ฅํ์ผ๋ ๋ถ๋ฌ์จ๋ค๊ณ ํ์์ด์. API์ HTTP get Method๋ฅผ ํตํด ๊ฐ์ ๋ถ๋ฌ์ค๋ API ํจ์๋ฅผ ๋ง๋ค์ด ์ฃผ์๊ณ ,

์ด๋ ๊ฒ ์ธ๋ถ์์ ์ฌ์ฉํ ์ ์๊ฒ export๋ฅผ ํด ์ฃผ์์ด์.
์ด๋ฒ์๋ /store/index.js์ actions๋ฅผ ๋ง๋ค์ด ๋ณผ๊ฒ์.

์๋จ์ fetchCartItems()๊ฐ import๋ ๊ฒ์ ์์ผ๋ฉด ์ ๋๋ ๊ฒ์ด์์.
์์ ๊ฐ์ด actions๋ฅผ ๋ง๋ค์ด ์ฃผ์๊ณ ,


์์ 6๋ฒ์งธ ์ค์ ์์ํ ๋ณ์ ํ๋์ ๋ฌธ์์ด์ ์ง์ด ๋ฃ์ด์ฃผ๊ณ ,

31๋ฒ์งธ ์ค์ ํจ์ ์ด๋ฆ์ ์์ํ ๋ณ์๋ก ์ฃผ์๋๋ฐ, ์ด ์ด์ ๋ ๋ค์ ์ค๋ช
์ ํ ๊ฒ์. ์ด๋ ๊ฒ ํ๊ณ , commit์ ๋งค๊ฐ ๋ณ์๋ก ๋ฐ๊ฒ ๋๋๋ฐ, commit์ Actions์์ Mutations๋ฅผ ํธ์ถํ ๋ ์ด์ฉํ๋ ๊ฑฐ์์.
32๋ฒ์งธ ์ค์ ์์์ ์ด์ผ๊ธฐ ํ๋ /api/index.js์ ์ ์ธํ๋ ํจ์๋ฅผ ํธ์ถํด์ ๋์ ์ํค๋๋ฐ, ํด๋น ํจ์๊ฐ ๋๋๊ธฐ ์ ๊น์ง ๊ธฐ๋ค๋ฆฌ๊ฒ ํ๊ธฐ ์ํด์ async์ await๋ฅผ ์ด์ฉํด ์ฃผ์๊ณ , API ์๋ต๊ฐ์ data๋ผ๋ ๊ฐ์ฒด ๋ด๊ฒจ์ ์ค๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก data ๋ณ์๋ฅผ ๋ฐ๊ธฐ ์ํด ์์ ๊ฐ์ด ์์ฑํด ์ค ๊ฒ์ด์์.
35๋ฒ์ฌ ์ค์์ ๋๋์ด commit์ ํตํด Mutations๋ฅผ ํธ์ถํ๊ฒ ๋๋๋ฐ,

Mutations์ 25 ~ 27๋ฒ์งธ ์ค์์ ์ ์ธํ setCartItems()๋ฅผ ํธ์ถํ๋๋ก ํ ๊ฒ์ด์์. ์ด ํจ์๋ state์ ์ฅ๋ฐ๊ตฌ๋์ ๋ด๊ธด Data๋ค์ ๋งค๊ฐ๋ณ์๋ก ๋ฐ๊ฒ ๋๊ณ , JAVA๋ก ์ฝ๊ฒ ์ค๋ช
ํ๋ฉด Setter์์!
35๋ฒ์งธ ์ค์ commit์ ํธ์ถํ ๋, setCartItems()๋ฅผ ํธ์ถํ๊ฒ ํ๊ณ , ๋งค๊ฐ ๋ณ์๋ก API์์ ๋ฐ์ Data๋ฅผ ๋ณด๋ด์ฃผ๊ฒ ๋๋ฉด
Setter์ธ setCartItems()๋ ํด๋น ๋งค๊ฐ ๋ณ์๊ฐ์ ๊ทธ๋๋ก ๋ฐ์ state์ cartItems[]์ ๊ฐ์ ๋ฃ๊ฒ ๋ ๊ฒ์ด์์.
์! ์ด์ ๊ทธ๋ผ /pages/cart.vue์์ ํด๋น Actions๋ฅผ ์ด์ฉํด์ ๊ฐ์ ๊ฐ์ ธ์ฌ ์ ์๋๋ก ํด์ผ ๊ฒ ์ง์?

ํน์ Page๊ฐ Renderingํ๊ธฐ ์ ์ Data ์ฒ๋ฆฌ๋ฅผ ํ๊ณ ์ถ๋ค๋ฉด asyncData()๋ฅผ ์จ์ผํด์.
Cart๋ผ๋ Page๊ฐ ์ด๋ฆฌ๊ธฐ ์ ์ Cart ๋ชฉ๋ก์ ๊ฐ์ ธ์์ผ ํ๋๊น asyncData()๋ฅผ ์ด์ฉํด ์ฃผ์๊ณ , ๋งค๊ฐ ๋ณ์๋ก store๋ฅผ ๋ฐ๊ฒ ํด ์ฃผ์์ด์.
35๋ฒ์งธ ์ค์ store์์ dispatch()๋ฅผ ํธ์ถํด์ ์์์ ์ด์ผ๊ธฐ ํ๋๋ก Actions๋ฅผ ์ด์ฉํ๋ ค๊ณ ํ Code์์.

์! ๊ทผ๋ฐ ๋ฌธ์ ๊ฐ ๋ฐ์ ํด ๋ฒ๋ ธ์ด์!
์ด ๋ฌธ์ ์ ๋ํ ์ ๋ฆฌ๋ '์ด ๊ณณ'์ ์ค๋น ํด ๋์์ต๋๋ค!

์ด๋ ๊ฒ ์ ์์ ์ผ๋ก Mock API Server์ ์ ์ฅ๋์ด ์๋ Data๋ฅผ ์ ์์ ์ผ๋ก ๋ถ๋ฌ์ค๋ ๊ฒ์ ํ์ธํ ์ ์๊ณ , ์๋ก๊ณ ์นจ์ ํด๋ Data๊ฐ ๋ ์๊ฐ์ง ์๋ ๊ฒ์ ํ์ธ ํ์์ด์!
๐ฝ NuxtServerInit
๐ฆ NuxtServerInit์ด๋?
NuxtServerInit์ ๋ํ ์๊ฐ๋ '์ด ๊ณณ'์ ์ค๋น ํด ๋์์ด์!

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๊ฐ ์์์ ๊ตฌ๋์ ํ๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ํธ์ถํ ํ์๊ฐ ์์ต๋๋ค.

์ด๋ฌํ ์ด์ ๋ก ๊ธฐ์กด์ cart.vue์์ asyncData()๋ฅผ ํตํด Data๋ฅผ ๋ฐ์์ค๊ฒ ํ๋ Code๊ฐ ๋ชจ๋ ํ์๊ฐ ์์ด์ ธ ๋ฒ๋ ธ์ด์.
๐ฆ Cart Component ๋ถ๋ฆฌํ๊ธฐ

Component ๋ถ๋ฆฌ๋ฅผ ์ํด ๋ชฉ๋ก์ ๋ณด์ฌ์ฃผ๋ ๋ถ๋ถ๋ค์ Code๋ฅผ ๋ชจ๋ ๋ผ์ด ๋ด ๋ฒ๋ ธ์ด์.
๊ทธ๋ฐ ๋ค ํด๋น Code๋ฅผ ๊ฐ์ง Component CartList.vue๋ฅผ ๋ง๋ค๊ณ , ํด๋น Component๋ฅผ import ํด ์ฃผ์์ด์.

์์ ๊ฐ์ด ๋ผ์ด๋ธ Code๋ค์ ๋ถํ์ฃผ์๊ณ , Style์ด ๊นจ์ง์ง ์๊ฒ ํ๊ธฐ ์ํด CSS Code ๋ถ๋ถ๋ ๊ทธ๋๋ก ๋ณต์ฌํด ์์ต๋๋ค.
Vue์ ๊ฐ์ Framwork๋ฅผ ์ด์ฉํ๋ ์ด์ ๋ Component๋ฅผ ์๊ฒ ์๋ผ์ ์ฌ์ฌ์ฉ์ฑ์ ๋์ด๋ ๋ฑ์ ์ด ์ ์ ์ป๊ธฐ ์ํจ์ด๋ผ๊ณ ํด์.
๊ทธ๋ฐ๋ฐ ์์ List์์ ์กฐํ ๋๋ ๊ฐ๊ฐ์ Item๋ค๋ Component๋ก ์๋ผ์ค์ผ ํ์ง ์์๊น์?
ํ์ง๋ง ๊ทธ๋ ๊ฒ ๋๋ฉด ๋๋ฌด ๋ง์ Props๊ฐ ์๊ธด๋ค๋ ๋จ์ ์ด ์๊น๋๋ค. ๋ํ, ์ค๋ฌด์์๋ Component ์์ฒด์์ Data๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๊ฒ ํด์ค์ผ ํ๋ ์ํฉ์ด ๋ง๋ค๊ณ ํด์. ํ์ง๋ง, ์ฐ๋ฆฌ๊ฐ ๊ณต๋ถ ํ๋ฏ์ด Component์์๋ asyncData()๋ฅผ ์ฌ์ฉํด ์ค ์ ์๊ธฐ ๋๋ฌธ์ Rendering์ด ๋๊ธฐ ์ ์ Data๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๋ ๋ฐฉ๋ฒ์ ์ฐพ์์ผ ํฉ๋๋ค.
๊ทธ ๋ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ฐ๋ก fetch ์์ฑ์ด๋ผ๋ ์น๊ตฌ๋ผ๋ค์.
๐ฆ fetch ์์ฑ ์๊ฐ์ ์ ์ฉ

์ต์ด fetch() Test๋ฅผ ์ํด nuxtServerInit์ ๋ํ ๋ด์ฉ์ ์ฃผ์์ฒ๋ฆฌ ํด ์ฃผ๋๋ก ํ ๊ฒ์.

19๋ฒ์งธ ์ค์์ /store/index.js ์์ actions์ FETCH_CART_ITEMS๋ฅผ importํ๊ณ , dispatch๋ฅผ ํตํด Mutation์ ์ ๊ทผํ๊ธฐ ์ํ FETCH_CART_ITEMS()๋ฅผ ํธ์ถํ์ฌ ์ฃผ์์ด์.
๊ทธ๋ผ API์ ์ ์ฅ๋์ด ์๋ Cart ๋ชฉ๋ก์ด ์กฐํ๊ฐ ๋์ด์ผ ํ๋ ๊ฒ์ด์์.
์ ๋ง component์์ asyncData()์ฒ๋ผ fetch()๊ฐ ๋์์ ํ๋ค๋ฉด ๋ง์ด์์.

์์ ๊ฐ์ด ์ ์์ ์ผ๋ก ์ ๋์ํ๊ณ , Vue devtool์ ํตํด ๋ณด๋ฉด Component๋ ์ ๋๋ก ๋ถ๋ฆฌ๊ฐ ๋ ๊ฒ์ ํ์ธํ ์ ์์ด์.
๐ฆ fetch ์์ฑ ํน์ฑ ๋ฐ ์ฃผ์ ์ฌํญ
fetch()๋ฅผ ์ด์ฉํ Component๋ฅผ ์ด๋ํ ๋, ๋ค๋ฅธ Page ๋ฑ์์ ์ด๋์ ํ๋ค๊ณ ํ๋ฉด Component๊ฐ Rendering๋๊ณ , API์ ๊ฐ์ ๋ถ๋ฌ์ค๋ ๋ฑ์ Data ๋ถ๋ฌ์ค๋ ์์
์ผ๋ก ์ธํด ์ ์ ๋์ ๋น ๊ฐ์ฒด๊ฐ ๋ณด์ด๋ ๋ฑ์ ์ํฉ์ด ๋ฐ์ํ ์ ์์ต๋๋ค.
ํ์ง๋ง, ๋ฐ๋ก ํด๋น Component์ URL์ ์น๊ณ ์ ๊ทผ์ ํด ๋ฒ๋ฆฌ๋ฉด Data๋ฅผ ๋ถ๋ฌ์จ ์ํ์์ Rendering์ด ๋๋ค๋ ๊ฒ์ ๊ธฐ์ตํด์ผ ํ๋ ๊ฒ์ด์์.
asyncData()์ ๊ฒฝ์ฐ์๋ Page๊ฐ Rendering ๋๊ธฐ ์ ์ ํธ์ถ๋๊ธฐ ๋๋ฌธ์ this Keyword๋ฅผ ์ฌ์ฉํ ์ ์์ง๋ง, fetch()์ ๊ฒฝ์ฐ์๋ this Keyword๋ฅผ ์ฌ์ฉํ ์ ์๋ ๊ฒ์ด์์.
fetch()๋ ๋งค๊ฐ ๋ณ์๋ฅผ ์ด์ฉํ ์ ์๋ ๊ฒ๋ ํน์ง์ด์์. ์์ ์๋ ์ด์ฉํ ์ ์์๋๋ฐ, ์ง๊ธ์ ์ด์ฉํ ์ ์๋ค๊ณ ํ๋ค์.

'Front-End ์์ ์ค > Nuxt.js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Nuxt.js] NuxtServerInit (0) | 2022.06.06 |
---|---|
[Vue+Nuxt.js] Vuex๋ฅผ ์ด์ฉํ์ฌ ์ฅ๋ฐ๊ตฌ๋ Page ๋ง๋ค๊ธฐ (0) | 2022.06.05 |
[Vue+Nuxt.js] Nuxt.js๋ฅผ ์ด์ฉํ์ฌ ์ผํ ์ํ ๊ฒ์ UI ๊ฐ๋ฐ (0) | 2022.06.01 |
[Vue+Nuxt.js] Nuxt.js๋ฅผ ์ด์ฉํ์ฌ ์ผํ ์ํ ๋ชฉ๋ก ํ์ด์ง์ ์์ธ ํ์ด์ง ๊ฐ๋ฐ (0) | 2022.05.24 |
[Vue+Nuxt.js] Nuxt.js Data ํธ์ถ ๋ฐฉ์๊ณผ API ์ฐ๋ (0) | 2022.05.22 |