머리가 나뻐서 삽질 SAP(Study And Programming)

Create react app 에서 빌드할때 빌드된 결과물이 참조할 경로를 homepage 속성으로 설정할 수 있다. 공식홈에서 지원하는 속성이며 자세한 내용은 다음의 링크를 참조 https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/deployment.md#building-for-relative-paths 더보기 상대 경로 구축 기본적으로 React 앱 생성은 앱이 서버 루트에서 호스팅되는 것으로 가정하여 빌드를 생성합니다. 이를 무시하려면를 지정 homepage하여에 package.json, 예를 들면 : "homepage" : "http://mywebsite.com/relativepath" , 이렇게하면 Create Rea..

React Hook useReducer

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