프론트엔드
Gatsby를 어떻게 적용할 수 있을까? (+ gatsby에 typescript 적용하기)
두줄요약
Gatsby의 JAMstack 기반 사전 렌더링 구조와 React·SEO 측면의 선택 이유를 소개했습니다. Jekyll 기술 블로그 마이그레이션 계획과 Gatsby에 TypeScript를 설정하는 과정을 정리했습니다.
구조와 흐름
- React 기반 Gatsby의 JAMstack 정적 사이트 생성 방식
- 빌드 시 마크업과 데이터를 미리 생성하고 CDN에서 제공하는 흐름
- 일반 React SPA의 렌더링·API 통신 방식과 대비되는 사전 렌더링
선택 이유
- React와 TypeScript 중심 프론트엔드 기술 스택과의 높은 친화성
- 빌드 단계 마크업 생성에 따른 초기 렌더링 성능 및 SEO 이점
- 플러그인 기반 기능 확장성
문제 상황
- GitHub Pages와 Jekyll 기반 기술 블로그의 지속 관리·커스터마이징 부담
- Ruby, Bundler, Gemfile 지식 필요로 인한 React 중심 팀의 유지보수 어려움
해결 방법
- Gatsby CLI로 프로젝트 생성 후
gatsby-plugin-typescript추가 tsconfig.json에서 컴파일 옵션과 경로 별칭 설정gatsby-node.js의 webpack alias 설정으로 TypeScript 경로 별칭 정합성 확보
