YumeHANA YUME'S DEV

date-picker를 찾다보면 대부분의 date-picker가 dropdown형식으로 되어서 vcalendar로 달력으로 바로 날짜를 선택할 수 있도록 기능을 구현 VCalendar를 사용하면서 css 작업이 생각보다 다른 라이브러리보다 좀 건드리기가 복잡했기에혹시 css설정 관련해서 필요한것이 있으면 알려드리겠습니다.Installmentvcalendar docs를 보며 진행https://vcalendar.io/getting-started/installation.html vcalendar를 사용하기 위해 라이브러리를 설치npm install v-calendar@next @popperjs/core 전역으로 VCalendar를 전역으로 사용하기위해 main에서 전역으로 VCalendar 플러그인을 등록im..

데이터를 indexDB에 저장을 하다보니 indexDB의 용량정보를 가져와 화면에 보여줘서 좀 더 용량 관리를 수월하게 할 수 있도록 처리 Estimate우선 indexDB의 용량 정보를 가져오는건 estimate()를 활용하면 가져올 수 있다.estimate()는 현재 해당 브라우저에 대해서 할당되어있는 총 스토리지 용량과 사용량을 가져올 수 있다.navigator.storage.estimate() 사용 공간에서는 indexDB 뿐만 아니라 Cache, Local Storage, Session Storage등이 다 포함되어있으므로,상황에 따라서 useageDetails를 활용하여 특정 스토리지 정보를 가져올 수 있다. indexDB의 사용 용량만 가져온다면 useageDetails.indexDB로 in..

트리구조의 드래그를 사용할때는 el-tree를 사용했지만,단순히 level1의 드래그에서는 el-tree를 쓰면 더 복잡할 것같아서 vue draggable을 사용 Installmentvue draggable은 vue2 버전과 vue3 버전에 따라서 설치하는 라이브러리가 다르다.https://sortablejs.github.io/Vue.Draggable/#/simple vuedraggable sortablejs.github.iohttps://github.com/SortableJS/Vue.Draggable?tab=readme-ov-file GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.jsVue drag-an..

react에서도 i18n을 사용했지만vue에서는 이전에 i18n을 사용안하고 직접 언어 변경을 구현한 적이 있었는데, 이번에는 i18n을 사용해서 한번 다시 해보았다.Installmentvue에서는 vue에서 사용하는 vue-i18n 라이브러리를 설치한다.npm install vue-i18nUseagei18n.ts 초기 생성 파일 만들기message는 kev:value형태로 다루기 때문에 좀 더 관리를 편하게하기 위해서 각각 사용되는 곳으로 한번 더 묶어서 정리했다. 사이드바에 휴지통과 설정 버튼이 있기때문에 side안에 휴지통, 설정 두개를 묶어주었다.이후 createI18n으로 i18n을 만들어 주면 된다.import { createI18n } from 'vue-i18n'const messages =..

프론트를 개발하다보면 store가 필요한 상황이 많이 발생한다store는 상태관리로 해당 프로젝트의 모든 곳에서 데이터를 서로 공유할 수 있다.이로 인하여 데이터 관리가 훨씬 편해지며, 복잡한 과정을 줄일 수 있다. 단순하게 타입스크립트를 만들어서 서로 공유할 수는 있지만 이 경우에는 부모 와 자식간의 관계인 경우에 관리가 편하다고 생각하면된다.같은 instance로 해서 관리해서 다른 컴포넌트간의 데이터를 공유할수는 있지만 관리가 복잡하기에 store를 써서 쉽게 관리할 수 있다.Installmentnpm install pinia 우선 pinia를 설치Useageapp을 mount하기전에 pinia를 먼저 등록하고 mount를 해주면 된다.이러면 pinia를 등록해서 pinia store를 사용할 수 ..

FullCalendar를 사용하다보면 부모의 크기가 변경이 되는 상황에서는 FullCalendar의 크기는 resize가 되지 않아서 부모의 크기에 맞춰서 자동으로 FullCalendar도 크기 조절이 되도록 반응형으로 만들어줘야한다.Installment우선 FullCalendar를 사용하기해 라이브러리를 설치 우선 daygrid만 설치해서 테스트를 진행npm install @fullcalendar/vue3 @fullcalendar/core @fullcalendar/daygridinitial setup일단 초기 테스트를 위해 fullcalendar 기본 데이터를 넣고 렌더링 이러면 일단 fullCalendar가 화면에 렌더링 되는것을 볼 수 있다. 아이콘이나 ui/ux는 나중에 css로 ..

프론트만 사용하여 프로젝트를 진행할려고하다보니 데이터 저장을 활용하기 위해 indexDB를 활용하여 관리indexDB는 데이터를 객체단위로 쉽게 저장하고 관리할 수 있어서 편하게 데이터를 관리할 수 있다. 보통은 indexDB에 저장할때는 보안을 위해 암호화를 해야하지만 지금 진행하는 프로젝트는 암호화까지는 굳히 할 필요가 없을것같아 제외Installment npm install idb 처음 indexDB를 공부할때는 라이브러리를 따로 설치안하고 했었는데 암호화까지 해보면서 점점 복잡해져서 이번엔 그냥 idb라이브러리를 설치해서 진행Init Database우선 기본적으로 database를 만들어준 후 그 안에 테이블을 생성한다.각 테이블별로 ts파일을 만들어서 관리를 진행 우선 openDB를 하고 각 파..

사이드바를 만들면서 사용자가 드래그래서 크기를 자유롭게 조절할 수 있도록 기능을 구현하고자하여 splitpanes를 사용Installment npm install splitpanes@next element-plus를 사용하면서 element-plus에도 split이 있긴하지만 아직 베타버전이기에 splitpanes를 사용 Split Componentsplit 컴포넌트를 만들어 코드 관리를 좀 더 편하게 관리splitpanes를 사용할때는 splitpanes와 pane 그리고 css를 import하여 사용해야한다. 측면 사이드바를 버튼을 눌러 닫고 열고가 가능하게 할려고해서 pane에 size props를 전달해 외부에서도 사이즈를 조절할 수 있도록 설정 버튼을 누르면 측면 사이드바의 닫힘 여부를 stor..