반응형 VUE16 🚛 vue2 + storybook6 🚨 StoryBook이란컴퍼넌트를 다양한 형태를 보여줄 수 있는 툴, AppButton이라는 것이 있을때 props에 따라 보여지는것이 다른데 그것들을 한 곳에서 관리하는 것이 용이하다.🚔 도입배경사내에 기존에는 버튼들이 css만 공유하고 그 css도 잘못 복붙하거나 했을때, 버튼에 형태가 조금씩 달라졌다. 그리하여 컴퍼넌트화 시키고 다양한 형태를 보여주는 필요성을 느꼈다 그리고 props를 어떤것을 받는지 문서화 시킬 필요가 있었다.그리고 디자이너 개발자간의 커뮤니케이션이 필요한데, 기준이되는 문서가 있을 경우 , 하나의 문서가지고 커뮤니케이션 하기에 용이했다.🚡 환경세팅vue2 버전에 맞는 패키지 설치기존에 프로젝트가 vue2이므로 vue2 기준으로 관련 패키지 설치가 필요하였다. 사내 프로젝.. 2025. 6. 29. 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. 이전 1 2 3 4 다음 반응형
