분류 전체보기
-
[Vue] interceptors(인터셉터) 구현으로 axios 통신 공통으로 관리하기쬬의 Vue 2022. 8. 17. 18:21
axios 문서 https://axios-http.com/kr/docs/interceptors 인터셉터 | Axios Docs 인터셉터 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다. axios.interceptors.request.use(function (config) { return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.use(f axios-http.com axios를 활용한 통신이 많아지다보면 통신 전처리, 후처리에 대한 고민이 쌓여만간다.. interceptors는 원래는 요청이 주고받을때 통신 틈새에 액션을 취하는 역할이지만 ㅎㅎ 작업을 하다보..
-
[Vue] 모바일/웹 분기설정 정규식예제쬬의 Vue 2022. 8. 17. 16:25
환경 : Vue2 + vue-router@3.5.4 + vuex@3 main.js const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? true : false; //전역설정 Object.defineProperty(Vue.prototype, "$isMobileDevice", { value: isMobileDevice, }); //this.$isMobileDevice 로 활용이 가능하다 Test.vue if (this.$isMobileDevice === true) { url = res.data.mobile_url; } else { url = res.da..
-
[Vue] vue-lottie 활용해 json 파일 로딩화면 구현하기쬬의 Vue 2022. 8. 17. 15:01
디자인이 들어간 프론트페이지들은 플랫폼 디자인에 맞춰 json 파일로 만들어진 로딩화면을 구현해야한다. 이 과정에서 lottie를 활용해 적용해보았다! 적용예시 참고 사이트 https://www.npmjs.com/package/vue-lottie/ 로티 사이트 / json 화면 동작 확인 사이트 https://lottiefiles.com/ LottieFiles - Download Free Lottie Animations, Integrations & Plugins The world’s largest platform for Lottie animations. Add free animations anywhere (even if you don’t know motion design) or create, collab..
-
[Vue] 앱과 웹뷰 통신쬬의 Vue 2022. 8. 17. 10:45
여러가지 작업을 진행하다보면 웹뷰를 앱에 넣는 경우를 선호하는 경우가 생각보다 많다. (아주아주 많다..) 여러가지의 리스크들이 존재하지만 , 하나의 웹뷰를 다방면에서 재사용한다는 것에 아주 큰 매력을 느끼시나보다. 이런경우 웹뷰 환경을 열고, 닫고, 웹뷰에서 앱뷰 환경을 띄우고 등등의 여러가지 액션을 취해줘야 한다. 환경 : Vue2 + 플러터 try { //여기서 webToAppShareUrl 은 앱팀에서 받은 이벤트명이다 window.webToAppShareUrl.postMessage(`앱팀과 협의`); } catch { console.log('웹뷰일경우 이벤트 실행') }
-
[javascript] Youtube watch url 을 embed 형식으로 바꾸기쬬는 개발중 2022. 8. 17. 10:28
정규식을 활용해 기존 watch_url 정보를 embed 코드로 변환이 가능하다 let youtubeUrl = extractVideoID('watch_url'); let reUrl = `https://www.youtube.com/embed/${youtubeUrl}`; extractVideoID(url) { var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; var match = url.match(regExp); if (match && match[7].length == 11) { //id 추출이 가능한경우 return match[7]; } else { //id 추출이 불가능한경우 alert("Id ..