choijming21 님의 블로그

[ Troubleshooting🛠️ ] Tanstack Query의 데이터 로딩

1.  문제 발생❓필터 버튼을 처음 누를 때마다 "로딩 중..." 메세지가 잠시 표시됨이는 새로운 데이터를 가져오는 동안 isLoading 상태가 true가 되기 때문사용자 경험을 저하시키고 화면이 깜빡이는 느낌을 줌// useChart.tsexport const useChart = (chartType: ChartType) => { return useQuery({ queryKey: ["melonChart", chartType], queryFn: () => fetchChart(chartType), staleTime: 1000 * 60 * 5, // 추가 옵션 없음 });};    2.  해결 과정 📋Tanstack Query가 제공해 주는 placeholderData 옵션 사용하..

[ Troubleshooting🛠️ ] CORS 문제 해결

Next.js 프로젝트에서 melon API를 연결할 때 발생할 수 있는 CORS 이슈와 해결 방법을 단계별로 설명해보려고 합니다. 그러면 먼저 CORS가 무엇인지 부터 알아야 할텐데요! 🌍 CORS란? CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유를 의미하며, 서로 다른 출처의 웹 페이지나 서버가 자원에 접근할 수 있도록 허용하는 보안 메커니즘입니다.    1.  문제 발생❓ 웹 브라우저에서 Next.js 클라이언트 코드가 로컬 API 서버(http://localhost:5000)에 직접 요청하면 아래와 같은 CORS 오류가 발생할 수 있습니다.Access to XMLHttpRequest at 'http://localhost:5000/api/v1/chart/..