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 이슈 해결 방식: 이전 작업에서 ..

안녕하세요! 오늘은 비전공자도 쉽게 알 수 있게 docker의 개념을 블로그에 정리해볼까 합니다! 저도 비전공자이기 때문에 docker의 개념이 많이 어렵더라고요. 이해할 수 있게 쉽게 개념을 풀어 적어보려고 합니다:)      🐋 도커(Docker)는 언제 사용하나?도커는 저 사람 컴퓨터에서는 되는데 내 컴퓨터에서는 안돼! 와 같은 상황을 해결해주기 때문입니다!  🐋 도커(Docker)란 무엇인가? Docker는 리눅스 컨테이너 기반의 오픈소스 가상화 시스템입니다.  가상화란 실제 있지 않는 것을 마치 있는 것처럼 보이게 해주는 기술입니다. 다른 블로그를 참고하였는데 가상화의 예시로 "현재 존재하지 않는 애인을 마치 있는 것처럼 화면 속에 띄어주는 것이 가상화이다." 이 말이 가장 적절할 것 같습니..