몽땅뚝딱 개발자

plugins: [legendMargin], // 범례와 그래프 간 간격조정 const legendMargin = { id: 'legendMargin', beforeInit(chart, legend, options) { const fitValue = chart.legend.fit const spacing = 20 // 추가할 간격 chart.legend.fit = function fit() { fitValue.bind(chart.legend)() return (this.height += spacing) } }, } 출처 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

const getTextColorByBackgroundColor = (hexColor: string): string => { const c = hexColor.substring(1) // 색상 앞의 # 제거 const rgb = parseInt(c, 16) // rrggbb를 10진수로 변환 const r = (rgb >> 16) & 0xff // red 추출 const g = (rgb >> 8) & 0xff // green 추출 const b = (rgb >> 0) & 0xff // blue 추출 const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b // per ITU-R BT.709 // 색상 선택 const result = luma < 127.5 ? 'white'..

&__textarea { // .. overflow-y: scroll; &::-webkit-scrollbar { width: 4px; /* 스크롤바의 너비 */ } &::-webkit-scrollbar-thumb { border-radius: 6px; background-color: $kpi-black30; /* 스크롤바의 색상 */ } &::-webkit-scrollbar-track { background-color: $fade; /* 스크롤바 트랙 색상 */ } }

[Vue.js] 빌트인 컴포넌트 - component와 is Vue의 Built-In Components ◽ component 이 컴포넌트는 Build-In Component로 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 한다. 렌더링 할 실제 컴포넌트는 is prop에 의해 결정된다. ◽ is 속성 is.. be-a-weapon.tistory.com Vue2로 개발할 때는 를 한번도 사용해보지 않아서 차이점은 잘 모르겠지만.. Vue3부터 를 사용하는 방법이 바뀌었다고 한다. 📄 HTML ... ... 📄 Script import { markRaw, ref } from 'vue' import ChildComp1 from '@/components/ChildComp1.vue' import Chi..

영역을 눌렀을 때 이 display: block되면서(=input은 none) 문구를 수정하고, 에서 blur 됐을 때 다시 태그가 block되는 기능을 구현했다. (타이틀 수정 기능,,) 문제는 input이 활성화되면서 focus()가 되어야했는데 아래와 같이 작성 후 클릭이벤트를 주었을 때 아무런 동작도 하지 않았다. {{ title }} const tryEdit = () => { isTryModify.value = true if (titleRef.value) titleRef.value.focus() } 스크립트 부분에 setTimeout을 0으로 걸어주니 해결되었다. 왜인지는 더 공부해봐야하는 부분.... const tryEdit = () => { isTryModify.value = true set..

◽ memoization const cache = {} export function getAverageColorOfImage(imgElement) { if(cache.hasOwnProperty(imgElement)) { return cache[imgElement] } // ... 실행로직 return averageColor; } ◽ memoization 모듈화 function memoize(fn) { const cache = {} return function(...args) { // 파라미터가 여러개인 경우의 방어로직 if(args.length !== 1) { return fn(...args) } if(cache.hasOwnProperty(args)) { return cache[args] } const ..

속성을 사용하여 동적으로 콘텐츠를 넣어보자! 📄 HTML 📄 CSS &[data-desc]:hover { &::before { content: ''; position: absolute; top: 5px; right: 6px; width: 0; height: 25px; border-right: 10px solid transparent; border-bottom: 20px solid $white; border-left: 10px solid transparent; } &::after { content: attr(data-desc); position: absolute; top: 40px; right: -13px; width: 57px; height: 35px; border-radius: 5px; font-wei..

react-lazyload를 사용한다. vue에도 vue-lazyload가 있다! ◽ react-lazyload 설치하기 npm i --save react-lazyload [사용예제] import React from 'react'; import styled from 'styled-components'; import { useDispatch } from 'react-redux'; import { showModal } from '../redux/imageModal'; import LazyLoad from 'react-lazyload'; function PhotoItem({ photo: { urls, alt } }) { const dispatch = useDispatch(); const openModal = ..

◽ Layout Shift 의도하지않은 클릭이 발생하는 등 사용성이 떨어진다. ◽ Layout Shift 확인하기 ◽ Layout Shift의 원인 - 사이즈가 정해져 있지 않은 이미지가 로딩되는 경우 - 사이즈가 정해져 있지 않은 광고가 있는 경우 - 동적으로 콘텐츠를 삽입하는 경우 - Web font (FOIT, FOUT): 폰트가 추가로 적용되는 경우 ◽ 사이즈가 정해져있지 않은 이미지가 로딩되는 경우 사이즈가 지정되어있는 경우(예를 들어 비율이 16:9로 정해진 경우) padding-bottom을 주고 미리 영역을 확보한다. const ImageWrap = styled.div` width: 100%; padding-bottom: 56.25%; position: relative; `; const I..

border를 주고 box-sizing: border-box;를 줘봐도 자꾸 영역밖으로 나갔다. box-shadow 속성으로 주면 깔끔하게 지정된 div 영역 안으로 들어간다. div { box-shadow: 0 0 0 3px #4872f4 inset; } 출처 HTML 레이아웃 잡을 때 박스 안쪽 테두리 실전 2가지 방법 웹을 디자인(개발?) 하다 보면 레이아웃을 잡기 위해서 외곽 (border) 를 임시로 설정하는 경우가 많습니다. 하지만 외곽을 주면 그 보더의 두께에 따라서 영역이 커집니다. 예를 들어 100% 짜리 폭 indienote.tistory.com