개인 프로젝트 진행 중 `yarn dev`, 혹은 `buld && start` 로 작업할 때는 에러가 나지 않았지만 vercel 배포시 뭔 이상한 에러가 나왔고, `useSuspenseQuery` -> `useQuery`로 변경하니 해결이 되었다. (이유는 아직 모름) 원래 `useQuery`를 사용하다 로딩, 팬딩중일 때에 대한 예외처리 하는게 귀찮아서 `useSuspenseQuery`를 사용했는데 배포가 안돼서 아쉽지만 다시 `useQuery` 로 변경했다. 하지만 useQuery를 사용해도 예외처리를 하지 않아도 되는 방법이 있다. 🚨prefetchingQuery - 미리 데이터 불러오기
🚨 문제 발생`유저id`를 가지고 조건처리, 데이터 조회, 수정 등의 작업을 하는데 버그가 자꾸 발생했다. 콘솔을 찍어보니 `유저id`만 가져오는 요청을 했는데 간헐적으로 `유저 정보 객체`가 들어올 때가 있었다. {id:{UUID}, email:"test@test.com" . . . 어쩌구 . . } . . . 분명 id만 추출해서 반환하도록 작성했는데 어쩔때는 객체가 들어오는게 너무 이상했다. 원인유저 데이터를 불러오는 함수가 2개가 있었다. 유저 데이터를 객체로 받아오는 함수, id만 받아오는 함수가 있었는데 둘이 같은 `queryKey`를 공유해서 생긴 이슈였다. (둘 다 `loginUser`사용) 즉, 객체를 반환하는 함수가 먼저 실행되고 이후 id를 반환하는 함수가 실행될 때 `query..
🚨 오류Next에서 React-Query를 사용하는데 뭐 이상한 에러가 나왔다. 에러 내용은 Provider가 잘 설정되지 않았다는 에러였다. 근데 발생한 상황이 너무 이상한게 `RootLayout`에 Provider 세팅을 해놓았고, 같은 위계에 있는 특정 컴포넌트에서만 해당 에러가 발생했다. 💡 해결캐시파일(`.next`)을 제거하니 정상 동작했다. 일단 원인 불명의 이상한거 뜨면 일단 지워보고 다시 시도해보는게 좋을 것 같다.
🚨 에러You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/ │ react-essentials#server-components 💡 원인supabase를 Next.js에서 사용할 때 2개의 supabase client를 설정해놓는다. 하나는 클라이언트 환경(브라우저)에서 사용, 또 다른 하나는 서버 환경에서 사용한다. 근데 서버용 supabase client를 클라이언트 환경에서 사용하려하니 난 에러이다. 📍 해..
🚨 에러 Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead. 서버 함수는 초기 렌더링 중에 호출될 수 없습니다. 이는 fetch 폭포 현상을 일으킬 수 있습니다. 대신 서버 컴포넌트를 사용하여 클라이언트 컴포넌트에 데이터를 전달하는 것이 좋습니다. - GPT데이터는 렌더링되는데 에러가 뜬다. 발생 원인클라이언트 컴포넌트에서 `useSuspenseQuery`로 `Server Action(서버 함수)` 함수를 불러오면 생긴다.`queryFn`에 서버..
🚨 이슈supabase와 연결하고 데이터를 불러오는데 status는 `200` 으로 정상적으로 옴. 하지만 분명 테이블에 데이터가 있음에도 불구하고 data에는 빈 배열만 달랑 들어옴 💡 해결supabase의 `RLS 정책`이 설정되어있기 때문이다. 인가된 유저가 요청하는 경우에 한해서만 데이터가 정상적으로 불러와지게 된다. 따라서 일단 임시로 `RLS정책을 비활성화(Disable)`함으로 해결 했다. 🚨 주의일단 프로젝트 시작 단계에서 auth기능이 완성되지 않은 상태로 기능 개발을 하려고 어쩔 수없이 정책을 비활성화 했지만 실제 서비스 배포 전 auth 기능이 완료된 후에는 다시 활성화하는게 좋다. RLS(Row Level Security)란?매우 간단하게 인증/인가가 되지 않은 사용자는 데..
yarn berry를 처음 사용하는데 다른 팀원들과 똑같이 설정했는데 계속 똑같은 오류가 떴다. 🚨 에러 내용 Cannot find module 어쩌구 에러 "Usage Error": This tool can only be used with projects using Yarn Plug'n'Play 어쩌구 에러 💡 해결프로젝트 경로에 한글로된 폴더가 있었기 때문이었고, 영어로 변경하고 바로 해결됨 📍 정리뭔가 나만 안된다고 하면 다른 팀원과 다른 부분을 찾아보려고 해보자.(프로젝트 내의 환경에서만 찾지 않고, PC 전체적으로 확인해볼것.) 사용 환경 등에 따라 에러의 이유가 다양할 수 있으니 다음 내용들도 확인해보면 좋을 것 같다. 1. `node` 버전 확인2. `yarn berry`로 업..
🚨 불편이번 글은 에러..까지는 아니고 useState에 초기화 할 때 타입을 지정해주는 두 가지 방식의 기법에 대해 정리하려고 한다. 굳이 에러 카테고리에 작성한 이유는 초기값을 어떻게 주는지 고민을 많이 했던 문제라 그냥 여기에 작성함. 💡 첫 번째 방법초기값(`initialState`)을 정의하고, 해당 타입을 제네릭으로 넣어준다. 코드 예시type Counter = { numberHistory: number[], currentNumber: number,}const initialCounter: Counter = { numberHistory: [], currentNumber: 0,};const CounterComponent = () => { const [counter, setCounter..
🚨 문제큰 문제는 아니고 useQuery를 사용했을 때 `isPending` 상태일 때 로딩 컴포넌트를 리턴하는데 `data`가 undefined일 수 있다는 에러가 발생했다. 1차로 시도했던 방법은 삼항연산자를 사용해서 falsy한 값일 경우 명시적으로 `null` 값을 할당하는 방법으로 변경했다. /** 실제 코드는 아닌 예시 코드 */// 에러 났던 코드const { data, isPending } = useGetDataQuery(); // 커스텀 useQueryif(isPending) return Loading . . .console.log(data) // 여기서 undefined일 수도 있다는 에러 발생함타입스크립트는 `isPending`일 경우 return을 해주는 것과 관계없이 `useQ..
리액트를 배우면서 반복문으로 출력된 dom 요소의 경우 `key`를 명시해주어야 하는 것을 알고 있었다. 하지만 지금까지 `key` 를 쓰지 않거나, 대충 사용했을 경우에 대한 문제를 직면해본적이 없어서 그냥 저냥 콘솔에 `key`가 잘못 되었다는 에러를 숨기기 위한 목적 정도로만 사용을 해왔었다. 🚨 토스트 라이브러리 구현하지만 토스트 라이브러리를 직접 만들어보고, 커스텀하는 작업을 진행중에 `key` 를 쓰지 않아 버그가 발생했다. 토스트 라이브러리를 사용해본 사람은 알겠지만 순차적으로 쌓였다가 하나씩 사라지게 된다. 토스트 요소의 시간이나, 메시지, 색상 등이 전부 동일하다면 `key`를 `index`를 주어 사용해도 문제가 생기지 않는다(정확히는 문제가 생겨도 보이지 않는다). 하지만 이번에..
axios 로직을 유지보수, 확장성 등의 이유로 인스턴스를 생성해서 만들 수 있다. 이 때 create를 이용해서 만드는데 (만드는 방식은 생략) 엔드포인트까지 넣어서 만든 경우 `get` 요청은 매개변수의 생략이 가능하다. 단 `body` 등 옵션이 필요한 그 외의 메서드들은 매개변수를 생략할 수 없는데 이때 첫 번째 매개변수로 `'/'`를 넣어주면 된다. 💡 예시getconst api = axios.create({ baseURL: "http://localhost:4000/posts",})const getPosts= async () => { await api.get(); /* 생략 */}`get` 메서드로 모든 게시글을 가져오는 경우 `api.get()`만 호출하면 된다. post 잘못된..
🚨 에러 내용statusCode: '400'error: 'InvalidKey'message: 'Invalid Key: 어쩌구저쩌구파일명.jpg' 에러에 대한 코드는 다음 링크에서 확인 가능하다. [Supabase] - 스토리지 에러 코드storage에 사진 파일을 저장하려고 하니 위와 같은 에러가 나온다. 요청의 형식이 올바르지 않다는데 내 경우에는 파일명이 한글로 되어있어 나오는 오류였다. 즉, 파일명만 영어나 숫자 등으로 유니크하게 변경해서 전달하면 해결 된다. 일단 임시 방편으로 다음과 같이 처리해서 올리면 될 것 같다.const fileName = `post_img_${Date.now()}.png`;파일명을 현재 시간으로 치환하여 업로드해주니 해결되었다. 단 동시다발적으로 매우 많은 데이터를 ..