본문 바로가기

💡웹 프로젝트/(프론트엔드) 마켓컬리 - 클론코딩

(8)

제품 검색 기능 구현 검색창을 아래 두 곳에 두었다. nav에서 검색 SearchPage에서 검색 1. nav 검색 기능 nav에 있는 검색창에 keyword 입력(필수) 검색 버튼 클릭 search/keyword로 이동하고 검색 결과 출력 2. SearchPage 검색 기능 검색 페이지에 있는 검색창에 keyword 입력(필수) (검색 버튼 클릭 전) result 화면 숨기기 (검색 버튼 클릭 시) search/keyword로 이동하고 검색 결과 출력 2-1) (상위 컴포넌트) SeachPage.vue 검색조건 {{keyword}} //nav.vue에서 라우터를 이용해 보낸 파라미터로부터 데이터 받음 검색 //하위 컴포넌트에 데이터 전달 아직 검색어를 입력하지 않았습니다. 2-2) (하위 컴포넌트) SearchResult...

주소 입력 구현(daum 주소 api) 공식 API 홈페이지> http://postcode.map.daum.net/guide 1. script에 postcode 추가 index.html에 아래의 스크립트를 추가 2. 주소 검색 버튼 구현 (pages/ShopBasketPage.vue) 주소 입력 버튼 클릭 시, showApi() 실행 api에서 주소 선택하면 상세 주소 입력 모달 창 나타내기 상세 주소 입력 폼에서 저장 버튼 클릭 시, setAddress() 실행 2-1) 템플릿 코드 배송지 주소 검색 {{ addr.addr1 }} 리셋 저장 2-2) 스크립트 코드 3. 입력한 주소 vuex에 저장 (store/index.js) export const store = new Vuex.Store({ state: { //ordersheet 스테이트..

vuex 상품별 리뷰 뷰어 1. 상품별 리뷰 뷰어 구현 1) 스토어에 reviews state 추가(store/index.js) state: { products: [ { id: 0, title: "강아지 사료", }, { id: 1, title: "고양이 사료", }, }, // reviews 스테이트 추가 reviews: [ { productId: 0, reviewId : 0, reviewtitle: "견왈 : 좋아요!", reviewer: "조", reviewedate: "21.07.19", }, { productId: 0, reviewId : 1, reviewtitle: "개가 싫어해요.", reviewer: "김", reviewedate: "21.07.19", }, { productId: 1, reviewId : 2, re..

vuex 장바구니 구현 참고한 게시물 > https://xn--xy1bk56a.run/vuex/3-cart/#%EC%95%A1%EC%85%98-%EC%B6%94%EA%B0%80 1. 장바구니 기능 구현 ** 컴포넌트 폴더 구조 ** Vuex (store/index.js) 장바구니 담기 버튼과 메서드 (ProductPage.vue) 장바구니 뷰 (AddedProductList.vue) ** 장바구니 관련 버튼 기능 ** '+ 버튼' 클릭시 '- 버튼' 클릭시 product의 inventory -1 cartItem의 quantity +1 cartItem의 itemtotalprice + 상품가격 product의 inventory +1 cartItem의 quantity -1 cartItem의 itemtotalprice - 상품가격 총..

vuex 데이터 전달(상위->하위) 참고한 게시물 > https://xn--xy1bk56a.run/vuex/3-cart/ https://joshua1988.github.io/web-development/vuejs/vuex-start/ 1. vuex 설치, 설정 1) vuex 설치 NPM 설치 명령을 사용하여 Vuex 라이브러리를 프로젝트에 설치한다. npm install vuex 2) vuex 플러그인 등록 프로젝트 루트 위치에 store/index.js 파일을 만든 후, Vuex 라이브러리를 Vue 애플리케이션의 플러그인으로 등록하는 코드를 작성한다. 그리고 Vuex를 통해 Store 객체를 생성하는 구문을 설정한다. // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue..

vue에 부트스트랩 적용 https://bootstrap-vue.org/ BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org 1. 패키지 설치 적용하고자 하는 Vue 프로젝트에서 bootstrap-vue 패키지를 설치한다 npm install vue bootstrap-vue bootstrap 2. main.js에 추가 Vue에서 bootstrap-vue를 사용할 수 있도록 main.js에 bootstrap-vue를 추가한다. import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.min.css' import 'boot..

vue 프로젝트 생성 최소 요구사항으로 Node.js 4.x 이상(6.x 추천)과 Git이 설치되어 있어야 한다. 자세한 내용 > Vue 시작하기 (+개발 환경 설정) 1. vue-cli 설치 // vue-cli 전역 설치, 권한에러시 sudo 추가 npm i -g @vue/cli vue --version Vue CLI를 설치 후 버전을 확인해 보면 3.x이 설치된 것을 확인할 수 있다. 그리고 하나 더 설치하자. npm i -g @vue/cli-init 2. vue 프로젝트 생성 @vue/cli-init은 2.x Template을 가져오기 위한 vue init기능을 제공한다. // vue init vue init webpack kurly-clone 생성한 프로젝트 서버 실행해준다. cd kurly-clone //프로젝트 폴..

웹 기획 vue프레임워크 경험을 쌓기 위하여 본 사이트를 기획하게 되었습니다. kurlyClone 프로젝트 프로젝트 기간 2021.07.16 ~ 프로젝트 특징 Frontend만 작업 1인 프로젝트 PC용 웹 프로젝트 스펙 Frontend Vue, Javascript DB MySql 👉 메뉴 구조 👉 초안 👉 초안

이전 1 다음

티스토리툴바