[Vue+Nuxt.js] Vuex를 이용하여 장바구니 Page 만들기

 

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.

 

 

 

 

 

 

🚀 Cart Page

    🔽  Cart Page 제작하기

/pages/detail/_id.vue

 

지난 시간에 /pages/detail_id.vue를 처음 만들 때, 15번째 줄에 button Tag를 잠시 주석 처리 해 놓고, 진행을 했었어요. 이제 이 주석을 풀고, Cart Page로 이동할 수 있는 Button을 작업해 보도록 할 것이에요.

최초 Click(@click) Event가 발생하면 addToCart()를 호출 하는 Button을 만들어 주었어요.

 

/pages/detail/_id.vue

 

그런 다음 sciprt Tag안에 methods 객체에 addToCart()를 선언하고, 함수가 호출되면 vue Cli를 이용하는 것처럼 router를 이용해서 /pages/cart.vue로 이동할 수 있게 해 주었어요.

/pages/cart.vue

 

그런 다음 위와 같이 /pages Package 밑에 cart.vue를 만들어 주었고, 아래와 같이 Page를 만들어 주었습니다.

 

/pages/cart.vue

 

이렇게 하고 나면 상세 Page에 cart에 대한 Button이 생겼을 것이에요.

 

http://localhost:4000/detail/0

Add to Cart Button을 클릭하게 되면 위에서 만든 Cart Page로 이동하게 될거에요!

http://localhost:4000/cart

 

 

/.nuxt/router.js

 

/.nuxt/routes.json

 

이 전에 공부 해 보았듯이 Nuxt.js는 자동으로 Route에 대한 설정을 해주는 것이에요.
위에 내용은 주니하랑이 따로 건들지 않았지만, cart에 해당하는 route가 생성된 것을 확인할 수 있습니다.

 

 

 

    🔽  Main Page to Move Cart Page

이번에는 index.vue 즉, Main Page에서 장바구니 Button을 만들어 보고, 스크롤을 올리건 내리건 사라지지 않도록 만들어 볼게요.

/pages/index.vue

 

13 ~ 15번째 줄을 주목해 주세요.

먼저 div Tag의 Class를 cart-wrapper로 잡았고, 해당 div Tag 밑에 button Tag를 통해 Button을 하나 만들었어요.
이 Button을 Click(@click)하게 되면 Click Event가 발생하면서 moveToPage()를 호출하도록 만들어 주었어요. 

 

/pages/index.vue

 

이 곳에선 76 ~ 78번째 줄에 주목해 주세요.

이 곳에서도 router를 이용하여 push()를 통해 /pages/cart.vue로 이동할 수 있도록 route를 이용 해 주었어요.

/pages/index.vue

 

참고로 13번째 줄 div Tag의 Class이름인 cart-wrapper의 Style은 위와 같이 만들어 주었는데, 여기서 position에 sticky를 선언하게 되면 스크롤 위치가 바뀌어도 화면에 고정 되게 할 수 있답니다.

http://localhost:4000/

 

저기 좀 보세요! 오른쪽 아래에 '장바구니 바로가기' 버튼이 생겼어요.

 

http://localhost:4000/cart

 

이 버튼을 누르면 위와 같이 Cart Page로 이동하게 된답니다.

 

 

 

    🔽  Vuex

        📦 Nuxt에서의 Vuex 사용 방법

Cart의 기능은 Add to Cart를 누른 Item을 갖고 있는 역할을 하도록 해 줄 것이에요.

상세 페이지에서 id값으로 해당 Data를 가지고 있었기 때문에 상세 조회가 가능한데, 또 다른 Component에서 해당 Data를 공유하기 위해서는 Store를 사용하는 것이 훨씬 더 편하게 사용할 수 있습니다.

