개요Riot API 이용 프로젝트에 대한 해설 강의를 보면서 한 가지 사실을 알게 됐다,바로 fetch 함수는 HTTP error 상태를 반환하지 않는다는 사실이다. 이 사실을 알게 된 뒤, fetch 함수가 에러를 어떻게 처리하는지 검색을 통해 자세히 알아보았다.  fetch 함수의 에러 처리 방식`fetch` 함수는 네트워크 요청을 수행할 때 `Promise 객체`를 반환한다.하지만 fetch의 Promise는 네트워크 요청 자체가 실패했을 때만 reject된다. “네트워크 요청 자체가 실패한다”는 것은 다음과 같은 상황을 의미한다.• 사용자가 인터넷에 연결되어 있지 않을 때• 요청을 보낼 수 없는 도메인(잘못된 URL 등)일 때• CORS 정책 위반 등으로 인해 브라우저가 요청을 차단할 때 HTTP..

문제 상황💻 기존의 app > api > rotation > route.ts 코드import { URL } from '@/constants/url';import ChampionRotation from '@/types/ChampionRotation';export const dynamic = 'force-static';export async function GET() { const apiKey = process.env.NEXT_PUBLIC_RIOT_API_KEY; try { const response = await Promise.allSettled([fetch(URL.CHAMPIONS_ROTATION_DATA, { headers: { 'User-Agent': ..

문제 상황next-themes 라이브러리를 이용해서 다크 모드를 구현하고 있었다.어떻게 적용하면 되는지에 대한 내용은 문서에 잘 나와있어서 코드를 작성하는데 큰 어려움은 없었다.버튼을 누르면 다크 모드로 잘 변환되었다. 그런데..!Prop `strokeLinejoin` did not match. Server: "null" Client: "round" Error Component StackAn error occurred during hydration. The server HTML was replaced with client content in 기본 모드로 다시 돌아와서 새로고침을 누르면 콘솔에 다음과 같은 에러메시지가 떴다.기본 모드가 잘 유지되긴 했지만, 다크 모드로 변환하는 버튼이 다시 이전 상태로 돌..

문제 상황💻 checkBookmarkState 코드useEffect(() => { const checkBookmarkState = async () => { const isMarked = await checkJobBookMarks(userId, jobId); setIsBookmarked(isMarked); }; checkBookmarkState();}, [userId, jobId]); 💻 checkJobBookmarks 코드export const checkJobBookMarks = async (userId, jobId) => { try { const { data } = await supabase .from(QUERY_KEY.BOOKMARKS) .select('*..

문제 상황프로필 수정 기능을 구현하는 도중 문제가 발생하였다.마이페이지에서 사용자의 닉네임과 주소를 수정할 수 있다.수정하기 버튼을 누르면 supabase에 연결되어있는 users 테이블의 데이터는 잘 변경됐다.하지만..  새로고침을 하면 수정하기 이전의 닉네임과 주소가 적용됐다. 왜 이런 문제가 발생하는 것일까?  문제 원인import { useEffect } from 'react';import supabase from '../supabase/client';import useAuthStore from '../zustand/useAuthStore';const useAuthListener = () => { const { setUserData, setLogout } = useAuthStore((state)..

문제 상황width값을 다르게 받을 수 있는 공통 컴포넌트를 하나 만들었다.tailwind를 사용하고 있었기 때문에 `백틱`과 `${}`을 이용해서 width값을 설정해야했다.근데 width값이 원하는대로 설정되지 않는 문제가 발생하였다.const JobItem = ({ job, width }) => { return }개발자 도구를 열어 확인해보니 props로 전달받은 width값이 잘 적용이 되지 않고 있었다. 왜 이런 문제가 발생하는 것일까?  문제 원인검색과 튜터님께 질문을 하여 원인을 파악해본 결과,✅ 상위 컴포넌트에서 props 받아서 동적으로 클래스를 생성하는 데에 어려움이 있기 때문에, 해당 방식은 사용하지 않는게 좋다고 한다. 공식 문서에서도 그렇게 하지 말라고 나와있다. ❌ props를..