몽땅뚝딱 개발자

뷰포트가 달라지면 원래의 비율을 유지한 채 늘어난다. 반응형인 경우 아래 옵션을 추가하면 비율이 아닌 부모의 크기에 맞춰 늘어나고 줄어든다. options: { maintainAspectRatio: false, } 출처 Responsive Charts | Chart.js Responsive Charts When it comes to changing the chart size based on the window size, a major limitation is that the canvas render size (canvas.width and .height) can not be expressed with relative values, contrary to the display size (canvas.styl..

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; /* 스크롤바 트랙 색상 */ } }

URL-encoder for SVG yoksel.github.io [SVG] background-image에 SVG를 넣어 사용하기 (업데이트 21.04.15) 1. SVG 코드를 활용할 순 없을까? See the Pen gyrqYe by zinee (@zineeworld) on CodePen. 2. SVG 코드를 Data URI로 변환하기 검정색 아이콘이 SVG의 Data URI 값을 넣은 것이고, 파란색이 SVG 코드를 그대로.. zinee-world.tistory.com

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

에러 v-model cannot be used on v-for or v-slot scope variables because they are not writable. 이 에러가 떠서 고군분투했다. 기존에는 값을 하나씩만 넘기다가 이번 케이스에선 오브젝트로 넘겨서 양방향 통신을 했어야했는데ㅠ 고것이 문제였다. emit으로 update:value를 input, change 같은 온갖 이벤트로 다 넘겨보고 computed로도 감지해봤지만 몽땅 실패했다. 타입스크립트도 잘 모르고 Vue3도 잘 몰라서ㅠ 해결할 수 없을거라 생각했지만.... 해결은 됐다. 1. 인덱스를 명확히 지정해주자 이건 좀... 뭔가 말이 안되는 해결책이라고 생각이 들었지만.... 해보았고 역시나 안됐다.. 잘 돌아가는 for문에 item[i..

에러 Failed to resolve component: Label 원인 을 사용했어야했는데 로 오작성하여 생긴 문제이다. 없는 태그를 찾아서 생긴 오류...^^! 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

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