반응형 VUE15 Action Sheet를 트랜지션 + slot으로 만들기 Action Sheet회사에서 내부 개발중에 웹뷰에 들어가는 웹을 개발하는 작업을 하게 되었고,보통 모바일에서는 ActionSheet가 필요하다여기서 말하는 Action Sheet는 밑에서 부터 위로 올라오는 Sheet이다 여기서 들어가는 애니메이션이 2가지가 들어간다Dim 처리 되어있는 부분인 Opacity를 0 =>1Sheet영역이 위치를 -100% => 0% 트랜지션으로 FadeIn/FadeOut , Bottom To Top/ Top to Bottom 만들기 🛝 트랜지션으로 FadeIn / FadeOut처음으로 fadeout / fadeIn 시킬 css를 작성한다.fade-enter-from : 트랜지션 시작전 fade-enter-active : 애니메이션 시작되면 발동하며, opactiy 를 .. 2025. 3. 9. lottie, $route 모킹 🍟 lottie 오류1 lottie를 사용할 경우 아래와 같은 오류가 발생하였다. 보통 외부라이브러리에서 발생하는데, 아래오 같이 발생할 경우 jest.config.js에서 "transformIgnorePatterns" 에 vue-lottie를 추가해준다. jest.config.js /* vue-lottie 추가 */ module.exports = { transformIgnorePatterns: ['/node_modules/(?!(particles-bg-vue)|(?!@scu/vue)|(?!(vue-lottie))/)'], } 🥗 lottie 오류2 lottie오류1을 해결했음에도 불구하고, HTMLCanvasElemnt관련한 오류가 발생하였다. 그래서 "jest-canvas-mock"을 추가하였다. h.. 2024. 1. 2. 🍳 HOC사용하여 로직 공통화 시키기 🥙 기능 공통화 상황 아래 사진 처럼 "테스트" 라는 버튼을 누르면 '모던,럭셔리' 와 '1990,2000s' validation 기능이 중복이 된다. 실제 실무에서는 로직이 이것보다 더 복잡하게 돌아가지만, 테스트를 위해서 간단하게 빈값 체크 정도만 기능을 넣었다. 🥙 전체적인 구조 withCuration을 통해 validation의 기능을 props으로 전달하고, props으로 전달 받은 컴퍼넌트들은 validation을 통해 기능을 사용할 수 있다. 🍟 withCuration.js 작성 const withCuration = (component) => { return { name: "withCuration", data() { return { curationInfo: { mood: [ { text: ".. 2023. 11. 5. 🎹 HOC 🩰 HOC vue에서 로직을 재활용 하는 방법은 여러가지가 있다. 그 중에 mixin이 있긴 하지만,, 로직이 복잡할수록 component랑 mixin변수가 겹쳐 관리의 어려움이 보인다. 그리하여 알아본 방법이 HOC(아직까지 현재 프로젝트에서 쓰지않음) 이다. HOC는 High Order Component인데, 함수의 인자에 컴퍼넌트를 받고 컴퍼넌트를 리턴해준다. 아직 Hello World 단계로 알아가는 중이다. 🎰 List,List2 로직 아래 사진처럼 데이터를 가져오는 주소는 다르지만,hocList를 세팅하는 과정은 같다. 이러한 비슷한 로직을 재활용 하는 방법중에 하나가 HOC이다. 👀 HOC 작성 withHoc.js를 만들며 관례적으로 withXXX 를 붙인다고 한다. 호출하는 URL를 받고,.. 2023. 10. 8. 이전 1 2 3 4 다음 반응형
