No image

Dev/Frontend

[echarts.js] legend selector: Add function to deselect all legends

echarts에서는 모든 라벨(legends)의 전체선택, 선택된 라벨 반전의 기능이 존재합니다. 하지만 전체선택 해제 기능은 없더라구요?! echarts.js 소스코드에 legend 전체선택 해제 기능을 추가하는 방법을 작성해보려고 합니다!! 1. 전체선택, 반전선택 먼저 기존에 존재하는 전체선택("all")과 반전("inverse")는 이미 존재하는 기능이니 차트를 만들 때 옵션에 추가만 해주면 되게끔 만들어져있습니다. 아래와 같이 legend 안에 selector를 추가해주면 차트를 만들 때, 전체선택, 반전 버튼이 생성됩니다. options = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', selector: ..

by DOMDOMI 2023. 2. 3.

No image

Dev/Frontend

[오류해결] Uncaught TypeError 관련 오류

[오류해결] Uncaught TypeError: Cannot read properties of null / Uncaught TypeError: Cannot read properties of undefined JavaScript 개발자라면 정말 많이 봤을 법한 오류 문장이죠? 아래 오류는 정의되지 않은(undefined) 객체(object)의 속성(property) 값 또는 함수를 읽으려고 하거나 호출하려고 할 때 발생하는 오류입니다. 그리고 아래 테스트 결과는 실제로 크롬브라우저의 개발자도구(F12)의 Console 탭에서 오류를 발생하게 하여 출력해본 결과입니다. 보시다시피 domdomi 라는 변수가 있고 그 변수에 blog 라는 property 가 존재하는지 확인해봤을 때 애초에 정의조차 하지 않았기..

by 알 수 없는 사용자 2022. 4. 13.

No image

Dev/Frontend

[캐시방지] 웹 개발 시 CSS, JS, Image 캐시 방지하는 법

웹 사이트를 개발하는 중에 이미지나 css 또는 javascript 파일의 내용을 수정해도 반영이 안되어 있을 경우를 가끔 보실 수 있습니다. 심지어 수정본을 배포하고 나서도 어떤 사용자가 이전에 사이트에 접속하고 나서 인터넷 사용 기록 및 캐시 지우기를 하지 않은 이상 배포 이전의 css, js, image 파일들이 그대로 사용되고 있어서 오류가 나거나 버그가 생기는 케이스가 생기곤 합니다. 이런 문제가 발생할 때마다 사용자보고 오래된 캐시(stale cache) 좀 지워주세요 라고 한다거나 새로고침 좀 해주세요 라고 한다거나 시크릿 브라우저로 한번 해보시겠어요 라고 하는 건 정말 어려운 일이겠죠. 기본적으로 캐쉬의 동작은 URL을 기준으로 기존에 동일한URL에 요청한 적이 있었는 지를 판단합니다. 그..

by 알 수 없는 사용자 2021. 11. 3.