본문 바로가기

분류 전체보기93

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.
[ TIL ] react-hook-form import {useForm} from "react-hook-form" register 함수를 사용하면 onChange 를 핸들러 할 필요가 없다. import {useForm} from "react-hook-form" const {register} = useForm(); onBlur 다른 곳 클릭하는 것 .......... register 는 객체 여기에 name, onBlur, onChange, ref 등 ...이 있다. const {register, watch} = useForm(); watch가 나의 form 에 대한 모든 내용을 감시한다. watch() 해 보면 값이 변할 때 마다 값을 출력해주고있음 우리가 이렇게 적은 "toDo" value 를 key 로 갖고있다. function ToDoLi.. 2023. 4. 3.
Recoil 사용 연습하기 - 2 atom 의 value를 감지하기 위해서 useRecoilValue const isDark = useRecoilValue(isDarkAtom); useRecoilValue 가 atom 을 넣으면 atom 값을 반환한다. atom 의 value set하기 위해 useSetRecoilState(Atom) 이렇게 하면 setter function 받을 수있음 const setterFn = useSetRecoilState(isDarkAtom); atom 을 받아서 atom 을 변경하는 함수를 반환 setState 처럼 사용하면 된다. const toggleDarkAtom = () => setDarkAtom((prev) => !prev); atom 이 변경되면 컴포넌트도 변경된 값으로 다시 리렌더링 된다. 2023. 4. 3.
[ TIL ] React-router-dom v6 Nested Routes import {BrowserRouter, Routes, Route} from "react-router-dom"; import Coins from "./Coins"; import Coin from "./Coin"; function Router(){ return ( ); } export default Router; router 에서 중첩 route 를 만들고 싶은 곳에 * 붙여준다 그리고 중첩 route 만들고 싶은 component 에서 이렇게 해주면된다. https://velog.io/@cnsrn1874/React-Router-v6-Nested-Routes [React-Router v6] Nested Routes React-Router v6에서 nested routes를 구현하는 방법엔 두 가지가 있다... 2023. 3. 31.