YumeHANA YUME'S DEV

프론트를 개발하다보면 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를 하고 각 파..

데이터를 만들때마다 겹치지 않는 id값을 만들어줘야하기때문에최대한 중복이 안되도록 랜덤 id를 만드는 함수를 구현 알파벳과 숫자만으로 이루어지도록 하며,파라미터로 원하는 길이를 입력받아 원하는 길이만큼 랜덤으로 값을 하나씩 뽑아서 랜덤 id를 만들어준다.export function getRandomId(length = 8) { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; let result = ''; for (let i = 0; i GPT를 활용하여 해당 함수의 중복 확률을 계산 해보니 총 경우의수는 약 218조 3천억 개의 고유한 조합이 존재하다. 나중에 데이터의 양이 몇개인지에 따라서 ..

날짜 형식을 자유롭게 변경하기 위해 formatter 함수를 만들어서 사용 시간의 경우 Date, String, number 타입 모두가 가능하지만통일성을 위해서 timestamp만 처리하도록 고려 나중에 타입에 따라서 date 변수의 날짜만 잘 처리하면 사용가능format 파라미터로 원하는 형식을 입력받고 기본 format형태는 YYYY-MM-DD 형태로 사용 나중에는 전달받은 format의 값을 replace를 활용하여 각각 알맞은 값으로 바꿔준다.나중에 상황에 따라서 YYYY - YYYY 형태도 고려해서 정규식으로 같은 값은 모두 바꿔주는 방식으로 구현export function formatDateLocale(timestamp: number, format = 'YYYY-MM-DD') { con..

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

electron app을 만들다 보면 맥과 윈도우 둘다 고려했을때 윗 부분이 다르기때문에 똑같이 만들어주기 위해 직접 네비게이션바를 만들어주어야한다.Title Bar Component우선 타이틀바 컴포넌트를 만들어 앱의 메인 화면들이 나오는 곳에 맨 상단에 붙힌다. 항상 상단에는 타이틀이 나오도록 타이틀 최대화 아이콘은 사용하지않고, 최소화와 닫기 아이콘만 사용할려고 해서 두개만 추가했다. preload.jselectron의 닫기와 최소화 기능 구현을 위해 preload를 만들어 electron config에 붙혀준다.더보기Electron에서 preload.js는 렌더러 프로세스(=브라우저 환경, 예: Vue/React)와 메인 프로세스(Node.js/Electron A..

svg 아이콘을 좀 더 편하게 사용하기 위해svg 컴포넌트를 구현 Installmentvite에서 svg를 사용하기위해서 vite-plugin-svgr을 설치npm install vite-plugin-svgr --save-dev 이후 vite.config.ts에서 svgLoader plugin을 등록import svgLoader from 'vite-svg-loader'// https://vite.dev/config/export default defineConfig({ plugins: [vue(), svgLoader()],SVG Icon우선 svg 아이콘 관리를 위해 constant > icon.ts 파일을 만들어 svg 아이콘을 상수화 작업을 진행import calendarIcon from "@/ass..