분류 전체보기149 datagrid Toast UI Grid & DataTables datagrid Toast UI Grid & DataTables datagrid는 데이터를 화면에 뿌려주는 도구이다. free datagrid 라이브러리 중에 Toast UI Grid 와 DataTables를 간략히 소개한다. 이 두 라이브러리를 테스트 하면서, resizing 기능에 차이를 발견했는데 Toast UI Grid는 grid를 감싸는 element width값의 변화에 대해 유동적으로 대응하지 않는다.(setWidth() 메소드로 해결 가능하다.) 다만, window의 resize 이벤트에는 반응을 한다. 반면 DataTables 는 window의 resize 이벤트에 유동적으로 반응할 뿐 아니라, grid를 감싸는 element width 값의 변화에도 유동적으로 대응을 한다. 이 resi.. 2022. 1. 10. CustomEvent 사용 예제 CustomEvent 사용 예제 CustomEvent() API를 언제 사용하는지 곰곰이 생각한 것을 여기에 정리해 본다. 뭔가 이벤트가 생겼을 때 해야 할 일을 누가 언제 처리하는 것이 효과적인가에 따라 CustomEvent()를 사용하게 된 거 같다. 사례 1 door의 역할(열고 닫기)을 하는 버튼을 클릭할 때, door 버튼은 문을 열고 닫는 주요 기능뿐만 아니라, 이러저러한 일을 해야 한다. btn_door.addEventListener('click',function(){ doOpenHide(); dosomething1(); dosomething2(); dosomething3(); ... }); door 버튼을 클릭할 때, door 버튼은 주요 역할(열고 닫기)만 수행하고, 'door 가 열거나.. 2022. 1. 7. chart color palette chart color paletteHow to Choose Colors for Data Visualizations데이터 시각화를 위해 어떤 색상을 선택할 것인가 이에 대해 세 가지 major 타입이 존재한다. ① Qualitative(Categorical)독립적인 데이터를 시각화 하는데 쓰인다. 이 팔레트의 색상을 주로 categorical color 라고 부른다. ② Sequential연속적인 데이터를 시각화 하는데 쓰인다. ③ Diverging중심값이 있는 데이터를 시각화 하는데 쓰인다. 출처 : https://chartio.com/learn/charts/how-to-choose-colors-data-visualization/#leverage-meaningfulness-of-color How to C.. 2022. 1. 7. TOAST UI Chart 설치 사용법 TOAST UI Chart 설치 사용법https://ui.toast.com/tui-chart TOAST UI :: Make Your Web Delicious!The TOAST UI Is Free Open-source JavaScript UI Libraries Maintained By NHN.ui.toast.com특징TOAST UI Chart 3은 svg 기반으로 개발 되었으나,TOAST UI Chart 4는 canvas 기반으로 의존을 모두 제거하고 TypeScript로 작성되었다. NHN에서 개발한 차트 라이브러리이다.따라서 document가 한국어를 지원하고 있다.https://github.com/nhn/tui.chart/tree/main/docs/ko GitHub - nhn/tui.chart: 🍞.. 2022. 1. 6. VSCode Live Sass Compiler VSCode Live Sass Compiler VSCode Live Sass Compiler는 SASS/SCSS 파일을 CSS 파일로 실시간 compile/transpile 해준다. 특징Live SASS & SCSS Compile.Customizable file location of exported CSS.Customizable exported CSS Style (expanded, compact, compressed, nested).Customizable extension name (.css or .min.css).Quick Status bar control.Exclude Specific Folders by settings.Live Reload to browser (Dependency on Live Se.. 2022. 1. 5. 유사배열을 배열로 변환 Array.prototype.slice.call() 유사배열을 배열로 변환 Array.prototype.slice.call() 유사배열객체(Array-like Object)에 Array API를 사용하기 위해 배열로 변환한다. 그 방법은 다음과 같다. ES5 Array.prototype.slice.call(arr,0) ES6 Array.from(arr) slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다. 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice Array.prototype.slice() - JavaScript | MDN sl.. 2022. 1. 5. 이전 1 ··· 21 22 23 24 25 다음
