웹 개발의 미래가 여기에 있습니다.
Gatsby는 개발자가 엄청나게 빠른 웹사이트와 앱을 구축하는 데 도움이 되는 React 기반의 무료 오픈 소스 프레임워크입니다.
동적으로 렌더링되는 사이트의 제어 및 확장성과 정적 사이트 생성 속도를 결합하여 완전히 새로운 가능성의 웹을 만듭니다.
Gatsby는 전문 개발자가 유지 관리가 가능하고 성능이 뛰어나며 콘텐츠가 풍부한 웹 사이트를 효율적으로 만들 수 있도록 도와줍니다.
어디서나 데이터를 로드하세요. Gatsby는 Markdown 파일, Contentful이나 WordPress와 같은 헤드리스 CMS, REST나 GraphQL API 등 모든 데이터 소스에서 데이터를 가져옵니다. 소스 플러그인을 사용하여 데이터를 로드한 다음 Gatsby의 균일한 GraphQL 인터페이스를 사용하여 개발하세요.
정적 웹사이트를 뛰어넘으세요. 제한 없이 정적 웹사이트의 모든 이점을 누리세요. Gatsby 사이트는 완전한 기능을 갖춘 React 앱이므로 블로그에서 전자상거래 사이트, 사용자 대시보드에 이르기까지 고품질의 동적 웹 앱을 만들 수 있습니다.
렌더링 옵션을 선택하세요. 페이지별로 SSG(정적 사이트 생성) 외에 DSG(지연 정적 생성) 및 SSR(서버측 렌더링)과 같은 대체 렌더링 옵션을 선택할 수 있습니다. 이러한 유형의 세부적인 제어를 통해 성능과 생산성을 모두 희생하지 않고도 최적화할 수 있습니다.
성능이 구워졌습니다. 기본적으로 성과 감사를 잘 수행하세요. Gatsby는 코드 분할, 이미지 최적화, 중요한 스타일 인라인, 지연 로딩, 리소스 미리 가져오기 등을 자동화하여 사이트 속도를 보장합니다. 수동 조정이 필요하지 않습니다.
모든 사이트에 최신 스택을 사용하세요. 데이터의 출처에 관계없이 Gatsby 사이트는 React 및 GraphQL을 사용하여 구축됩니다. 데이터가 동일한 백엔드에서 나오는지 여부에 관계없이 귀하와 귀하의 팀을 위한 통일된 워크플로를 구축하세요.
Pennies를 위한 규모의 호스트입니다. Gatsby 사이트에는 서버가 필요하지 않으므로 서버 렌더링 사이트 비용의 일부만으로 CDN에서 전체 사이트를 호스팅할 수 있습니다. 많은 Gatsby 사이트는 Netlify 및 기타 유사한 서비스에서 완전히 무료로 호스팅될 수 있습니다.
Gatsby의 중앙 집중식 데이터 레이어를 어디서나 사용하세요. Gatsby의 Valhalla Content Hub를 사용하면 Gatsby의 데이터 레이어를 모든 프로젝트에 가져올 수 있습니다. 콘텐츠 사이트, 전자상거래 플랫폼, 기본 및 웹 애플리케이션을 구축하기 위해 통합 GraphQL API를 통해 액세스할 수 있습니다.
다음 프로젝트에 Gatsby를 사용하는 방법을 알아보세요.
Gatsby 및 Netlify를 사용하여 웹사이트를 개발, 구축 및 배포하는 워크플로를 빠르게 시도해 보려면 아래 링크를 클릭하세요.
이 과정이 끝나면 다음을 얻게 됩니다.
Netlify에서 작동하는 사이트
해당 새 사이트에 연결된 새 저장소
새 저장소에 변경 사항을 푸시하면 Netlify가 자동으로 사이트를 재구축하고 재배포합니다!
다음 네 단계를 통해 5분 안에 로컬 개발 환경에서 새로운 Gatsby 사이트를 가동하고 실행할 수 있습니다.
새 프로젝트를 초기화합니다.
npm 초기화 개츠비
이름을 "My Gatsby 사이트"로 지정합니다.
develop
모드에서 사이트를 시작합니다.
다음으로, 새 사이트의 디렉터리로 이동하여 시작합니다.
CD 내 개츠비 사이트/ npm 실행 개발
소스 코드를 열고 편집을 시작하세요!
귀하의 사이트는 현재 http://localhost:8000
에서 실행 중입니다. 선택한 코드 편집기에서 my-gatsby-site
디렉터리를 열고 src/pages/index.js
편집하세요. 변경 사항을 저장하면 브라우저가 실시간으로 업데이트됩니다!
이제 완전한 기능을 갖춘 Gatsby 웹사이트가 완성되었습니다. Gatsby 사이트를 사용자 정의하는 방법에 대한 추가 정보는 플러그인 및 공식 튜토리얼을 참조하세요.
Gatsby에 대한 전체 문서는 웹사이트에 있습니다.
대부분의 개발자는 Gatsby로 사이트를 생성하기 위한 심층 튜토리얼부터 시작하는 것이 좋습니다. 이는 귀하의 능력 수준에 대한 가정 없이 시작하여 프로세스의 모든 단계를 안내합니다.
코드 샘플을 바로 살펴보려면 설명서를 참조하세요. 특히 사이드바에서 " 방법 가이드 ", " 참조 " 및 " 개념 가이드 " 섹션을 확인하세요.
문서 개선을 위한 제안을 환영합니다. 자세한 내용은 "기여 방법" 문서를 참조하세요.
Gatsby 학습 시작: 튜토리얼 따라하기 · 문서 읽기
최근에 우리가 무엇을 배송했는지 궁금하십니까? 주요 하이라이트, 성능 개선, 새로운 기능 및 주목할 만한 버그 수정에 대한 릴리스 노트를 확인하세요.
또한 각 Gatsby 버전에 대한 계획을 이해하려면 버전 지원에 대한 문서를 읽어보세요.
이미 Gatsby 사이트가 있나요? 이 편리한 가이드는 처음부터 시작하지 않고도 사이트에 Gatsby v5의 개선 사항을 추가하는 데 도움이 될 것입니다!
v4에서 v5로 마이그레이션
v3에서 v4로 마이그레이션
v2에서 v3로 마이그레이션
Gatsby는 따뜻하고 다양하며 안전한 커뮤니티를 구축하는 데 최선을 다하고 있습니다. 우리는 Gatsby 커뮤니티에 참여하는 모든 사람이 행동 강령 을 준수할 것을 기대합니다. 꼭 읽어주세요. 따라해 보세요. Gatsby 커뮤니티에서 우리는 서로를 구축하고 함께 놀라운 것을 창조하기 위해 열심히 노력합니다. ??
버그 수정, 문서 개선, 입소문 확산 등 어떤 도움을 주든 Gatsby 커뮤니티의 일원이 되어 주시길 바랍니다!
로컬 컴퓨터에서 리포지토리를 시작하고 실행하기 위한 기여 및 설정 단계에 대한 아이디어는 기여 가이드를 확인하세요.
이 저장소는 Lerna를 사용하여 관리되는 모노레포입니다. 이는 NPM에 별도의 패키지로 게시하더라도 이 코드베이스에서 관리되는 여러 패키지가 있음을 의미합니다.
MIT 라이선스에 따라 라이선스가 부여됩니다.
플러그인, 스타터, 비디오 및 블로그 게시물을 작성하는 많은 기여자 모두에게 감사드립니다. 그리고 문제 및 PR을 도와주거나 Discord 및 GitHub 토론에서 질문에 답변해 주는 커뮤니티 회원들에게 특별한 감사를 드립니다.
Gatsby를 위대하게 만드는 큰 부분은 커뮤니티의 여러분 한 사람 한 사람입니다. 귀하의 기여는 Gatsby 경험을 풍요롭게 하고 매일 더 나은 경험을 만들어줍니다.