전체 글91 [ TIL ] query parameter 로 특수문자 보낼때 encodeURIComponent 사용하기 (퍼센트 인코딩) get 요청을 할 때 파일 이름을 파라미터로 보내서 엑셀 파일을 받아오는 기능이 있다. 파일 이름에 특수문자가 포함되어있을 때 파일 이름을 제대로 보내지 못해 엑셀 파일을 못 받아오고 있었다. encodeURIComponent("test?"); 퍼센트 인코딩은 그냥 인코딩 하고싶은 문자열을 표준내장 객체인 encodeURIComponent 을 사용해주면된다. encodeURIComponent 도 있고 encodeURI 도 있는데 둘의 차이는 encodeURIComponent 가 좀 더 많은 종류의 특수문자를 퍼센트 인코딩 한다는 것이다. encodeURIComponent 는 Not Escaped: A-Z a-z 0-9 - _ . ! ~ * ' ( ) 이걸 제외하고 인코딩 한다고 하고 encodeURI 는.. 2023. 4. 19. [ TIL ] github.io 배포 하얀 화면 깃헙 io로 배포하는데 아무리 기다려도 흰 화면만 나오고 로컬환경에서 잘 나오던 화면이 나오지 않았다. https://medium.com/@_diana_lee/react-react-router-%EC%A0%81%EC%9A%A9%ED%95%9C-react-%EC%95%B1%EC%9D%84-github-pages%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EB%8A%94-%EB%B2%95-5f6119c6a5d9 [React] react-router 적용한 React 앱을 github pages로 배포하는 법 이 글은 당신이 create-react-app과 react-router를 사용 중이라고 가정하고 있습니다 medium.com BrowserRouter 에 basename 을 추가해.. 2023. 4. 18. 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. [TIL] styled components styled component 로 props 도 넘겨줄 수 있다. const Box = styled.div` background-color: ${(props) => props.bgColor}; // props 도 넘겨줄 수 있다. width: 100px; height: 100px; `; const Circle = styled(Box)`{ border-radius: 50px; } styled(Box) 해 주면 Box 안의 모든 값을 상속받을 수 있다. const Input = styled.input.attrs({required: true, minLength:10})` background-color: tomato; `; tag 에 attribute 도 추가할 수 있다. import styled, {keyfr.. 2023. 3. 29. [TIL] git The requested URL returned error: 403 해결 git add , commit 을 하고 push 를 하려는데 permisstion denied error 가 났다. 1. 먼저 git remote -v 로 origin 이 내가 push 하려는 레포 주소가 맞는지 확인한다. 아니라면 git remote set-rul origin "레포주소" 로 remote 를 설정해준다. 2. 아래 글 처럼 제어판 - 사용자 계정 - windows 자격 증명 - 일반 자격증명에서 git 을 선택하고 거기에 내 id와 pw를 입력해준다. https://itsjh.tistory.com/47 [Git] git error: 403 깃허브에서 소스 파일을 커밋 후 push 하려고 하는데 아래와 같이 403 에러가 발생하는 상황이 있다. unable to acess 'https:/.. 2023. 3. 28. [TIL] html tag 의 id attribute 는 유일해야한다. form 을 제출하는 간단한 과제를 했는데 너무 기본을 모르고있어서 반성하는 마음으로 .. 개념을 정리 해 본다.. ^_T button 태그의 type 속성의 default 는 submit이다. button submit과 input submit 은 기능적으로 동일하지만 button 은 자식요소를 가질 수 있어 다양한 스타일링이 가능하다. id 는 전체 html 태그 중 유일한 값이어야한다. form 제출 사용 예제 First name: Last name: Submit form attribute 의 사용 정의 The form attribute specifies the form the button belongs to. The value of this attribute must be equal to the i.. 2023. 3. 24. 이전 1 2 3 4 5 6 7 8 ··· 11 다음
