Notes of Star ⭐

javascript 휴대폰 번호 하이픈 포맷 (-) 처리 //"01012345678" --> "010-1234-5678" function convertMobileNumberFormat(mobileNo) { // mobileNo 자리수가 10개 또는 11개일 경우만 실행 (필요할 경우만 분기 처리) if (mobileNo.length === 10 || mobileNo.length === 11) { return mobileNo.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); } return mobileNo; }

DOCTYPE 포함된 HTML문서에서 원하는 HTML만 추출하는 기능 테스트 ex) sun editor로 등록된 게시글의 원본 html문서에서 editor로 등록한 내용만 추출 function getEditorHtml(content) { if (!content) { return; } const parser = new DOMParser(); const doc = parser.parseFromString(content, 'text/html'); if (doc.querySelector('.sun-editor-editable')) { return doc.querySelector('.sun-editor-editable').innerHTML; } else { return content; } }

jotai 유틸 atomWithStorage 활용하여 session storage 적용 테스트 import { useAtom, atom } from 'jotai'; import { atomWithStorage, createJSONStorage } from 'jotai/utils'; // session storage 적용 const darkModeAtom = atomWithStorage( 'darkMode', false, createJSONStorage(() => sessionStorage), ); const [darkMode, setDarkMode] = useAtom(darkModeAtom); return ( Welcome to {darkMode ? 'dark' : 'light'} mode! setDar..

opacity 활용한 깜빡 거리는 느낌의 CSS Animation 테스트 // animation 적용 .image { position: absolute; left: 20.3vw; bottom: 24vw; animation: fadeIn 1s infinite alternate; } // animation @keyframes fadeIn { from { opacity: 0.2; } }

글자가 순서대로 하나씩 올라갔다가 내려오는 (UP & Down) CSS Animation // animation 적용 .title span { position: relative; animation: animeTextUp 2s infinite; } // 글자 하나씩 tag로 묶여서 delay 적용 .title span:nth-of-type(1) { animation-delay: .1s; } .title span:nth-of-type(2) { animation-delay: .2s; } .title span:nth-of-type(3) { animation-delay: .3s; } .title span:nth-of-type(4) { animation-delay: .4s; } .title span:nth-of-t..

좌우로 움직이는 (swing) CSS Animation 테스트 .common-template-img-swing { animation: commonTemplateSwing 1s alternate infinite } @keyframes commonTemplateSwing { 0% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 100% { -webkit-transform: rotate(2deg); transform: rotate(2deg); } }

목록 추가 (POST) 및 수정 (PUT) 테스트 (참고한 페이지 : https://tanstack.com/query/v4/docs/react/examples/react/optimistic-updates-typescript) import styles from './styles.module.scss'; import React, { useState } from 'react'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import axios from 'axios'; export default function Study() { const queryClient = useQueryClient(); interface ..

react-query 목록 호출 (GET) 및 재 호출 테스트 (참고한 페이지 :https://tanstack.com/query/v4/docs/react/examples/react/pagination) import styles from './styles.module.scss'; import React, { useState } from 'react'; import { useQuery } from '@tanstack/react-query'; importaxiosfrom 'axios'; export default function Study() { const [imageNumber, setImageNumber] = useState(1); async function getCategorys(imageNumber =..

Delete `␍` prettier/prettier 에러 발생 시 eslintrc.json 의 rules 에 prettier/prettier 부분 "prettier/prettier": ["error", { "endOfLine": "auto" }] 로 변경 { ... "rules": { "prettier/prettier": ["error", { "endOfLine": "auto" }], // 해당 부분 수정 "react/react-in-jsx-scope": "off", "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }], "react/prop-types": "off" } }

ES6 + typescript 사용중일 경우 // eslint-disable-next-line @typescript-eslint/no-empty-function console.warn = () => {};