Category Archives: React

vite react build시 에러 메시지와 함께 엔터를 한 번 눌러줘야 빌드가 되었던 현상

By | 7월 21, 2022
0 Comment

package.json … "scripts": { … "dev": "cross-env NODE_ENV=development API_ENV=dev vite", "build": "cross-env NODE_ENV=production API_ENV=dev tsc && vite build", "buildProd": "cross-env NODE_ENV=production API_ENV=prod vite tsc && vite build", … }, … 여기서 bulidProd 실행시에 [Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.] 라는 에러메시지와… Read More »

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

By | 4월 29, 2022
0 Comment

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

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

By | 3월 25, 2022
0 Comment

최초 @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
0 Comment

개요 가변적으로 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
0 Comment

개요 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
0 Comment

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