본문 바로가기

전체 글86

[ error ] npx create-react-app 에러 Unexpected token '.' when run create-react-app 아 이걸 한번 겪은 적이 있었는데 안 적어놓으니까 방법을 까먹어서 또 헤맸다 ..ㅡㅡ 내 시간.. 이제 절때 안 잊어먹으려고 글을 쓴다. 만약 노드 버전이 16.14.2 같은 16버전이라면 저런 에러가 난다 . nvm 으로 노드 버전을 바꿔주자 nvm list : 사용가능한 노드 리스트를 보여준다. nvm use 14.17.0 사용가능 한 노드 버전 중 한 버전을 nvm use 뒤에 적어준다. 그럼 노드 버전이 바뀌고 npx create-react-app --template typescript가 잘 실행된다! https://stackoverflow.com/questions/71259175/unexpected-token-when-run-create-react-app Unexpected token '.' w.. 2023. 4. 25.
[ TIL ] 기본 브라우저 변경하기 / react 실행 브라우저 변경 react 가 실행되는 브라우저를 edge에서 크롬으로 바꾸고싶었는데 그냥 기본 브라우저를 변경하면 되는거였다.. 제어판 -> 모든 제어판 항목 -> 기본 프로그램 -> 기본 프로그램 설정 -> 웹 브라우저 를 엣지에서 크롬으로 변경해주면 된다. 참조 https://www.inflearn.com/questions/9105/%ED%98%B9%EC%8B%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B9%8C%EB%93%9C%EB%90%98%EB%8A%94-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%EB%B0%94%EA%BE%B8%EA%B3%A0%EC%8B%B6%EC%9D%80%EB%8D%B0-%EC%95%84%EC%8B%9C%EB%82%98%EC%9.. 2023. 4. 25.
[ git ] git remote update : 새로운 원격 브랜치를 가져오고 싶을 때 git pull 만 해 왔을때는 master 브랜치의 update 만 받아와지고 새로 생성한 브랜치 정보는 받아오지 않았다. git remote update 해 주면 새로 생성된 브랜치 정보들도 git graph 에서 확인할 수 있다. git branch -r 원격 저장소 브랜치 확인 git branch -a 로컬, 원격 모든 저장소 브랜치 확인 원격 저장소 branch 가져오기 git checkout -t origin "가져오고싶은 브랜치 명" git checkout "브랜치명" 해 주면 소스를 보고 변경 할 수 있지만 변경사항은 commit, push 할 수 없고 다른 branch 로 checkout 하면 사라진다. git checkout -b "새로운 브랜치명" 은 git branch "새로운 브랜.. 2023. 4. 25.
[ TIL ] 함수 표현식 / 함수 선언식 함수 선언식 Function Declarations function 함수명() { 함수기능 }; 함수 선언식은 곧 함수 선언 함수 표현식 Function Expressions var 함수명 = function () { 함수 기능 }; 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. 함수 표현식과 함수 선언식의 차이 1. 함수 표현식은 호이스팅의 영향을 받지 않는다. 브라우저가 js를 해석할 때 맨 위로 끌어올려지지 않는다. 함수 표현식의 장점 - 클로저로 사용된다. - 콜백으로 사용된다. https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/ 함수 표현식.. 2023. 4. 25.
[ 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.

티스토리툴바