개인 프로젝트 진행 중 `yarn dev`, 혹은 `buld && start` 로 작업할 때는 에러가 나지 않았지만 vercel 배포시 뭔 이상한 에러가 나왔고, `useSuspenseQuery` -> `useQuery`로 변경하니 해결이 되었다. (이유는 아직 모름) 원래 `useQuery`를 사용하다 로딩, 팬딩중일 때에 대한 예외처리 하는게 귀찮아서 `useSuspenseQuery`를 사용했는데 배포가 안돼서 아쉽지만 다시 `useQuery` 로 변경했다. 하지만 useQuery를 사용해도 예외처리를 하지 않아도 되는 방법이 있다. 🚨prefetchingQuery - 미리 데이터 불러오기
간단한 프로젝트 소개Riot API를 사용하여 롤 도감 사이트 제작챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 사용기술: `Next.js`, `React`, `TypeScript` . . .챔피언챔피언 목록 (+로테이션)전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)챔피언 상세챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)아이템 목록전체 아이템 목록을 볼 수 있다.특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다.💡 Prefetching사용자가 페이지로 이동했을 때 데이터를 불러오지 않고 특정 조건이나 로직등으로 미리 데이터를 불러올 수 있는 기법이다. 예를 들어 `` 태그가 뷰포트에..
간단한 프로젝트 소개Riot API를 사용하여 롤 도감 사이트 제작챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 사용기술: `Next.js`, `React`, `TypeScript` . . .챔피언챔피언 목록 (+로테이션)전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)챔피언 상세챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)아이템 목록전체 아이템 목록을 볼 수 있다.특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다. 🚨 변경 내용이번 리팩토링은 매우매우 간단한 문제여서 기분이 좋았다. 테일윈드를 사용해본적이 별로 없어서 생긴 아주 조그마한 이슈였다. 테일윈드에서 기본적으로 제공해주지 ..
🚨 문제 발생`유저id`를 가지고 조건처리, 데이터 조회, 수정 등의 작업을 하는데 버그가 자꾸 발생했다. 콘솔을 찍어보니 `유저id`만 가져오는 요청을 했는데 간헐적으로 `유저 정보 객체`가 들어올 때가 있었다. {id:{UUID}, email:"test@test.com" . . . 어쩌구 . . } . . . 분명 id만 추출해서 반환하도록 작성했는데 어쩔때는 객체가 들어오는게 너무 이상했다. 원인유저 데이터를 불러오는 함수가 2개가 있었다. 유저 데이터를 객체로 받아오는 함수, id만 받아오는 함수가 있었는데 둘이 같은 `queryKey`를 공유해서 생긴 이슈였다. (둘 다 `loginUser`사용) 즉, 객체를 반환하는 함수가 먼저 실행되고 이후 id를 반환하는 함수가 실행될 때 `query..
🚨 오류Next에서 React-Query를 사용하는데 뭐 이상한 에러가 나왔다. 에러 내용은 Provider가 잘 설정되지 않았다는 에러였다. 근데 발생한 상황이 너무 이상한게 `RootLayout`에 Provider 세팅을 해놓았고, 같은 위계에 있는 특정 컴포넌트에서만 해당 에러가 발생했다. 💡 해결캐시파일(`.next`)을 제거하니 정상 동작했다. 일단 원인 불명의 이상한거 뜨면 일단 지워보고 다시 시도해보는게 좋을 것 같다.
간단한 프로젝트 소개Riot API를 사용하여 롤 도감 사이트 제작챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 챔피언챔피언 목록 (+로테이션)전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)챔피언 상세챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)아이템 목록전체 아이템 목록을 볼 수 있다.특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다. 🚨 문제 내용아이템 페이지에서 상위/하위 아이템은 필터(공격력, 주문력, 방어력 등)에 영향을 받지 않고 모두 출력되어야 한다. 하지만 사용자가 필터를 적용하면 `전체 아이템 목록` 뿐만 아니라 상위/하위 아이템에도 필터가 적용되는 문제가 생겼다. ..
🚨 에러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`에 서버..
💡 returnsSupabase에서 데이터를 받아올 때(select) 반환 타입을 지정해 줄 수 있다.select 함수 맨 뒤에 .returns를 붙이면 된다. 그럼 반환하는 `data` 의 타입이 해당 타입으로 지정된다. https://supabase.com/docs/reference/javascript/db-returns
🚨 이슈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..