프론트엔드 개발 찔찔이

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 태그에 정보를 적어서 넘길 때, 필수로 적어야하는 값을 아래처럼 텍스트로 표시를 해봤다. 입력할 때와 추가하기 버튼을 눌렀 때 활성화하려고 하는데 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 {..