프론트엔드 개발 찔찔이

가계부 리스트를 필터링할 때, computed를 이용해서 변화값을 가져오고 필터링은 할 수 있지만새로고침하면 데이터가 다 날아가게 된다. 새로고침해도 데이터가 날아가지 않도록 검색 분류값들을 url 쿼리스트링에 저장하고, 쿼리스트링 값을 가져와서 리스트를 필터링해보려고 한다. Composition API 환경에서 router를 사용하려면 useRouter와 useRoute를 사용한다. url로 쿼리값 보내기 - router.push({query: value})  onMounted를 사용하여 새로고침해도 url의 쿼리스트링을 통해 검색이 가능하도록 한다.

router로 페이지를 이동하는 함수에는 세가지가 있다.· push  : URL 이동. 히스토리 스택에 추가된다. · replace  : URL 이동. 현재 페이지를 대체하므로 히스토리 스택에 추가되지 않는다. · go  : 히스토리 이동. 숫자만큼 앞, 뒤로 이동할 수 있다. $router.pushthis.$router.push('/') // URL로 이동this.$router.push({name: 'home'}) // /home 으로 이동this.$router.push({name: 'detail', params: {id: '001'} }) // /detail/001 로 이동this.$router.push({ path:'/list', query: { tag: 'vue' } }); // list?ta..

input type="date"를 통해 달력을 사용할 때, 사용자 경험을 향상시키기 위해 날짜 입력을 막는다.날짜 입력을 허용하면 임의로 날짜를 적용할 수 있기 때문.  그래서 input type="date"를 클릭하거나 포커스했을 때, 키보드로 바꿀 수 없고 선택만 가능하도록 해야한다. ref를 이용해 DOM에 접근하고, showPicker 메소드를 사용해 적용한다.이때 input 태그에는 click, focus 이벤트를 모두 적용한다.   결과