일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- NonNullable
- 커스텀
- React Native
- 성능최적화
- CSS
- TSDoc
- Chart.js
- typescript
- 리액트
- react
- JS console
- javascript
- const 단언문
- click and drag
- 타입좁히기
- utilty type
- 공통컴포넌트
- returnType
- 2022
- 타입스크립트
- 개발콘텐츠
- vue.js
- React.js
- 제네릭
- reactjs
- 누구나 자료구조와 알고리즘
- 티스토리꾸미기
- 폰트적용하기
- 레이아웃쪼개기
- 반복줄이기
- Today
- Total
목록전체 (633)
몽땅뚝딱 개발자


뷰포트가 달라지면 원래의 비율을 유지한 채 늘어난다. 반응형인 경우 아래 옵션을 추가하면 비율이 아닌 부모의 크기에 맞춰 늘어나고 줄어든다. 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 ..