16. Vue JS 23

08. Vue 2 - Router 현재 페이지 갱신

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue 2.5.13 # 방법 1 # 방법 2 [router.js] import Vue from 'vue' import VueRouter from 'vue-router' import HomePage from "../views/HomePage"; /** 같은 페이지에서 같은 페이지로 $router.push 한 오률를 처리함 (ex : 홈페이지에서 홈 로고를 클릭한 경우) */ const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, locati..

16. Vue JS/Vue 2 2020.09.23

07. Vue 2 - logger 플러그인

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue 2.5.13 # 온라인 에디터 PlayCode - Code Sandbox. Online Code Editor playcode.io # 플러그인 깃 허브 vuejs-logger vuejs-logger, provides customizable logging functionality for Vue.js. www.npmjs.com # 사용 [터미널] npm install vuejs-logger --save-exact [Vue - main.js] /** VueLogger 임포트 */ import VueLogger from "vuejs-logger"; /** VueLogger 설정 */ const env = proce..

16. Vue JS/Vue 2 2020.09.23

06. Vue 2 - TerserPlugin 을 이용한 웹 팩 설정

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue 2.5.13 # 참고 Environment Variables | Cracking Vue.js 환경 변수 파일을 이용한 옵션 설정 환경 변수 파일이란 애플리케이션이 실행될 때 특정 값을 넘길 수 있는 변수를 의미합니다. 웹 애플리케이션 관점에서는 .env 파일에 정의된 변수를 의미하며 joshua1988.github.io vue 실행 모드와 환경 변수 설정 뷰의 실행모드와 환경 변수를 설정하는 방법에 대해 알아봅시다.참고 링크: Modes and Environment Variables(https://cli.vuejs.org/guide/mode-and-env.html로컬에서는 http://localhost ve..

16. Vue JS/Vue 2 2020.09.23

03. Vue 2 - 스토리 북 (Storybook)

컴포넌트를 관리하는 데 도움을 준다 # 공식 홈페이지 Storybook: UI component explorer for frontend developers Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. storybook.js.org # Vue Storybook 깃 허브 github.com/storybookjs/vue-cli-plugin-storybook storybookjs/vue-cli-plugin-storybook Vue CLI plugin for Storybook..

16. Vue JS/Vue 2 2020.09.15

04. Vue CLI 3 - Component 메모

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue CLI 3.0.0 Edit Tool Intellij IDEA 2019.1.3 작성법만 다를 뿐 결과는 같습니다 #1-1. 자식 컴포넌트에 v-for 작성 TODO 어플리케이션 할 일 완료 전체 {{ todo }} 자식 컴포넌트에서 여러개의 인자를 넘겨줄 수 있지만, 부모 컴포넌트에서 태그에 매개변수를 받는 코드를 작성하면 오류를 발생한다 @child="toggleTodoState(todo)" 이런 식으로 사용하는 경우 자식 컴포넌트에서 넘어온 인자를 무시하고 부모 컴포넌트의 todo 인자를 찾게 된다 (존재하지 않아 undifinded 반환) 때문에 @child="toggleTodoState" 여기 까지만 ..

16. Vue JS/Vue 3 2020.09.10

03. Vue 2 - Vue Router

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue CLI 3.0.0 Vue Router 4.5.6 Edit Tool Intellij IDEA 2019.1.3 # 공식 홈페이지 가이드 소개 | Vue Router 소개 버전 정보 TypeScript 사용자는 vue-router@3.0+와 vue@2.5+를 사용하세요. Vue 라우터는 Vue.js 의 공식 라우터입니다. Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합 router.vuejs.org # 예제 sout1217/vuex-and-router Contribute to sout1217/vuex-and-router development by creating an..

16. Vue JS/Vue 3 2020.09.10

02. Vue CLI 3 - Vuex

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue CLI 3.0.0 Vuex 4.0.0 Edit Tool Intellij IDEA 2019.1.3 # 구조 Vuex 구조 설명 Actions 비동기 로직 = axios Mutations 동기 로직 State 컴포넌트 간에 공유하는 데이터 = data() { ... } Vue 주요 구성 설명 state 컴포넌트 간에 공유하는 데이터 = data() { ... } getters 중복된 데이터 처리 mutations 동기 로직 처리 actions 비동기 로직 처리 Vue 컨셉 설명 State 컴포넌트 간에 공유하는 데이터 = data() { ... } View 데이터를 표시하는 화면 = ... Action 사용자의..

16. Vue JS/Vue 3 2020.09.10