YumeHANA YUME'S DEV

프론트만 사용하여 프로젝트를 진행할려고하다보니 데이터 저장을 활용하기 위해 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..

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..

이전에 react에서 했던 다크모드와 화이트모드 설정은 직접 class를 하나씩 주는 방식으로 했었는데이 부분에서 많은 노가다가 필요했었기에 보통 페이지들에서 사용하는 방식인data-theme을 주는 방식으로 진행Stylestyle 폴더에서 variable.css파일을 생성하여 스타일 변수를 저장하는 파일로 관리이후 main에 해당 css파일을 import해주면 된다. data-theme이 white는 화이트 모드data-theme이 dark는 다크모드 이때 변수명은 둘다 동일하게 가져가야한다.:root { --app-root-padding: 10px;}:root[data-theme='white'] { --app-theme-side-background: #f3f3f3; --app-them..

페이지에 언어 변경이 가능한 페이지를 구현하기 위해서 i18n을 사용 우선 i18n 라이브러리를 설치합니다.npm install i18next react-i18nextInitalizedi18n 초기 세팅을 위해루트 경로에 i18n.ts 파일을 만들어서 기본 언어 설정 및 사용할 언어 리소스를 추가해줍니다.import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import { enTranslation, koTranslation } from './locales/index';i18n .use(initReactI18next) .init({ resources: { en: { translati..

기존에 Router를 사용할때 Navigator를 활용해서 해당 메뉴를 누르면Navigator로 이동을 시키는 방법으로 router를 사용했었는데이 경우 메뉴를 하나 추가할때마다 여러 파일에서 추가적으로 작업을 해주어야했기에 좀 더 편하게 관리하고자 했다. 이번에는 navigator로 이동을 하는 것이 아닌 Link를 활용하여 a 태그로 이동이 되도록 처리하고,routes와 router도 자동으로 만들어지도록 하여좀 더 메뉴를 쉽게 관리할 수 있도록 바꿔보았다. 기존의 react-router는 그대로 사용한다.npm install react-router-domRouter Typerouter를 좀 더 편하게 사용하기위해 타입을 커스텀을 해준다.기존의 RouteObject를 활용하여 router 할 수 있지..