최초 @ant-design/charts 를 package에 add 하려 했으나, 그랬을 경우에 next.js 와 충돌이 생겨서(next.js에서는 모듈별 css를 사용할 수 없습니다…류의 오류), 하위 항목인 @ant-design/plots 를 add 했더니 오류 없이 잘 되었다. 웬만한 차트들은 plots 만으로도 커버 가능한 것으로 보임 yarn add @ant-design/plots
간단 요약 프로젝트 루트경로 > .next 폴더를 지우고 재실행 참고 https://stackoverflow.com/questions/67652612/chunkloaderror-loading-chunk-node-modules-next-dist-client-dev-noop-js-failed
개요 가변적으로 row가 추가되는 동적 UI에서 각 컴포넌트의 데이터 초기화, focus 등을 수행하기 위해 ref 가 필요한 사례가 있었음. (ref 배열, array) 소스 const testRefs = useRef<any>([]); … <Input ref={ (el) => (testRefs.current[idx] = el) } … /> … const ref = testRefs.current[idx]; …
onChange={_.debounce((o: any) => handleChange(o, etc), 500)}
개요 react axios 공통화 작업(interceptor 등)을 하던 중, 에러 메시지 알림에 debounce 처리를 해야 하는 요건이 발생. 소스 axios-settings.ts (커스텀 파일) /** * axios 기본설정 */ const axiosOpts = { // timeout: 5000, // headers: { // "Content-Type": "application/json", // }, }; // export const ax = Axios.create(axiosOpts); // /** * axios response interceptor */… Read More »
모듈 상단에서 아래의 swr함수를 호출하는데, useMemo()가 불필요하다고 생각되어 제거했더니 무한루프가 걸렸었음. swr의 args로 들어가는 url string이 함수 내부에서 생성되어 계속 변경이 되니 무한루프가 발생했던 것이었음. 결국 useMemo()를 다시 사용하여 해결 function useSWR(type: string, query?: any) { const url = useMemo(() => { switch(type){ case '1': return '/board/01'; case '2': return '/board/02'; default: return null; }… Read More »
https://ddalpange.github.io/2018/01/11/js-es6-three-dots/
https://babycoder05.tistory.com/entry/%EC%A0%84%EA%B0%9C%EA%B5%AC%EB%AC%B8%EA%B3%BC-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC 참고 전개구문(스프레드 연산자 = spread operator)을 사용한 깊은 복사는 반쪽짜리 깊은 복사이다. 하위 depth는 여전히 얕은 복사 상태임을 주의하자. => lodash.cloneDeep()을 사용하면 완전한 깊은 복사 실현 가능.
// 함수 정의 /** * 파라미터로 받은 querystring의 특정 파라미터 값을 변경한 querystring을 리턴한다. * * – querystring은 주소부분을 제외한 ? 이후의 부분이라 가정한다. */ function modifyQueryString(src, modObj){ // querystring을 object 화 var obj = JSON.parse('{"' + decodeURI(src).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}'); for(key1 in obj){ for(key2 in modObj){ if(key1 != key2){ continue; } obj[key1] =… Read More »
https://this-programmer.com/entry/JavaScript%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%88%AB%EC%9E%90%EB%A5%BC-%EB%A7%8C-%EC%96%B5-%EC%A1%B0-%EA%B2%BD-%EB%93%B1-%EB%A7%8C-%EB%8B%A8%EC%9C%84-%ED%95%9C%EA%B8%80%EB%A1%9C-%EC%B0%8D%EA%B8%B0-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%B0%EC%82%B0%EC%9D%98-%ED%95%9C%EA%B3%84%EA%B0%92
http://blog.stevenlevithan.com/archives/date-time-format * 용례) ‘201910101458125’ => new Date().format(‘yyyymmddHHMMssl’);
메인 페이지의 js /** * Web Worker 인스턴스 생성 및 호출 */ if (!! window.Worker) { var worker = new Worker('../resources/js/workerSample.js'); // 현재 페이지의 브라우저 URL에 대한 '상대경로'로 작성해야만 한다. // console.log('## worker:['+ JSON.stringify(worker) +']'); // worker가 준 메시지에 대한 이벤트 핸들러 worker.onmessage = function(e) { onWorkerResponse(e.data); worker.terminate(); // 최초 1회만 실행 후 제거 }… Read More »
최초 textarea 에 jQuery로 값을 셋팅할 때, $textarea.text(‘AAA’); 의 형태로 값이 잘 셋팅되었기 때문에, 값을 불러올 때도 $textarea.text(); 함수를 사용했는데, 아무리 해도 사용자가 편집한 값을 얻어오지 못하고, 초기에 셋팅한 값만 얻어오는 것이었다. 그래서 삽질을 좀 하다가… <input /> 처림 .val() 함수를 사용하여 사용자가 편집한 최종 결과 문자열을 얻을 수 있었다.
디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점
모바일 사이트에서 사용해 보았는데, 잘 되는 것 같더니 특정 안드로이드 모바일 브라우저에서 작동하지 않는 현상이 있었다. 이럴거면 얘는 걍 쓰지 말자. 대신 호환성 좋은 indexOf() 를 사용하자!
– 출처: http://stackoverflow.com/questions/17200391/nodejs-unable-to-verify-leaf-signature – npm 콘솔을 열고 아래 명령을 실행한다. npm config set strict-ssl false 답변을 단 사람은 이게 정공법이 아니기 때문에 강력추천 하지는 않는다고 하지만… 나야 뭐 잘 되면 장땡이니~ ^ㅁ^
– 출처: http://stackoverflow.com/questions/2614862/how-can-i-beautify-json-programmatically – JSON.stringify(jsObj, null, “\t”); // stringify with tabs inserted at each level JSON.stringify(jsObj, null, 4); // stringify with 4 spaces at each level JSON.stringify(jsObj, null, 4); => 요거 쓰니 괜찮더라 ^ㅁ^
아직 완전히 검증한 것은 아니고 그냥 코드만 퍼 옴. – 출처: http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen – function PopupCenter(url, title, w, h) { // Fixes dual-screen position Most browsers Firefox var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left; var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top; var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ?… Read More »
* 하위 module을 갖고 있는 module에서 config와 run의 실행 시점 (1) 하위 의존성 module들의 config 콜백 실행 (2) 의존성 module들의 config 실행이 모두 완료된 후, 상위 module의 config 콜백 실행 (3) 하위 의존성 module의 run 콜백 실행 (4) 의존성 module들의 run 실행이 모두 완료된 후, 상위 module의 run콜백 실행 * constant와 value의 차이점 – 거의… Read More »
* 환경 node.js v0.12.4 1. node.js 커맨드창에서 아래의 명령 실행 npm install connect static-server 2. 웹서버 런칭 js파일 작성 (server.js) var connect = require(‘connect’); var serveStatic = require(‘serve-static’); var port = 5000; connect().use( serveStatic(‘C:/nodejsweb’) //document root로 사용할 물리 경로 ).listen(port); console.log(“Static file server running at\n => http://localhost:” + port + “/\nCTRL + C… Read More »
