올리브영 기술 블로그, Gatsby로 환골탈태!

Jekyll에서 Gatsby로 기술 블로그를 전환하여 SEO 향상 및 개발 편의성을 확보함

React 기반의 Gatsby를 선택, 컴포넌트 기반 개발과 다양한 Gatsby Plugin 활용

Netlify를 통한 배포로 빌드 및 배포 과정을 시각화하고, 개발 생산성을 높임

Gatsby 선택의 기술적 배경

Gatsby는 React 기반의 정적 사이트 생성기(SSG)로, SEO 최적화에 유리하다. 구체적으로 gatsby-plugin-react-helmet과 같은 플러그인을 통해 메타 데이터를 쉽게 관리한다. 따라서 Jekyll 대비 개발 생산성을 높이고, React 개발 경험을 활용할 수 있다.

Gatsby 프로젝트 구조 분석

프로젝트는 components, modules, pages 폴더로 구성되어 관심사 분리를 강조한다. GraphQL을 활용하여 데이터 fetching 로직을 관리하고, useStaticQuery를 통해 공통 데이터를 효율적으로 처리한다. 반면, 초기에는 모든 컴포넌트를 한 곳에 모아 관리하는 과정에서 유지보수 어려움을 겪었다.

Netlify 배포 경험과 개선점

Netlify를 통해 배포 과정을 시각적으로 확인하고, 배포 자동화를 구축했다. Deploy Previews를 통해 빌드 및 배포 완료 시점을 파악하고, Deploy Log를 통해 문제 발생 시 원인을 빠르게 분석한다. 따라서 Jekyll + Github Pages 조합 대비 배포 효율성을 높였다.