Tag: Troubleshooting
AWS CloudFront 캐싱 문제 해결하기
개요 사내에서 퍼블리셔분이 작업해야 할 정적 사이트의 배포 환경을 구축하면서 발생한 캐싱 이슈를 해결한 경험을 공유합니다. 프로젝트는 Vite를 기반으로 구축했으며, 배포 환경은 AWS S3 + CloudFront를 사용했습니다. 정적 리소스(HTML, CSS, JavaScript)를 다루면서 CDN…
Gatsby SSR에서 Script API 적용 이슈와 해결
개요 Gatsby에서 Google AdSense 코드를 삽입하려 했으나 SSR 과정에서 Gatsby Script API가 예상대로 작동하지 않는 문제가 발생했습니다. 이 글에서는 문제의 원인과 해결 과정, 그리고 Gatsby Script…
Framer Motion 페이지 전환 구현 중 발생한 이슈와 해결
개요 최근 블로그에 Framer Motion을 사용해 페이지 전환 효과를 추가하는 작업을 진행했습니다. 처음에는 간단하게 Layout 컴포넌트에 AnimatePresence…
CSR에서 동적 OG 적용하기
개요 최근 회사에서 가볍고 빠른 성능의 사이트를 개발해야 하는 요구가 생겨 Vite와 Svelte를 사용한 SPA를 만들게 되었습니다. 이 사이트는 동적 라우팅을 통해 경로에 따라 백오피스에서 설정한 커스 텀 페이지를 보여주어야 했습니다. 문제는 동적 경로에 따라 OG 메타태그를 적용해야 한다는 사실이었습니다. 그동안 "CSR = SEO…
SPA 404 이슈 해결
개요 이 글은 실무에서 정적 사이트 배포 환경을 구성하면서 겪은 SPA 관련 404 오류 이슈에 대한 해결 과정을 다룹니다. SPA란? SPA(Single-page application)란 단일 HTML 문서로 이루어진 웹사이트를 의미합니다. 기존의 여러 HTML 파일을 사용하던 방식과 달리, SPA는 하나의 HTML…
마크다운 플러그인에 GFM 적용하기
이 블로그에서는 gatsby-plugin-mdx 플러그인을 사용해 마크다운을 파싱 및 렌더링하고 있습니다. 이 플러그인에 remarkGfm을 적용하며 발생한 이슈입니다. GFM이란? GitHub Flavored Markdown의 줄임말로, 기본적인 마크다운 문법의 확장입니다. Github…