프론트엔드 개발 찔찔이

가계부 리스트를 필터링할 때, 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 이벤트를 모두 적용한다.   결과

input 태그에 정보를 적어서 넘길 때, 필수로 적어야하는 값을 아래처럼 텍스트로 표시를 해봤다. 입력할 때와 추가하기 버튼을 눌렀 때 활성화하려고 하는데 vee-validate 라이브러리를 사용했다.(vue3, composition API,  부모 컴포넌트  따로 ref로 value값을 지정해주지 않아도 value: title을 통해 v-model과 연결할 수 있다. errorMessage는 검사 함수에서 return할 문자열 메시지다. 이 메시지가 있냐 없냐 자체로 if문을 만들어 에러 메시지를 띄울 수 있다. validate 함수는 useField를 이용해서 함수명을 정하면 @blur나 콜백함수 어디에서나 불러올 수 있다. (위에선 validateTitle로 지정해봤다.)  const..

input 태그를 컴포넌트화하여 form 섹션 안에 포함시키려고 한다.각각의 input 컴포넌트 value값을 가져와서 부모 컴포넌트에서 사용하려면 어떻게 해야할까?  원래는 자식 컴포넌트에서 emit으로 value값을 부모한테 보내고 부모는 그 value값을 가져오는 과정을 거쳐야하지만,defineModel을 이용하면 다른 함수 없이 바로 value값을 가져올 수 있다. 자식 컴포넌트#inputText.vue  부모 컴포넌트  이렇게하면 부모 컴포넌트에 있는 변수 title에 InputText 컴포넌트에서 input 태그에 입력한 value값이 저장된다.  radio나 select input도 가져올 수 있다. input[type="radio"] # inputRadio.vue {..

Composition API를 사용한 반응형 상태 변경#index.tsconst router = createRouter({ routes: [ { path: '/', name: 'home', component: HomeView, }, { path: '/:tag', //쿼리스트링 변수 설정하기 name: 'tag', component: HomeView, }, ],});- tag로 쿼리스트링 변수 설정하기  #자식 컴포넌트.vue /** * 태그 클릭시 url에 파라미터 추가 함수 * ex) www.domain.com/?tag=테스트 * item : 클릭한 태그 */ const addParams = (item: ..