본문 바로가기

전체 글75

[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.
반응형