분류 전체보기76 [Vue] vue-cli-serve production 빌드 시 스타일 문제 해결과정 문제를 접하다 기존 dev 환경에서 빌드하고 배포할땐 전혀 문제가 되지 않았는데 이상하게 production 빌드 시 특정 스타일이 무너지기 시작했다. 여러가지 시도를 거쳤지만 뭐가 문젠지 찾지 못하고 요소 하나하나 뒤져보다 발견한게 해당 css 파일 중 reset.css 로 저장된 파일이 컴포넌트 스타일 적용을 막고있는 문제였다. ㅠㅠ (대체 왜..) 여러번의 빌드로 테스트를 해보니 production으로 빌드되면서 min 파일 변환되면서 스타일이 적용되는 순서에서 문제가 있다는것을 발견했다. 프로젝트 기획부터 문제 사실 중소에 다니는 여러 개발자들이 겪는 가장 큰 문제라고 생각하는게, 바로 프로젝트 기획이다. 아무래도 개발자는 적고 앱,웹 사업을 하고싶어하는 회사는 많으니 적은 인원으로 여러가지 사업.. 2022. 9. 16. [Vue] interceptors(인터셉터) 구현으로 axios 통신 공통으로 관리하기 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는 원래는 요청이 주고받을때 통신 틈새에 액션을 취하는 역할이지만 ㅎㅎ 작업을 하다보.. 2022. 8. 17. [Vue] 모바일/웹 분기설정 정규식예제 환경 : 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.. 2022. 8. 17. [Vue] vue-lottie 활용해 json 파일 로딩화면 구현하기 디자인이 들어간 프론트페이지들은 플랫폼 디자인에 맞춰 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.. 2022. 8. 17. [Vue] 앱과 웹뷰 통신 여러가지 작업을 진행하다보면 웹뷰를 앱에 넣는 경우를 선호하는 경우가 생각보다 많다. (아주아주 많다..) 여러가지의 리스크들이 존재하지만 , 하나의 웹뷰를 다방면에서 재사용한다는 것에 아주 큰 매력을 느끼시나보다. 이런경우 웹뷰 환경을 열고, 닫고, 웹뷰에서 앱뷰 환경을 띄우고 등등의 여러가지 액션을 취해줘야 한다. 환경 : Vue2 + 플러터 try { //여기서 webToAppShareUrl 은 앱팀에서 받은 이벤트명이다 window.webToAppShareUrl.postMessage(`앱팀과 협의`); } catch { console.log('웹뷰일경우 이벤트 실행') } 2022. 8. 17. [javascript] Youtube watch url 을 embed 형식으로 바꾸기 정규식을 활용해 기존 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 .. 2022. 8. 17. 이전 1 ··· 5 6 7 8 다음 반응형
