황금빛 블로그

오늘은 v-model을 이용해서 간단하게 숫자 카운트하는 기능(일명 Number Stepper 또는 Stepper Input)을 만들어보도록 하겠습니다. 우선 기능 구현에 앞서 화면을 만들어보겠습니다. 좌우측으로 - + 버튼이 들어가고 가운데 인풋 박스가 들어갈 것입니다.css는 아래와 같습니다. .addBtn{ padding:100px; display: flex; flex-wrap: wrap; gap:3px; input, button{ width:30px; height:30px; box-sizing: border-box; border:1px solid #ddd; border-radius: 8px; } input{ ..

오늘은 vue3에서 아코디언 만들기 일단은 마지막 시간으로 vue의 내장 컴포넌트인 을 사용해서 아코디언 기능을 만들어보도록 하겠습니다.특징1이라는 내장 컴포너트를 사용하게 될 경우 Transition 컴포넌트에 기본적으로 내장된 훅을 이할 수 있어요 트렌지션이 적용된 소스를 먼저 보도록 하겠습니다. 위 코드에서 보면 트렌지션 컴포넌트에 @before-enter, @enter, @before-leave, @leave 이벤트 호출이 있는데요 이것이 바로 트렌지션의 내장 훅입니다. 이것들은 아래와 같은 이벤트를 인식합니다.@before-enter : 요소가 DOM에 들어가기 직전에 실행됨@enter : 트랜지션이 시작될 때 실행됨@before-leave : DOM에서 나가기 전에 실행됨@lea..

위택스신고지방소득세종합소득분 신고내역오늘은 지방소득세 신고 후 신고가 잘 되었는지 확인하는 방법에 대해서 알아보도록 하겠습니다. 올해도 어김 없이 종합소득세 신고의 달의 돌아왔습니다. 이미 4월부터 신고를 준비하고 진행하신 분들도 계실텐데요 저의 경우 올해는 처음으로 직접 종합소득세를 신고하게 되었습니다. 예전과 다르게 거의 전부 자동으로 안내가 되어서 그냥 대략 확인하고 해당 사항이 없으면 다음다음 단계로 이동해서 신고를 완료하면 되더군요 매우 편안😊👍 그런데 종합소득세를 신고하고 나니 '지방소득세'를 별도로 또 신고해야 한다고 나오더군요?🤔 홈택스에서 종합소득세 신고를 완료하고 나니 바로 지방소득세 신고할 수 있는 버튼이 보여서 어렵지 않게 신고를 마칠 수 있었습니다. 지방소득세 신고내역 확인은..

이전 시간에는 dom 참조 ref를 활용해서 아코디언 메뉴를 부드럽게 펼치고 닫아봤는데요 오늘은 이벤트 타겟을 활용해서 아코디언을 부드럽게 열고 닫는 기능을 적용해보겠습니다.앞에서 포스팅한 dom ref 사용한 방식과 기능 구현 방식은 거의 동일하다고 보시면 됩니다. 차이가 있다면 부드럽게 펼칠 div를 ref로 선택하는가 event.target로 선택하는가의 차이 뿐입니다. 앞시간에서 dom ref로 요소를 컨트롤 할 때는 아래와 같이 ref 변수를 선언해서 사용을 했는데요let contRefs = ref([]); event.target로 작업을 할 경우에는 ref 변수가 필요가 없습니다. 어떻게 보면 일반의 스크립트로만 작업을 하는 방식이기 때문에 오히려 제일 익숙한 방식일 수 있습니다. 전체적은 ..

DOM ref event.target오늘은 지난 시간에 이어서 vue에서 만든 아코디언 메뉴를 부드럽게 하는 방법에 대해서 알아보겠습니다.앞 시간 요약v-for 반복문으로 생성한 아코디언 컨텐츠들에 상태값(isOpen)을 독립적으로 설정해두고 개별적으로 열고 닫고 상태를 컨트롤 한다.오늘 작업 포인트1. 부드럽게 open할 요소를 ref 또는 event.target 으로 select한다.2. v-show를 사용하면 요소가 display none/block 처리되기 때문에 요소를 컨트롤 하기 전에는 반드시 요소를 display:block 처리해준다. 오늘 탭을 부드럽게 열고 닫는 기능에서는 v-show 디렉티브를 사용할건데요 간단하게 v-if와 v-show의 차이에 대해서 알고 넘어가자면v-show실제 돔..