본문 바로가기

전체 글59

[React-Query]error: Missing queryFn error when using useQuery 리액트 쿼리 기능에서 useQuery를 사용할 때 두 번째 인자에 함수를 넣어줘야 하는데 이때 즉시 실행하는 함수 형태로 넣어주지 않으면 에러가 발생한다. stack overflow에서 같은 원인으로 발생한 문제를 올려둔 글이 있어 해당 답변을 통해 에러를 해결했다. https://stackoverflow.com/questions/70319827/missing-queryfn-error-when-using-usequery Missing queryFn error when using useQuery As the title suggests, I am new to using useQuery and the associated libraries, I am trying to use it to fetch data and.. 2022. 4. 25.
[React]error: Warning: Each child in a list should have a unique "key" props 새로운 요소와 를 생성하는 map함수를 돌려서 사용하는데 계속 에러가 발생했다. 이유를 계속 알 수가 없었다. ㅠ 분명 고유한 id값을 적용해줬는데 왜 그럴까,,,, 생각하면서 다른 거 먼저 진행하다가 이유를 알아냈는데,,,ㅋ ㅋㅋ 😥 리액트에서 의미없이 태그를 사용해서 하위 태그들을 묶는 것보다 fragment를 사용하는 경우가 많은데 이것 때문이었다. const test_code = data.map((item) => { return ( {item.name} 수정하기 전체수정 ) }) 문제의 코드,,,ㅠ 발견하고 나니까 어이없었던 실수 😥 이거 왜 안되는지 발견하기 전까지 동료분이랑 이게 왜 이럴까,,, 하다가 발견하고 너무 어이없었던 기억이 ,,,ㅎㅎㅎ 혹시 비슷한 실수를 하고 계신 분께 도움이 되길.. 2022. 4. 25.
[React Query] 리액트 쿼리 적용(1) 출처: Codevolution - React Query Tutorial ch. 1~ 10 https://www.youtube.com/watch?v=VtWkSCZX0Ec&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2 회사에서 진행 중인 미니 프로젝트 코드를 작성하다가 전부터 궁금했던 리액트 state관리에 대해서 질문을 드렸다. Api요청에 대한 응답을 state에 넣어서 관리를 하면, Data fetch가 완료되지 않았을 때는 항상 빈 state인데 이럴 때마다 항상 useEffect나 조건문을 넣어서 해결하는 방법밖에 없는지 궁금했다. 이전에 혼자서 프로젝트를 만들어 볼 때는 보통 앞서 언급했던 방법으로 해결했었는데 매번 할 때마다 좀,, 뭔가 최선은 아닌 거 같아서 찝찝했는데.. 2022. 4. 25.
[AWS] Amplify배포시 환경변수 처리 리액트에서. env로 환경변수 값에 보안이 필요한 링크를 넣어두고 gitignore에 해당 파일을 추가하고 push를 하면 당연히 env값은 깃허브 저장소에 존재하지 않는다. 하지만 amplify배포를 할 때는 깃헙 저장소에 업로드된 내용을 바탕으로 배포를 진행하기 때문에 gitignore에 있는 env값을 인지하지 못한다. 이럴 때는 amplify 환경설정에서 따로 환경변수를 설정해줘야 한다. 검색을 해봤을 때 env를 개발환경과 배포환경을 따로 분기 처리해줘야 한다고 해서 그 방법대로 따라 했는데 계속 결과는 똑같았다... ㅠㅠㅠㅠ 정답은 정말 간단한데 엉뚱한 방법으로 삽질을 많이 하다가 시간을 많이 날려서 지나간 시간이 아까웠다,,,,,😥 제발 제발 나 같은 사람이 없길 바라면서 글을 남겨본다.🙇‍.. 2022. 2. 3.
[CSS] 모달창을 화면의 가운데에 위치시키기(+ 뒷배경 어둡게) 모달창의 상위 컴포넌트에서 스타일 설정 해줘야함 .app { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background:grey; } 2022. 1. 21.
[React] 소셜로그인 구현하기(with. Firebase) ✨ 버전 정보: "firebase": "^9.6.3" 0. 설치 npm install firebase 1. src 폴더에 config 폴더 생성 - auth.js - firebase-config.js 2. firebase 프로젝트 콘솔 설정에서 SDK 값 복사 -> firebase-config.js에 붙여 넣기 3. 필요한 항목 import 하기 //제공업체의 OAuth를 사용하기 위해 getAuth를 사용 import { getAuth } from "firebase/auth"; //파이어베이스를 한번 초기화 해주기위해서 사용함. import { initializeApp } from "firebase/app"; //구글 분석허용 import { getAnalytics } from "firebase/ana.. 2022. 1. 18.