본문 바로가기

💡웹 프로젝트

(25)

webpack으로 Django - Vue.js 연동하기 1. Django 프로젝트 가상환경을 생성하고 실행한다. $ mkdir semoview $ python -m venv venv $ .\venv\Scripts\activate # 가상환경 종료 : deactivate 가상환경 안에 장고를 설치한다. $ pip install django 장고 프로젝트를 생성하고, 최상위 프로젝트명을 django-vue로 변경해준다. $ django-admin startproject config $ move config django-vue manage.py파일이 존재하는 디렉토리에서 앱(api)을 생성해준다. $ cd django-vue $ python manage.py startapp api settings.py파일에서 설정을 변경해준다. INSTALLED_APPS = [ ..

네이버 쇼핑 아이템 목록 가져오기 참고한 유튜브 > https://youtu.be/yQ20jZwDjTE 1. 스크래핑에 필요한 패키지 설치 BeautifulSoup, Requests 패키지가 설치되었는지 확인한다. pip list 목록에 beautifulsoup4 , requests 패키지가 없다면 설치해준다. pip install beautifulsoup4 pip install requests + 구문을 분석해주는 parser설치 pip install lxml 2. python 파일 생성 파싱을 위한 코드를 작성할 파이썬 파일을 생성한다. vi parser.py 3. HTML 데이터 가져오기 파싱해올 웹 사이트에서 연극 목록 중 연극명을 가져올 코드를 작성해준다. import requests from bs4 import Beautifu..

Web Scraping이란? 웹 데이터 처리 단계 : [수집] -> [저장] -> [처리] -> [분석] -> [시각화] (이 중 웹 스크래핑은 [수집] 단계임) 웹 스크래핑이란? 웹 스크래핑(Web scraping)은 특정 페이지의 HTML 문서에 소스 중에서 원하는 정보만 추출하는 기술이다. 웹 스크래핑은 네이버 쇼핑 최저가 검색, 인스타그램 태그 검색 등 많은 곳에 사용되고 있다. 1) 웹 스크래핑 메커니즘 대상선정 : 정보를 추출해올 url로 이동한다. 만약 네이버 쇼핑에서 연극에 대한 정보를 파싱해 오려면 https://search.shopping.naver.com/search/all?where=all&frm=NVSCTAB&query=%EC%97%B0%EA%B7%B9 데이터 로드 : API를 가져오려면 XML, JSON 데..

제품 검색 기능 구현 검색창을 아래 두 곳에 두었다. 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 //프로젝트 폴..

이전 1 2 3 다음

티스토리툴바