choijming21 님의 블로그

1.  문제 발생❓ Next.js와 styled-components를 함께 사용할 때, 페이지 새로고침 시 스타일이 적용되지 않는 문제가 발생했습니다. 이로 인해 사용자가 페이지를 새로고침할 때마다 스타일이 없는 콘텐츠가 잠시 표시되는 깜박임 현상(FOUC - Flash of Unstyled Content)이 발생했습니다.  2.  원인 추론 🔎 이 문제는, styled-components가 기본적으로 클라이언트 측에서 런타임에 스타일을 주입하는 방식으로 작동하기 때문에 발생했습니다. Next.js의 서버 사이드 렌더링(SSR) 환경에서는 이러한 동적 스타일 주입이 자동으로 이루어지지 않아 초기 HTML에 스타일이 포함되지 않았습니다.  3.  해결 과정 📋 문제 해결을 위해 두 가지 주요 설정을 적..

제가 혼자 공부하면서 발생했던 invalid url 오류에 대해서 해결했던 과정을 블로그에 작성해보겠습니다 :)  1.  문제 발생❓  Server ErrorTypeError: Invalid URL 오류 위치: src/services/melonApi.ts (6:25) @ axios    2.  원인 추론 🔎  getStaticProps 함수는 서버 측에서 실행되기 때문에, 상대 URL 경로 ( /api/melon/chart/${chartType} )를 사용하면 기준점이 없어 "Invalid URL" 오류가 발생합니다. 여기서 발생한 문제의 핵심은 CORS(Cross-Origin Resource Sharing) 이슈와 서버 사이드 렌더링의 특성이 결합된 것입니다:CORS 이슈 해결 방식: 이전 작업에서 ..