gatsby는 초기 설정이 다소 복잡할 수 있지만, 강력한 기능과 플러그인 생태계를 제공합니다. React 기반이기 때문에, React에 익숙한 개발자에게는 더 친숙할 수 있습니다.

@11ty/eleventy는 설정이 거의 필요 없는 정적 사이트 생성기로, 빠르게 시작할 수 있습니다. 기본적인 파일 구조만 있으면 바로 사용 가능하며, 다양한 템플릿 언어를 지원하여 유연하게 작업할 수 있습니다.

gatsby는 주로 React 컴포넌트를 사용하여 템플릿을 작성합니다. JSX를 사용하여 동적인 콘텐츠를 쉽게 만들 수 있지만, 전통적인 템플릿 언어에 비해 학습 곡선이 있을 수 있습니다.

@11ty/eleventy는 다양한 템플릿 언어를 지원합니다. 기본적으로 HTML, Markdown, Nunjucks, Liquid 등 여러 언어를 사용할 수 있어, 개발자가 선호하는 방식으로 콘텐츠를 작성할 수 있습니다.

gatsby는 매우 강력한 플러그인 생태계를 가지고 있어, SEO, 이미지 최적화, 데이터 소스 통합 등 다양한 기능을 쉽게 추가할 수 있습니다. 커뮤니티에서 개발한 플러그인이 많아, 필요한 기능을 빠르게 찾을 수 있습니다.

@11ty/eleventy는 플러그인 시스템을 지원하지만, gatsby에 비해 상대적으로 간단합니다. 필요에 따라 커스터마이징이 가능하지만, 대규모 플러그인 생태계는 아닙니다.

gatsby는 GraphQL을 사용하여 데이터 소스를 통합합니다. 파일 시스템, CMS, API 등 다양한 소스에서 데이터를 가져와 쿼리할 수 있어, 데이터 처리와 최적화가 매우 효율적입니다.

@11ty/eleventy는 파일 시스템, API, CMS 등 다양한 데이터 소스를 지원합니다. 데이터 소스를 JSON, YAML, Markdown 파일 등으로 쉽게 통합할 수 있어, 유연한 데이터 처리와 렌더링이 가능합니다.

gatsby는 정적 사이트 생성을 위해 최적화된 구조를 가지고 있으며, 코드 스플리팅, 이미지 최적화, 프리페칭 등 다양한 성능 최적화 기능을 자동으로 제공합니다. 대규모 사이트에서도 높은 성능을 유지할 수 있습니다.

@11ty/eleventy는 기본적으로 성능이 우수하지만, 대규모 사이트의 경우 수동으로 최적화 작업이 필요할 수 있습니다. 이미지 최적화, 캐싱 등은 별도로 구현해야 합니다.

gatsby의 간단한 예제

# 설치
npm install -g gatsby-cli

# 새로운 Gatsby 프로젝트 생성
gatsby new my-gatsby-site
cd my-gatsby-site

# 개발 서버 시작
gatsby develop

# 결과 확인
open http://localhost:8000

@11ty/eleventy의 간단한 예제

# 설치
npm install -g @11ty/eleventy

# 프로젝트 생성
mkdir my-site
cd my-site

# 기본 파일 생성
echo '# Hello, Eleventy!' > index.md

# 사이트 빌드
npx eleventy

# 결과 확인
open _site/index.html