반응형 Vue19 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. 🫢 husky와 eslint 적용 👲 husky 사용이유최근 사람이 들어오면서, eslint 같은 것이 잘 지켜지지 않고있었다. 이 부분에 대해서는 좀 부끄럽긴했다. 그러면서 새로 오신 분이 지난번 회사에서는 husky라는 것을 이용했다고 했다. 알아보니 유용한 도구였다.👩🌾 husky란?git 이벤트가 일어나기 전/후로 eslint같은 것을 할 수 있도록 도와주는 라이브러리다. 🧑🍳 설치아래 명령어를 통해 설치가 가능하다.npx husky-init -y && npm install 🧑🌾 pre-commit커밋을 하기전에 특정 동작을 일으킬수 있다. 현재 사이드프로젝트에서는 , main branch에 커밋을 하면, lint를 동작하도록 하였다. #!/usr/bin/env shbranch=$(git symbolic-.. 2024. 5. 3. 🍳 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. 🍋 vue jest 사이드로 시작하면서 배운것들 ※ 금주는 공휴일 및 연차로 인하여 회고를 쓰지 않습니다. 🥯 vue jest 하면서 배운것 세팅에 관한것은 여기에 참조를 부탁드립니다. describe test shallMount, mount emit 테스트(자식컴퍼넌트) emit 테스트(부모컴퍼넌트) triggers events - click triggers events - key event mock axios spyOn 🍌 Describe 단위테스트의 그룹을 묶어둔것. 여기서는 한개의 Component 단위로 묶어서 테스트를 실시하였다. describe('Helloworld.vue 테스트', () => { }); 🥯 test 단위테스트의 그룹에서, 최소 단위의 테스트를 작성 describe('Helloworld.vue 테스트', () => { te.. 2023. 8. 20. 이전 1 2 3 4 5 다음 반응형
