Reack Hook useState 함수 컴포넌트가 렌더링 될 때 const 가 재할당되는것 처럼 보이지만 실제로는 useState 함수에서 초기 여부를 검사하여 전역적으로 setter에 값을 유지한다 아주 간단한 예제인 카운터를 들어보면 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(prevNumber => prevNumber - 1); } return ( {number} +1 ..
HTML5 + sheet.js 를 이용한 클라이언트 Excel parse 바야흐로 2017.05.31 기준. 혹시나 싶어서 검색한 결과 진작에 클라이언트에서도 엑셀 파싱처리가 가능해졌다. 일전에 썼던글인 "HTML Table을 엑셀로 내보내기 : Export to excel sheet on client side" 에서는 엑셀 저장하기를 다루었는데 a 태그의 HTML5 속성인 datatype과 download를 이용하면 형식과 파일명을 직접 만들고 저장하기가 가능해져서 약간의 규칙만 지킨다면 라이브러리 따위없어도 엑셀형식을 갖춘 파일을 만들 수 있었고 테이블 셀의 속성을 전부 재현해 내고 싶은 경우 라이브러리를 사용하면 (아마) 엑셀을 출력키위한 정확한 헤더파일을 지칭하고 그 스타일(혹은 태그)을 온건히 ..
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 12..
ES6 Immediately-invoked function expression IIFE was one of the most used patterns in the ES5 standard, as functions were the only way to declare a scoped block of code. So the following code will result with a ReferenceError:(function() { var scoped = 42; }()); console.log(scoped); // ReferenceError ECMAScript introduced the block scoped let and const, so instead of using an IIFE, we can have t..
currying, partial application 자바스크립트를 최대한 짧고 적은 줄에서 반복적인 함수를 호출하기위한 방법 currying의 장점 - 함수의 인수(파라메터)를 부분적으로 적용할 수 있는 함수를 생성할 수 있다 - 함수안에 기능적으로 분리된 인수를 전달하게 되므로써 기능을 분리하여 그 결과를 얻을 수 있다 ( 좀더 자세히 : 기능별로 나누어서, 쪼개서 호출할 수 있다 ) - 임수의 부분(혹은 집합)을 전달하고 나머지 인수가 실행되는 함수를 리턴받을수 있다 - (개인적으로) 객체지향 언어에서 의례적으로 .(dot)을 참조하였던 방식대신 연속적인 함수호출을 통하여 chaining 패턴같이 이어나갈수 있는 방식으로 느껴진다 자바스크립트에서의 currying Haskell 및 Scala와 같은..
React 시작하기 CDN 으로 연결하여 처음 사용해보기 https://github.com/HeoJeongJin/react-scoreboard-cdn/tree/master react tutorialreact scoreboard by CDN리액트는 UI 라이브러리로 Angular와 같이 프로젝트 전체를 모듈 방식으로 개발할수도 있지만 특정 페이지 내에 리액트를 끼워넣어서도 개발 가능합니다. 예를 들어, 기존에 asp, jsp, php 를 기반으로 개발하였다면 대부분 jquery와 같이 사용하였을텐데, jquery 대신 리액트를 사용할 수도 있고 jquery 같이 리액트를 사용할수도 있습니다. 이 튜토리얼은 기존 페이지 방식으로 Scoreboard라는 앱을 만들면서 react의 React Element, J..
ajaxSetup Ajax 요청에 대한 기본값을 정의. 사용을 권장하지 않습니다. https://api.jquery.com/category/ajax/ Document jQuery.ajaxSetup( options ) options : PlainObject ( Ajax 요청을 구성하기위한 키 : 값 으로된 오브젝트 ) settings : 셋팅에 사용할 수 있는 값은 다음과 같다 jQuery.ajax( [settings ] )settingsType: PlainObjectA set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSet..
tabulator 자주쓰는 고급옵션 1. data 의 object key를 직접 설정한 이름으로 변경할때 123paginationDataReceived:{ "data":"record", },cs 2. pagination 이 local일경우 paginationSize를 꼭 적어야한다 123pagination:"local",paginationSize:20, cs 3. ajaxResponse callback 으로 데이터를 조정, 변경할 수 있는데 만약 수동으로 설정할경우 아래와 같은 값들로 직접 조정할 수 있다 1234567891011121314151617181920212223ajaxResponse:function(){ var pageSize = $("#table").tabulator("getPageSize"..
Bootstrap modals overlapping scroll focus problem 스크롤을 해야할 정도의 긴 모달창이 아래와 같이 2개 있다고 가정하고, 모달1과 모달2를 순서대로 띄웠을때 모달2 는 정상적으로 스크롤링 되지만 모달2를 닫고, 모달1을 스크롤하려고 하면..! 아래와 같이 body로 포커스가 이동되어 더이상 모달1을 스크롤하지 못하는 문제 원인과 해결) modal 을 활성화 하고 닫으면 닫으면 body에 modal-open 클래스추가되고 삭제된다. modal2 를 닫을때 body에 modal-open 이 없을경우 body에 modal-open 클래스를 추가해주면 다시 스크롤의 포커스가 모달1로 인식한다 code) 12345$("#modal_2").on('hidden.bs.modal'..