Notes of Star ⭐

package.json { "name": "svelte-app", "version": "1.0.0", "private": true, "type": "module", "scripts": { "build": "rollup -c", "dev": "rollup -c -w", "start": "sirv public --no-clear" }, "devDependencies": { "@rollup/plugin-alias": "^5.0.0", "@rollup/plugin-commonjs": "^24.0.0", "@rollup/plugin-node-resolve": "^15.0.0", "@rollup/plugin-terser": "^0.4.0", "autoprefixer": "^10.4.14", "node-sass": ..

1. HTML 전체 #신작 #완결 #BL/GL #드라마 #판타지 #오피스 #캠퍼스 #호러/미스터리 #학원 #시대 #기타 #기타 #기타 2. CSS .tabs { display: flex; margin-top: 32px; overflow: hidden; flex-wrap: nowrap; /* 모바일일 경우 overflow-x: auto 추가 */ overflow-x: auto } 3. JAVASCRIPT left dragFlag = false left x, y, preX, prey const target = document.querySelector('.tabs') target.addEventListener('mousedown', function (e) { dragFlag = true x = target.s..

Vue directive - 버튼 외 다른 영역 클릭 시 함수 실행 테스트 1. main.js 에 사용할 Vue directive 함수 추가 Vue.directive("click-outside", { bind: function (el, binding, vnode) { el.clickOutsideEvent = function (event) { if (!(el == event.target || el.contains(event.target))) { vnode.context[binding.expression](event); } }; document.body.addEventListener('click', el.clickOutsideEvent) }, unbind: function (el) { document.bod..

Vue directive - for문 끝난 후 callback 처리 관련 테스트 1. main.js 에 아래 Vue directive 추가 Vue.directive("for-callback", function(el, binding) { let element = binding.value; if (element.key == element.array.length - 1) if (typeof element.callback === "function") { element.callback(); } }); 2. 적용할 template for문에 directive 적용 사용 시 main.js 추가한 directive 명 v-for-callback 추가하여 key, array, callback 추가 callback 함수를..

숫자 comma (,) 포맷 적용 테스트 function numberFormatComma(data) { const num = Number(data); // num이 있고 0보다 클 때 포맷 적용하여 return 하고 아니면 0을 return if (num && num > 0) { const cn1 = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); return cn1; } else { return num; } }

파일 용량 단위 포맷 적용 테스트 (Bytes, GB, MB 등) // bytes: bytes 표기할 숫자 데이터, decimals: 소수점 표기 자리수 정의 function formatBytes(bytes, decimals) { if (bytes == 0) return '0 Bytes'; var k = 1024, dm = decimals || 2, sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], // 단위 적용 i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; }

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" } }