만약 위의 방법 말고, 다른 방법을 사용하고 싶다면 Add to Cart를 눌렀을 때, Local Storage (브라우저 Storage)에 저장을 해 준 뒤 다른 Page에 진입 했을 때, 해당 Data를 가져올 수 있도록 처리를 해 줄 수도 있습니다.

하지만, 위의 방법들 외에도 Java Script Level에서 서로 Data를 공유할 수 있도록 해 주는 Store가 있기 때문에 Store를 한번 이용해 볼 것이에요.

Nuxt.js의 Store 즉, Vuex에 대한 자세한 설명은 '이 곳'에 남겨 두도록 할게요!

 

 

        📦 Vuex 사용해보기

[Vue.js & Nuxt.js]Vuex란? 에서 공부 했듯이 Nuxt.js에서는 store Package 밑에 ~~.js File만 만들어주면 .nuxt Package 밑에 store.js가 자동으로 만들어지고, Vue.js에서는 수동으로 해주어야 했던 작업들을 자동으로 해주는 것을 알 수 있는 것이에요.

.nuxt/store.js

 

본격적으로 Vuex를 통해 Cart 기능을 구현해 볼게요.

/store/index.js

 

state는 Vuex에서 가장 기본적인 요소 중 하나인데, 각각의 Component들 안에는 data()가 있다는 것을 모두 아실 거에요. 그 data()가 여러 Component들과 Data를 공유해야 될 때, Vuex가 제공하는 state를 이용하면 되는 것이에요.

위의 Code는 state를 화살표 함수로 만들고, 바로 반환을 해 주는데, cartItems라는 배열 객체를 반환하도록 해 준 것이에요.

http://localhost:4000

 

위와 같이 한 뒤 main page에서 Vue devtool을 통해 Vuex를 확인해 보면 오른쪽과 같이 state 안에 cartItems 배열 객체가 존재하는 것을 확인할 수 있어요.

 

 

반응형

 

        📦 상세 Page의 장바구니 담기 기능 구현

 

/store/index.js

이번에는 mutations라는 친구와 함께 놀아볼 것이에요.
이 친구는 state의 값을 변경할 때 같이 놀 수 있는 친구에요.

mutations를 통해 10번째 줄에 addCartItem()이라는 함수를 만들어주고, 매개 변수로 state와 cartItem을 전달받게 한 뒤 11번째 출에 state안에 cartItems라는 배열 객체 안에 값을 넣기 위해 push()를 호출하고, 그 때 매개 변수로 입력할 Data (여기서는 cartItem)을 전달함으로 state안에 선언된 cartItems[] 안에 Data가 쌓일 수 있도록 해 준 것이에요.

이제 해당 Vuex를 이용할 Cart Button이 있는 /pages/detail/_id.vue 한테 가 볼게요!

/pages/detail/_id.vue

/store/index.js를 만드는 순간 단순히 Library에 설치 및 설정하는 Code만 작성해 주는 것 뿐만 아니라, 객체(인스턴스) 내부적으로 연결을 해 주기 때문에 위 Code과 같이 this를 통해 $store와 commit()이라는 것에 바로 접근할 수 있게 됩니다.

최초 Add to Cart라는 Button을 클릭하게 되면 addToCart()가 호출되고, 39번째 줄에 store에 commit()이 동작하게 되는데, 이것은 /store/index.js의 mutations에 addCartItem()을 호출하게 되고, 장바구니에 담을 객체 (this.product)를 매개 변수로 전달 해 주는 것이에요.

그렇게 장바구니에 물건을 담게 되면 41번째 줄처럼 장바구니 Page로 이동을 할 것이에요.

 

http://localhost:4000/detail/1

 

최초 상세 페이지에서 Add to Cart Button을 누르기 전까지는 개발자 도구 vue devtool에 Vuex 기능에서 state 안에 cartItems[]에 어떤 Data도 없는 것을 확인할 수 있습니다.

http://localhost:4000/cart

 

