Category Archives: JavaScript

[react] useState의 setter 를 동기함수(sync ≒ async ~ await) 처럼 사용할 수 있게 해 주는 방법 (결론: 안됨)

By | 4월 29, 2022

나의 코드 샘플 const [dataList, setDataList] = useState<any[]>(); … const data = await getData(id); setDataList(preList => { const tmpList = [ …preList ]; tmpList[i] = data; return tmpList; }); 이것으로 된다고 착각했었으나, 진짜 동기식으로 처리 되는 것이 아니라, setter를 연속 호출 했을 떄, 이전 값이 보존되는 수준의 처리였던 것이다. 진짜 코드 흐름 내에서 동기식으로 처리하려면… Read More »

[AG Grid] client row model 에서 그리드의 row 순번(num, seq) 자동으로 생성하기

By | 4월 22, 2022

환경 ag-grid-react 26.0.0 칼럼 정의 … { field: 'seq', headerName: '순번', valueGetter: 'node.rowIndex + 1' }, … 그리드 property <AgGridReact rowData={rowData} columnDefs={columnDefs} … onSortChanged={(e) => { e.api.refreshCells() }} // client row model 에서 칼럼 헤더 클릭해서 정렬이 변경되었을 때, valueGetter: 'node.rowIndex + 1', 로 만든 순번을 다시 리프레시 해 준다. ></AgGridReact>

[react] Next.js 에서 antd(ant-design) 차트(chart/그래프) 사용할 때 css 관련 오류

By | 3월 25, 2022

최초 @ant-design/charts 를 package에 add 하려 했으나, 그랬을 경우에 next.js 와 충돌이 생겨서(next.js에서는 모듈별 css를 사용할 수 없습니다…류의 오류), 하위 항목인 @ant-design/plots 를 add 했더니 오류 없이 잘 되었다. 웬만한 차트들은 plots 만으로도 커버 가능한 것으로 보임 yarn add @ant-design/plots

[react/useRef] ref 를 배열로 관리하는 샘플

By | 3월 4, 2022

개요 가변적으로 row가 추가되는 동적 UI에서 각 컴포넌트의 데이터 초기화, focus 등을 수행하기 위해 ref 가 필요한 사례가 있었음. (ref 배열, array) 소스 const testRefs = useRef<any>([]); … <Input ref={ (el) => (testRefs.current[idx] = el) } … /> … const ref = testRefs.current[idx]; …

에러 메시지 피드백(alert, toast 유형)에 lodash debounce 적용 사례

By | 5월 10, 2022

개요 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 »

[React] SWR 조회시 무한루프에 걸렸던 사례 (useSWR, infinite loop)

By | 11월 4, 2021

모듈 상단에서 아래의 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 »

[javascript] querystring의 특정 pair의 값을 수정하여 또 다른 querystring 으로 만들기

By | 3월 17, 2021

// 함수 정의 /** * 파라미터로 받은 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 »

[링크] [JavaScript/자바스크립트] 숫자를 만, 억, 조, 경 등 만 단위 한글로 찍기 + 자바스크립트 연산의 한계값

By | 5월 27, 2020

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      

javascript의 백그라운드 실행(멀티스레드)을 가능하게 해 주는 web worker 샘플 코드

By | 5월 6, 2021

메인 페이지의 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 »

jQuery 로 textarea를 참조할 때 text() 함수의 함정에 대해…

By | 10월 14, 2019

최초 textarea 에 jQuery로 값을 셋팅할 때, $textarea.text(‘AAA’); 의 형태로 값이 잘 셋팅되었기 때문에, 값을 불러올 때도 $textarea.text(); 함수를 사용했는데, 아무리 해도 사용자가 편집한 값을 얻어오지 못하고, 초기에 셋팅한 값만 얻어오는 것이었다. 그래서 삽질을 좀 하다가…   <input /> 처림 .val() 함수를 사용하여 사용자가 편집한 최종 결과 문자열을 얻을 수 있었다.