글을 잠깐 혼자 써봤던 진성 프로그래머 글을 잠깐 혼자 써봤던 진성 프로그래머

Long Tap Event touchStart(){ this.longTouchToggle = true; setTimeout(() => { if(this.longTouchToggle){ alert('1초뒤 Event 발생') } }, 1000); }, touchEnd(){ this.longTouchToggle = false; }, //핵심은 @touchstart 와 @touchend 이다. 도움되셨다면 하단의 광고 클릭 부탁드립니다 :)

{{value}} slice기능을 이용해서 원하는 길이 만큼만 loop를 실행하자. 도움되셨다면 하단의 광고 클릭한번 부탁드립니다 :)

Vue 3버전에서 vuex 사용하기 그냥 npm i vuex --save를하게 되면 vuex3.x 버전이 설치됩니다. Vue3.x은 vuex4.x과 호환이 됨으로 기존의 버전은 삭제해줍니다. npm uninstall vuex npm install vuex@next --save store/index.js store.js를 만든후 createStore를 통해 store를 생성하자. // /store.js import { createStore } from 'vuex' export const store = createStore ({ state: { }, getters: { }, mutations: { }, actions: { }, }) main.js에 import합시다 // main.js import { cre..

vue : 3.0.0, swiper : 7.0.0 다음과 같이 코드를 사용하면 됩니다. (앵간한 구글링, stackoverflower에서는 전부다 맞지 않아서 하나하나 값 찾아가면서 구현했습니다.) Templelte computed computed: { swiper() { return this.$refs.mySwiper; } }, Medtohd methods: { slideChangeTransitionStart(index) { console.log(index.activeIndex) }, }, 도움 되셨다면 하단의 광고 한번 클릭 부탁드립니다!!

개발을 하다보면 부모-자식 뷰의 관계가 아닌 여러 자식 뷰 들 사이에서 데이터를 전송해야하는 일들이 발생한다. 이런경우 Vue2.0에서는 eventBus를 사용했지만 참고:https://v3.vuejs.org/guide/migration/events-api.html#overview Vue3.x 부터는 Mitt라는 라이브러리를 사용한다. 설치 npm i mitt --save ------------------------ //파일명 mitt.js import mitt from 'mitt' const emitter = mitt(); export default { install(Vue) { Vue.config.globalProperties.emitter = emitter } } -------------------..

기본환경 세팅! 윈도우 도커를 사용했으며 터미널에도 미리 도커가 설치된 상태이다. 도커는 리눅스 기반이기 때문에 윈도우에서 도커를 사용하게 되면 결국은 VM을 사용해서 도커를 돌리는 셈이라지만 그래도 로컬에서 충분히 지지고 볶아가며 연습을 해야하기 때문에 상관하지 않기로 했다. 윈도우 도커를 설치하고 터미널에도 미리 도커가 설치된 상태이다. (터미널을 통한 도커설치는 이전 포스트를 참고!) 이제 frontend 폴더로 이동했다. 폴더의 구조는 다음과 같다. ─frontend ├─node_modules ├─public └─src ├─api ├─assets │ ├─css │ └─img ├─components ├─plugins ├─views └─vuex Vue를 구동하기 위해서는 node 의 환경이 필요하다...

쿠키와 로컬 스토리지로 반복적인 리퀘스트를 막은 이유는 쿠기는 최대 4kb만 저장이 가능합니다. 게시판이나 여러 이미지 같은 경우 url 등의 값들이 string으로 많이 길어지기 때문에 4kb만으로는 저장이 안되는 경우가 많이 있었습니다. 하여 브라우저 마다 최대 용량이 다르지만 최대 5M까지 저장이 가능한 localstorage을 사용하여 반복적인 request를 막는 기능을 구현해보았습니다. 쿠키의 Expires기능을 이용해서 쿠키가 없어 졌을때만 서버로 부터 데이터를 가지고 오게 하는 것입니다. 참고 코드는 다음과 같습니다. 참고하시길 바랍니다. async created(){ if(!self.$cookies.isKey('notice_info')){ // 쿠키에 공지사항 정보가 없으면 서버에서 받아..

1. 두 가지 방법 vue router로 데이터를 전달하는 방법은 2가지가 있습니다. query params 2. 전달하기 query {name: 'Query', query: {name: 'cat', age: 3}} params {name: 'Params', params: {name: 'dog', age:4}} main Query 프로그래밍 방식 Query 선언적 방식 params params 선언적 방식 3. 라우터 크게 수정할 부분은 없습니다. 다만, params로 전달하는 경우 props:true 로 설정하면 데이터가 props에도 전달됩니다. import VueRouter from 'vue-router' import vue from 'vue' vue.use(VueRouter) import Main..