본문 바로가기

전체 글56

[Vue.js] Datepicker를 이용한 캘린더 만들기 - 데이터 바인딩 및 오늘 날짜로 설정하기 먼저 datepicker를 다운받아야 하는데요 npm install vue3-datepicker 를 해서 패키지를 받아줍니다. 다음은 본론인 코드로 넘어가겠습니다. 입사일자 ... 이렇게 를 만들어 줍니다. - 상황에 따라 변형은 자유롭게 하면 됩니다. import {ref} from 'vue'; import Datepicker from 'vue3-datepicker'; import axios from 'axios'; let picked = ref(new Date()); // 오늘날짜 const locale = reactive(ko); const inputFormat = ref('yyyy-MM-dd'); export default { ... 변수 선언을 해줍니다. 조회할 때 데이터 바인딩 하는 방법입니다.. 2023. 12. 7.
[Vue.js] select 태그에 데이터 바인딩하기 공식사이트 기준으로 먼저 말을 해보겠습니다. Please select one A B C 선택함: {{ selected }} 위와 같은 코드가 나타나는데요 이러한 이미지로 만들어지는 것을 볼 수 있습니다. 출처: https://v2.ko.vuejs.org/v2/guide/forms.html#%EC%85%80%EB%A0%89%ED%8A%B8 저는 저렇게 만들지 않고, v-for 을 이용하여 select 태그를 완성하였는데요 {{ user.name }} data() { return { selWrkTyp: [ {name:"전체", value: ""}, {name:"A", value: "01"}, {name:"B", value: "02"}, ], }; }, 이렇게 완성을 하였습니다. 데이터 바인딩을 v-model.. 2023. 12. 5.
[Vue.js] input 태그에 데이터 바인딩하기(feat. v-model, type, :value) 먼저 공식 사이트의 내용을 들고와보자면 메시지: {{ message }} 출저: https://v2.ko.vuejs.org/v2/guide/forms.html#%EB%AC%B8%EC%9E%90%EC%97%B4 이런식으로 생긴 것이 나오는 것을 알 수 있습니다. v-model 을 고집하며 제가 만든 코드는 이러한 코드였습니다. 이러한 코드의 문제점은 1글자만 수정해도 커서가 끊기는 현상이였습니다. 10000이 있는데 11111로 바꾸고자하면 다 지우고 11 다시 클릭해서 111 다시 클릭해서 1111 ... 이런식으로 동작을 하는 것입니다. 이것 저것을 시도해 본 결과 type을 text로 선언하고 :value를 이용하여 데이터를 바인딩해주면 제대로 동작하는 것을 확인할 수 있었습니다. 단순 조회용도라면 .. 2023. 12. 5.
[Java] Collection 정리 자바 컬렉션 프레임워크의 상속 구조입니다. Collection 인터페이스는 List, Set, Queue로 크게 3가지 상위 인터페이스로 분류할 수 있습니다. 그리고 여기에 Map의 경우 Collection 인터페이스를 상속받고 있지 않지만 Collection으로 분류됩니다. 여기서 많이쓰는 것은 List, ArrayList, Map, HashMap 정도이다. 인터페이스 구현클래스 특징 Set HashSet TreeSet 순서를 유지하지 않는 데이터의 중복을 허용하지 않습니다. List LinkedList Vector ArrayList 순서가 있는 데이터의 집합으로 데이터의 중복을 허용 Queue LinkedList PriorityQueue List와 유사합니다. Map Hashtable HashMap .. 2023. 11. 29.