YumeHANA YUME'S DEV

로딩하는 과정을 표현하기 위해서 spinner를 이용spinner component는 이렇게 만들어서 사용 그럼 이런 식의 모양의 spinner 가 나오며 border는 스피너의 크기이며, border-top-color는 spinner의 로딩바 색상을 나타낸다.그럼 spinner는 기본적으로 로딩 시작 전후로 나뉘어서 나타났다가 사라져야하므로 이 기능을 구현 하기 위해 true false변수를 사용store를 사용하여 spinner의 렌더링 여부를 결정const loadingSpinner = ref(false); 사용시에는 이 loadingSpinner의 값만 타이밍에 맞춰서 바꿔주기만 하면 된다.하지만 단순히 이렇게 설정한 경우에는 바로 요청시 spinner가 돌면 결과가 엄청 빨리 return되는 ..

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를 하고 각 파..