Add to Cart Button을 누르게 되면 개발자 도구 vuedevtool에 Vuex 기능에서 state 안 cartItems[]안에 한 개의 Data가 들어간 것을 확인할 수 있고, Cart Page로 이동된 것을 확인할 수 있어요.

 

 

 

 

        📦 장바구니 Page의 장바구니 목록 조회 기능 만들기

이번에는 state에 저장한 Data를 불러오는 기능을 만들어서 장바구니 목록 조회 기능을 만들어 볼 것이에요.

/pages/cart.vue

 

결국 장바구니에 담긴 제품 목록은 Cart라는 Page에서 보여져야 하는 것이에요.
그렇기 때문에 cart.vue에 위와 같이 작업을 해 주었습니다.

우리가 여기서 주목해야 하는 곳은 6 ~ 19번째 줄 까지에요. 한번 하나하나 살펴보아요!

7번째 줄에서 ul Tag안에 li Tag로 목록화가 될 수 있도록 틀을 잡아 준 뒤 li Tag 안에 v-for를 통해 반복이 되면서 위에서 state에 저장한 값을 하나하나 꺼내서 cartItem이라는 변수에 담도록 해 주었어요.

v-for는 index 값이 꼭 들어가 주어야 하는데, 이를 :key를 통해서 cartItem의 id값으로 잡아 주었습니다.

그런 뒤 img Tag를 통해 상품 사진이 나오도록 작업을 하는데, :src를 통해 imageUrl을 받아오도록 하여 사진이 출력 되도록하고, 사진이 출력되지 않으면 제품 이름이 출력되도록 해 주었어요.

그런 뒤 두 개의 p Tag를 통해 제품 이름과 가격이 나올 수 있도록 Code를 작성해 주었습니다.

차 후 구매하기 기능을 넣기 위해 17 ~ 19번째 줄에 작업을 해 주었는데, 버튼 하나를 만들고, 해당 버튼에 구매하기가 보이도록 만들어 두기만 했어요.

 

http://localhost:4000/cart

 

위와 같이 작업을 해 주고, 실제 Cart Page를 보니 Cart에 잘 Item이 담기고, 출력되는 것을 확인할 수 있었어요.

여기까지 작업을 하고나서 새로고침을 하게 되면 아주 재밌는 현상이 발생되는 것을 알 수 있어요.
바로 Cart에 담긴 Item들이 모두 초기화 되 버리는 현상인데, 이 현상에 이유는 Vuex는 Java Script 단에서 동작하는 Library이고, 브라우저가 새로 고침되게 되면 Memory에 올라와 있던 Java Script는 모두 초기화 되버리기 때문에 발생하는 문제인 것이에요.

이를 꼭 참고해서 나중에 이를 해결하는 것까지 같이 공부해봐요!

 

 

        📦 Cart Page Styling

이번에는 쉬어가는 겸하여 Styling을 해 주도록 해 볼게요.

http://localhost:4000/cart

 

결과를 먼저 말씀드리면 이렇게 변경되도록 Code를 수정해 준 것입니다.
해당 Source Code는 '이 곳'에서 보실 수 있습니다! 이 곳에서 /pages/cart.vue를 참고 해 주세요!

한 가지 더 정리를 하자면 Cart Page에 위의 사진들이 다른 것들이 올라가지만 아래 작업을 해 주기 전까지는 동일한 사진들이 올라가는 문제가 있었어요.

/store/index.js

위에 mutations에 12~ 15번째 줄을 보면 addCartItem의 매개 변수 cartItem의 내용을 모두 받아 imageUrl이 아닌 것들은 그냥 한번에 처리하기 위해 13번째 줄에서 처리가 되어 그대로 아무 작업 없이 상수형 변수 newCartItem에 담기는데, imageUrl 부분만 random값을 줘서 imageUrl이 다르게 나오도록 하고, 그것을 상수형 변수 newCartItem에 담아준 뒤 해당 변수를 state의 cartItems[]에 담아주도록 해 준 것이에요.