YumeHANA YUME'S DEV

날짜 형식을 자유롭게 변경하기 위해 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 할 수 있지..

티스토리와 같은 방식의 태그를 구현Input TagonKeyDown함수를 활용하여 Enter와 Tab이 눌렀을때 input을 다시 빈값으로 초기화 해준다. const [tag, setTag] = useState("") const onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); setTag(""); } }우선 해시태그와 input으로 태그를 입력할 수 있도록 작성 # setTag(e.target.value)} onKeyD..

react에서 color picker를 사용하기 위해서 react-colorful을 사용 https://npmjs.com/package/react-colorful react-colorful🎨 A tiny (2,8 KB) color picker component for React and Preact apps. Fast, well-tested, dependency-free, mobile-friendly and accessible. Latest version: 5.6.1, last published: 3 years ago. Start using react-colorful in your project by running `npm i reacwww.npmjs.com Installmentnpm install re..