본문 바로가기

프론트엔드10

[react-query]Error: No QueryClient set, use QueryClientProvider to set one app.jsx 에서 queryClient 를 만들어주고 queryClientProvider 로 app에서 리턴하는 것 전체를 감싸주면 되는데 이렇게 해줘야되는걸 이렇게 오타내서 에러가 났다 ^_T import "./App.css"; import { InfinitePeople } from "./people/InfinitePeople"; import { InfiniteSpecies } from "./species/InfiniteSpecies"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; const .. 2023. 8. 26.
[ antd ] antd table 의 pagination 한 페이지 열 갯수 설정하기 이렇게 pagination = {{pageSize: 10}} 넣어주면 한 페이지에 pageSize만큼의 열이 들어간다. 참조 https://github.com/ant-design/ant-design/issues/7477 How can we define the number of rows per page on the table pagination? like 10, 25, 50 etc · Issue #7477 · ant-design/ant-desi What problem does this feature solve? If we can define the number of rows per page on the table pagination, So we can set a number of rows on the sa.. 2023. 6. 19.
axios.get으로 엑셀 파일 받으려 할 때 파일이 깨지던 문제 axios.get 을 해 줬을 떄 엑셀파일 다운이 되긴 했는데 파일이 손상돼서 열 수 없다는 메세지가 나왔다. 해결을 위해 필요한 것을 정리 해보려 한다. 1. 먼저 axios.get 요청의 헤더에 responseType : blob 을 해줘야한다. Blob 은 Binary Large Object 로 단순 텍스트가 아닌 이미지 , 사운드 , 동영상 등 대용량 바이너리 데이터를 담을 수 있다. getDownloadData: async () => await base.get(`${BASE_URL}/excel/download`, { responseType:'blob' }) , get 할 주소 뒤에 객체로 헤더를 지정해줄 수 있다. responseType은 설정 해 주지 않으면 기본으로 JSON 으로 설정 되어 .. 2023. 4. 14.
[React] Props 로 콜백 함수 전달하기 / 어떨때 Props로 콜백 함수를 전달해야 하는가? Props 로 콜백 함수 전달하기 개념 정리 Props 란 ? react에서 props는 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달 할 때 사용된다. (부모 -> 자식 ) CallBack Function 이란? 정의: 프로그래밍에서 콜백 또는 콜백함수는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. 이벤트는 페이지가 로드되거나 유저가 click, hover, change 등의 상호작용을 했을 때 등 그 밖의 여러가지 상황에서 발생한다. 이벤트에 반응하기 위해서 함수를 공급해야한다. 이벤트가 발생했을 때 불려 질 함수를 콜백함수라고 한다. React Data Flow data는 부모에서.. 2022. 10. 29.