[Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 검색 UI 개발

 

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.

 

 

 

 

 

 

🚀 쇼핑 상품 검색 UI 개발

    🔽  검색 UI 컴포넌트화

최초 검색이라는 기능은 어디서든지 사용될 수 있는 공통 component로 만들어 주는 것이 좋기 때문에 /components 밑에 SearchInput.vue를 만들어 주도록 할게요.

/components/SearchInput.vue

 

그리고, /pages/index.vue에는 검색을 위해 넣어줬었던 Input Tag가 있는데, 이 것을 지우고, 위에서 만든 Component가 붙도록 작업을 해 줄 것이에요.

/pages/index.vue

 

참고로 4번째 줄에 <SerchInput을 입력하고, Tab을 누르게 되면 자동으로 19번째 줄처럼 import가 될 것이고, 22번째 줄처럼 Component가 등록될 것이에요.

/components/SearchInput.vue

 

해당 Component에서 검색 시에 받은 검색어가 /pages/index.vue와 연동되게 작업을 해야 해요.

/pages/index.vue - 1 ~ 19번째 줄

 

위에 코드 중 5 ~ 6은 7번째 줄이 통합 하는 과정을 기억하기 위해 지우지 않은 부분 입니다. 없어져도 되는 코드 이니 참고 부탁 드립니다.

 

 

/pages/index.vue - 21 ~ 52번째 줄

 

/pages/index.vue - 54 ~ 66번째 줄

 

 

 

먼저 V-Model에 대해서 `이 곳`에 내용을 준비 해 두었어요.

 

/components/SearchInput.vue

 

최초 이용자가 검색어를 입력하게 되면 13번째 줄 props로 받은 value를 Input Tag에 값으로 연결을 합니다.
Input Tag에 값이 입력되면 Input Tag에서 input Event가 발생하게 되고, 5번째 줄에 @input으로 컴포넌트 간 Data 공유를 선언하고, $emit을 통해 부모 Component인 index.vue에 해당 Event의 value를 전달 해 주는 것이에요.

/pages/index.vue - 54 ~ 66번째 줄

해당 value는 60번째 줄에 updateSearchKeyword에 매개 변수로 전달되게 되고, 61번째 줄에 this.searchKeyword를 통해 

/pages/index.vue - 21 ~ 52번째 줄

50번째 줄에 serachKeyword에 값이 들어가게 될 것이에요.

이런 방식으로 검색어에 대한 Data를 Component 간 공유를 하도록 해 주었습니다.

 

 

    🔽  검색을 위한 API 함수 설계 및 구현

검색을 할 준비가 되었으니 이 검색어를 Back End에 보내서 해당 검색에 맞는 내용을 가져오는 처리를 해 주어야 해요.

/components/SearchInput.vue

먼저 검색어 기능을 담당하는 Component인 SearchInput.vue에 7번째 줄처럼 Click Event가 발생하면 $emit을 통해 상위 Component에 search Event를 전달하도록 만들어 주었어요.

/pages/index.vue

그럼 다음 index.vue에서 4번째 줄에 보면 @search="searchProducts"를 추가 해 주었는데, 이 부분이 바로 하위 Component SearchInput.vue 7번째 줄에서 발생한 Click Event를 받는 곳이에요. Click Event가 발생하게 되면 searchProducts라는 함수가 호출 되게 됩니다.

/pages/index.vue

이 곳에서 우리가 주목해야 할 곳은 57 ~ 62번재 줄 까지에요. 위에서 Click Event가 발생하면 바로 이 Method가 호출 되게 되는데, 59번째 줄에 보면 fetchProductsByKeyword()를 호출하면서 검색어를 담은 객체를 전달해 주고 있는 것이에요.

        📦 API 함수 설계

fetchProductsByKeyword()는 /api Package를 보면 index.js가 있을텐데 그 곳에 정의하여 Module화 해 주었습니다. 이 곳에서 axios를 이용한 API 통신 함수를 만들어 줄 거에요.

/api/index.js

우리는 이런식으로 Query String 방식을 이용한 API를 설계할 수도 있어요. 하지만 이렇게 할 필요가 없는데, 일단 이렇게 되면 Query String을 매 번 붙여야 하는 번거로움이 생기게 되는 것이에요.

그래서 위와 같이 config와 params 속성 이용하여 객체를 보내버리는 방식을 구현하는 것이 가독성 등 면에서 좋답니다.

 

/pages/index.vue

다시 index.vue에 searchProducts()를 보면 위 API를 통해 받아온 Data를 상수형 변수 response에 담아주게 되요. 그런 다음 이 Data 값을 출력해 보게 되면

http://localhost:4000/

일단은 검색어에 'chicken'을 입력 해 주었고, 개발자 도구를 통해 콘솔 출력을 확인해 보면 3개에 배열이 응답 된 것을 볼 수 있어요.

name을 보니 chicken이라는 단어가 들어간 내용들을 검색해 온 것을 확인할 수가 있어요!

 

 

반응형

 

 

    🔽  검색 기능 마무리

        📦 serchProducts()

계속해서 우리는 serchProducts()를 유심히 지켜볼 것이에요.

 

/pages/index.vue

이번에 추가된 내용은 65~68번째 줄 까지에요.

설명하기에 앞 써 우리는 asyncData()를 통해 products라는 상수형 변수를 만들어 준 적이 있어요.

해당 내용을 못 보고 오신 분들은 '이 곳'에서 만나실 수 있게 준비 해 두었습니다!

/pages/index.vue

 

현재 data()에는 products라는 친구가 존재하지 않지만, 

 

/pages/index.vue

asyncData()에 return 한 값이 Vue Data()에 속성으로 정의 및 설정이 되는 점을 우리가 꼭 기억해 두어야 하는 것이에요. 그렇기 때문에 products는 해당 인스턴스(객체)에 Data() 속성으로 존재하고 있답니다.

 

http://localhost:4000/

이렇게 하고 나면 위와 같이 검색어를 입력했을 때, 해당 값에 해당하는 내용만 불러오는 것을 확인할 수 있어요.

현재 Back End는 FE를 구현하기 위한 임시적인 Server이기 때문에 사진이 Chicken과는 맞지 않는다는 점을 꼭 참고 부탁드립니다.

 

 

 

 

    🔽  Header와 검색 UI Style 정리
        📦 defulat.vue

최초 Header부분에 대한 CSS 처리를 해 보도록 할게요.

Header에 대한 내용은 /layouts/default.vue에 위치하고 있어요.

/layouts/default.vue

공통의 Style을 꾸미려고 할 때 layouts Package 밑에 vue File을 만들어주면 된다고 우리는 공부를 했었어요.
Header라는 친구는 어느 Page에나 공통으로 나와야 하는 부분이기 때문에 위 Package에 만들어 주었어요.

최초 header에 class를 title로 하고, 16 ~ 20번째까지 해당 내용에 대한 CSS문을 작성해 주었어요.

그리고, NuxtLink에 class를 logo라고 정의하고, 22번째 ~ 27번째까지 해당 Class 이름과 Matching되는 CSS문을 작성해 주었습니다.

 

        📦 SerchInput.vue

이번에는 검색에 대한 Input Box와 Button을 꾸며볼게요.

/components/SearchInput.vue

최초 2번째 줄에 dIv Tag의 class를 input-wrapper로 지어주고, 5번째 줄에 input Tag에 class를 search-input이라고 이름 지어 주었어요.

그리고, 8번째 줄에 button Tag class를 btn이라고 이름 지어 주었습니다.

/components/SearchInput.vue - style

 

그런 뒤 위와 같이 CSS문을 입력하여 꾸며 주었어요. 참고로 .이 붙은 것은 class 이름과 Matching이 되고, .이 붙지 않은 것은 ID 이름과 Matching이 된답니다. 해당 내용에 대해 잘 모르겠는 분들을 위해 '이 곳'에 정리 해 두었어요!

또한, Style Tag에 scoped라고 붙는 것은 해당 vue File에서만 적용되게 하기 위함이에요.

즉, Vue를 사용하는 프로젝트는 다수의 컴포넌트를 사용하여 하나의 앱을 구현하게 됩니다. 이 경우 각각의 컴포넌트에 선언된 스타일이 의도하지 않거나 실수에 의하여 다른 컴포넌트에 영향을 줄 수 있을 수 있는 것이에요. 이처럼 오직 특정 컴포넌트에만 고유의 스타일을 선언하기 위한 방법으로 vue-loader가 제공하는 scoped 방법을 사용할 수 있습니다.