Marcy Sutton과 함께하는 스매싱 팟캐스트 에피소드 20: 개츠비란?

오늘은 개츠비에 대해 이야기해보겠습니다. 그것은 무엇이며 웹 개발 스택에 어떻게 적합합니까? Drew McLellan이 전문가 Marcy Sutton과 대화하여 알아냅니다.

메모 표시

• 개츠비
• 트위터의 마시
• Marcy의 개인 웹사이트

주간 업데이트

• "Google의 도움으로 사이트를 빠르고 액세스 가능하며 안전하게 만드십시오."
  디온 알마어
• "개츠비 플러그인 개발 이해하기"
  알림 이시아카
• “Tauri와 Vue.js로 작은 데스크탑 앱 만들기”
  켈빈 오메레숀
• "전자상거래 배송 및 재고 경고로 인한 공황 제거"
  수잔 스카카
• “Vuejs와 Nuxtjs의 CSS 전환”
  티미 오모예니

성적 증명서

Drew McLellan: 그녀는 Gatsby 개발자 관계 팀의 수석 엔지니어입니다. 이전에 그녀는 오픈 소스 axe-core 접근성 테스트 라이브러리에서 일했으며 Adobe에서 접근성 엔지니어로도 일했습니다. 그녀는 장애가 있는 사람들을 위해 웹을 개선하는 데 열정적이며 종종 컨퍼런스에서 이에 대해 이야기합니다. 2016년 O'Reilly는 접근성 관련 작업으로 웹 플랫폼 상을 수여했습니다.

Drew: 그녀는 또한 현지 지역에서 접근성 시애틀과 NW Tech Women Meetups를 공동으로 이끌고 있습니다. 그래서 우리는 그녀가 숙련된 엔지니어이자 접근성 전문가라는 것을 알고 있습니다. 하지만 그녀가 그것을 통에 담아 Angel Falls를 보내고 싶어한다는 것을 알고 계셨습니까? 내 스매싱 친구 Marcy Sutton을 환영하십시오.

마시 서튼: 안녕하세요.

드류: 안녕하세요. 마시. 잘 지내고 있나요?

마시: 굉장 해요. 잘 지내고 있나요?

드류: 저는 아주 좋습니다. 감사합니다. 저는 오늘 여러분에게 개츠비에 대해 이야기하고 싶었습니다. 이전 에피소드에서 Mina Markham과 React를 배우는 것에 대한 대화에서 나왔기 때문입니다. 나는 내가 직접 경험하지 않은 것에 대해 의견을 제시하는 인터넷에서 전형적인 남자를 하는 것이 위험에 처해 있다는 것을 깨달았습니다. 그래서 우리는 Smashing에서 일을 하지 않습니다.

Drew: 그리고 나는 우리가 Gatsby를 제대로 다루고 있는지 확인하고 싶습니다. 그리고 그것을 속속들이 알고 있는 누군가와 이야기하는 것보다 더 나은 방법은 없습니다. 그래서 아마 개츠비라는 이름을 들어본 적이 있을 것입니다. 그러나 웹 사이트를 구축할 때 스택의 어디에 맞는지 모르겠습니다. 정확히는 개츠비입니다.

Marcy: Gatsby는 웹사이트 생성기이며 현재 React를 사용합니다. 그러나 그것은 당신을 위해 정적 웹 사이트를 생성하여 완전한 React 웹 애플리케이션으로 재수화할 것입니다. 따라서 사용자를 위해 빠르게 로드되는 HTML 파일을 컴파일하는 빠른 빌드로 두 세계의 장점을 모두 얻을 수 있습니다. 그런 다음 JavaScript를 통해 이 모든 개선 사항을 활용하여 대화형 동적 웹 앱을 만들 수 있습니다.

Marcy: 정말 흥미진진한 공간입니다. 그리고 저는 문서와 함께 학습 측면에서 일해 왔으며 이제 Devrel 팀에서 JavaScript의 접근성 문제를 알고 가능한 한 좋게 만드는 데 집중하고 있습니다. 내부에서 외부로 수정하려고 합니다.

Drew: 우리 중 많은 사람들이 정적 사이트 생성기의 개념에 익숙할 것입니다. 그리고 개츠비는 그 역할에 대체로 맞는 것 같습니다. 그러나 나에게 그것은 대부분의 SSG가 하는 것보다 훨씬 더 멀리 가는 것처럼 보입니다. 그리고 대부분의 사이트 생성기는 프론트엔드 코드에 구애받지 않습니다. Gatsby를 사용하면 Gatsby 코드가 사이트의 일부로 실행되는 것처럼 보입니다. 그것이 공정한 평가입니까? 그렇다면 Gatsby는 실제로 프론트 엔드에서 어떤 일을 하고 있습니까?

Marcy: 예, 그 중 가장 큰 부분은 클라이언트 측 라우팅입니다. 따라서 Gatsby는 현재 내부적으로 Reach 라우터를 사용하고 있습니다. 일종의 자체 구현을 수행합니다. 그러나 그것은 처음으로 정적 사이트를 로드할 때 HTML 파일이 있는 부분입니다. 따라서 사용자가 어떤 이유로 JavaScript를 끄더라도 귀하의 사이트는 여전히 거기에 있어야 하고 콘텐츠가 있어야 합니다.

Marcy: 하지만 JavaScript가 활성화된 경우 이 수화 단계가 발생하는 경우 Gatsby 사이트에서 링크를 사용할 때 해당 페이지에서 리소스를 미리 가져오므로 더 빠르게 로드됩니다. 따라서 Gatsby가 제공하는 이 JavaScript 레이어를 사용하면 이 모든 것이 가능합니다. 그리고 그 외에도 사이트에서 사용하는 것이 JavaScript 번들에 포함되는지 여부에 따라 달라집니다.

Marcy: 하지만 액세스 가능한 인터페이스와 같이 상호 작용을 많이 사용하는 경우에는 그곳이 적합합니다. 저에게는 항상 JavaScript를 사용할 수 있고 마크업이 좋은 위치에 있게 하는 것이 정말 좋습니다. HTML과 JavaScript, CSS를 모두 깔끔하게 연결하고 Gatsby를 빌드하는 데 변형의 여지가 있는지 여부는 선호도의 문제라는 것을 압니다.

Marcy: CSS 및 JS와 같은 것을 항상 사용할 필요는 없습니다. 그러나 실제로는 웹사이트를 작성하는 동안 사용할 수 있는 동적 JavaScript 계층의 힘을 얻는 것입니다. 이것은 별도의 파일에 추가되는 것과 다릅니다.

Drew: 정적 사이트 생성기가 일반적으로 어떻게 작동하는지 생각할 때 아마도 Markdown 파일의 콘텐츠를 생각하고 있습니다. 그리고 생성기는 해당 콘텐츠에서 실행되어 템플릿과 병합하고 웹사이트의 페이지인 10개, 수백, 수천 개의 HTML 파일을 생성합니다. React 사이트나 앱을 생각할 때 나는 React가 즉석에서 인터페이스를 생성하는 단일 페이지 경험에 대해 더 많이 생각합니다. 그래서, 개츠비가 이 두 가지를 모두 한다는 말입니까? 모든 페이지를 생성하고 JavaScript로 개선하고 있습니까?

마시: 그렇죠. Gatsby는 빌드 시 Node.js를 사용하고 React 구성 요소를 살펴보고 HTML 파일로 컴파일합니다. 솔직히 말해서, 처음 Gatsby를 보았을 때 JavaScript를 끄지 않고 "좋아, 여기에 다른 페이지가 있습니까? 이것은 무엇입니까?"라고 생각했습니다. 그리고 Gatsby가 기본적으로 그렇게 작동한다는 사실이 너무 기뻤습니다. 반응 구성 요소에서 빌드된 파일을 생성합니다.

Marcy: JavaScript에 있기 때문에 보다 점진적인 향상 접근 방식을 탐색했습니다. 사용자를 위해 점진적으로 개선된 것을 출력하려는 ​​경우와 같이 JavaScript가 꺼져 있는 경우 JavaScript가 있다고 가정하는 깨진 코드를 모두 원하지 않을 것입니다. 그래서 약간의 단점이 있습니다. 그러나 누군가가 여전히 무언가를 구매할 수 있기를 원하는 핵심 사용자 흐름에 대해 적어도 그러한 종류의 문제를 해결할 수 있습니다. 이러한 사용 사례에 대한 지원을 추가해야 할 수도 있습니다.

Marcy: 하지만 Gatsby가 기본적으로 롤아웃하는 방식에 놀랐습니다. 그래서 그들은 그런 방식으로 사이트를 구축하기 위해 선택한 것이고 우리는 항상 그것을 평가하고 있습니다. 여전히 최선의 방법입니까? 사용자가 원하는 것을 제공하려면 어떻게 해야 합니까? 그래서 Gatsby가 웹사이트를 구축하는 데 최선을 다하고 있는지 확인하기 위해 내부적으로 몇 가지 탐색을 진행 중입니다.

Marcy: 따라서 번들 크기를 작게 유지하고 우리가 말하는 것에 대한 절충을 위해 프리패칭이 있는 고성능 코드인지 확인합니다. 이를 뒷받침할 데이터가 있습니까? 개발자 옹호자로서 제가 매우 관심을 갖고 있는 것은 웹사이트에서 패키징하고 번들로 제공하는 것이 실제로 필요하고 실제로 최고의 Gatsby 사이트를 만들 수 있는지 확인하는 것입니다.

Drew: 거기에서 성능에 대해 언급했는데 성능에 큰 초점이 맞춰져 있습니다. 그것은 확실히 개츠비가 자신을 제시하는 방식에서 보인다. 이것이 Gatsby의 진정한 기능입니까 아니면 JAMstack 웹 사이트의 특성입니까?

Marcy: JAMstack 웹사이트의 특성일 수 있다고 생각합니다. 궁극적으로 웹 사이트에서 번들로 제공하는 항목으로 귀결됩니다. 따라서 사용 중인 프레임워크나 도구가 무엇이든 최종 사용자를 위해 해당 번들에 무엇을 넣을지 신중해야 합니다. 그러나 Gatsby는 실제로 좋은 기본값을 제공하는 것을 목표로 합니다. 성능뿐만 아니라 접근성도 마찬가지입니다.

Marcy: 하지만 항상 평가가 필요합니다. 무언가를 추가한 경우에도 여전히 성능이 유지되는지 확인해야 합니다. 그러나 예, 정적 파일의 초기 페이로드를 가져오면 빠르게 로드됩니다. 내가 사용했던 클래식 WordPress 사이트보다 훨씬 빠릅니다. 그러나 그런 다음 JavaScript로 향상시킵니다. 거기에는 확실히 약간의 트레이드 오프가 있습니다.

Marcy: 하지만 정말 잘 작동합니다. 많은 사람들이 Gatsby 사이트를 정말 좋아합니다. 그래서 풀타임으로 작업하고 Gatsby와 같은 JavaScript 프레임워크의 모든 기능을 배우는 것이 재미있었습니다.

Drew: Gatsby가 실제로 사이트 속도를 높이기 위해 어떤 종류의 성능 기능을 도입했습니까?

Marcy: 글쎄요, 링크에 대한 미리 가져오기와 함께 이 클라이언트는 라우팅 항목을 말했습니다. 아마도 가장 큰 항목일 것입니다. 프로그레시브 웹 앱을 정말 쉽게 생성할 수 있습니다. 따라서 일부 오프라인 기능이 있으면 오프라인 및 PWA 유형 항목과 관련하여 원하는 것을 선택하고 선택할 수 있습니다. 그러나 매니페스트를 사용하고 웹사이트의 최신 버전을 만드는 방법에 대한 예가 있는 많은 시작 예제 사이트와 같이 실제로 초기 경험의 일부로 만듭니다.

Marcy: 정말, 필요하지 않은 코드를 배송하지 않는 것과 같습니다. 그것은 그것의 큰 부분입니다. 캐싱은 링크를 미리 가져오는 것입니다. 그것이 내가 말하는 가장 큰 부분입니다.

Drew: 이것은 사이트가 실제로 사용자가 어디로 갈지 예상하는 곳입니다. 그것만큼 지능적입니까 아니면 페이지의 모든 것을 미리 가져오나요?

Marcy: 아니요, 사용자 상호 작용을 기반으로 합니다. 따라서 사용자가 View 포트를 아래로 스크롤하면 거기에서 프리페치가 발생합니다. 링크 위로 마우스를 가져 가면 해당 페이지로 이동할 가능성이 매우 높다고 추정합니다. 우리는 내부적으로 프리페칭이 키보드 포커스에서도 발생해야 하는지 여부에 대해 오픈 소스에 대해 이야기해 왔으며, 따라서 접근성과 성능의 교차점은 매우 흥미로울 것입니다.

Marcy: 마우스를 사용할 수 없고 탐색을 위해 모든 링크를 탭핑하는 키보드 사용자와 같은 몇 가지 절충점이 있습니다. 마우스 사용자가 좀 더 선택적인 것일 수 있기 때문에 실제로 각 링크에 대한 콘텐츠를 가져와야 하는 경우입니다. 마우스 커서를 어디에 놓았는지에 대해. 그래서 저는 그 대화가 매우 매력적이라고 ​​생각합니다.

Marcy: 그리고 이러한 가정을 검증하기 위해 어떤 데이터가 필요한지 생각하려고 합니다. 예, 이러한 기본값을 살펴보고 어떤 개선 사항을 만들 수 있는지 살펴보고 얼마나 많은 데이터를 가져오는지 실제로 확인하는 것이 매우 흥미로웠습니다. 정말 좋은 일입니까? 속도를 조금 더 빠르게 하려면? 아니면 그것 없이도 충분히 빠르나요? 모든 장단점을 평가할 수 있기 때문에 프레임워크 작업의 즐거움의 일부로 사용할 수 있는 대체 솔루션이 있습니까?

Drew: 이것은 사용자가 사이트에서 무료로 얻을 수 있는 것을 미리 가져오는 것입니다. 그래서 그들은 그것을 구현하기 위해 어떤 일을 해야 합니까?

Marcy: Gatsby 링크를 사용하면 무료로 얻을 수 있습니다. 그래서 Gatsby와 함께 제공되는 컴포넌트이고 그것을 사용하면 앵커 태그를 출력합니다. 따라서 HTML은 실제 HTML이며 웹 플랫폼을 그런 식으로 활용했습니다. 그러나 React 구성 요소에서 Gatsby 링크 구성 요소와 직접 작업하고 있습니다. 그리고 그것은 다음을 위한 모든 메커니즘을 가지고 있습니다. 그것은 당신이 가고 싶은 곳의 링크에 대해 미래의 HREF가 무엇이든 살펴보고 해당 링크에서 리소스를 가져와 미리 로드합니다.

Marcy: 그리고 그것은 귀하의 사이트 내부에만 해당됩니다. 그래서 그것은 꺼지지 않고 다른 웹사이트에서 물건을 가져오려고 하지 않습니다. 하지만 꽤 잘 작동하는 것 같습니다. 일부 사용자는 실제로 이러한 항목 중 일부를 선택 해제해야 하는 것처럼 적극적으로 방법을 찾고 있다는 것을 알고 있습니다. 최소한 프리페칭을 사용하지 않는 라우팅. 일반 앵커 태그를 사용하면 됩니다. 그러면 실제로 그 기능을 얻지 못합니다. 다른 것을 사용하는 것은 매우 쉽습니다. 그러나 우리가 하고 있는 논의 중 일부는 클라이언트 측 라우팅과 이를 최대한 활용하는 방법에 관한 것입니다. 그래서 정말 흥미로운 공간이기도 합니다.

Drew: 내 링크 구성 요소를 갖고 싶다면 Gatsby 생태계 내에서 얼마나 밀접하게 작업해야 합니까? 괜찮을까요? 그런 일을 하기 위해 개츠비와 싸우지 않겠습니까?

Marcy: 아니요. React 런타임과 함께 작동하는 한 원하는 구성 요소를 삽입할 수 있습니다. 그것이 정말 아름다움입니다. React 앱에 넣을 수 있는 모든 것을 Gatsby 앱에 넣을 수 있습니다. 사전 React 플러그인도 있습니다. 따라서 Gatsby와 함께 작업하는 몇 가지 대안이 있습니다. 그러나 사용하거나 직접 작성하려는 선반 구성 요소를 모두 가져올 수 있는 방법이 마음에 듭니다.

Marcy: 유연성이 사람들이 진정으로 즐기는 것이라고 생각합니다. React 런타임을 사용한다는 주의 사항이 있습니다. 따라서 react를 사용하거나 이 pre-React 플러그인을 사용해도 괜찮습니다. 하지만 개인적으로 접근성 및 템플릿, 특히 React 후크 작업을 위한 react 및 JSX를 정말 좋아합니다. 그래서 내 Gatsby 사이트에서 오두막을 사용할 수 있다는 것은 정말 멋진 일입니다. 난 정말 좋아.

Drew: 그리고 아마도 그냥 설치할 수 있고 다른 정적 사이트 생성기를 사용하는 것처럼 빌드를 수행할 노드 모듈인 Gatsby 사이트를 구축하는 프로세스는 어떻습니까?

마시: 네. 전역적으로 설치하는 CLI가 있습니다. 그리고 그것은 당신이 그것을 전 세계적으로 설치할 것인지 여부입니다. 그것이 우리가 권장하는 것입니다. 그러면 컴퓨터의 모든 디렉토리에서 실행할 수 있지만 Gatsby 사이트를 구축하는 데 필요한 모든 것을 끌어낼 수 있기 때문입니다. 그런 다음 WordPress를 헤드리스 CMS 또는 기타 콘텐츠 소스로 사용하고 싶다고 가정해 보겠습니다.

Marcy: 패키지, 플러그인을 설치하여 작동하도록 한 다음 사이트와 통합할 수 있습니다. 또한 더 빨리 시작하고 실행하는 데 사용할 수 있는 몇 가지 스타터 및 테마가 있습니다. Drupal이나 prismic 또는 CMS나 전자상거래 솔루션이나 내가 사용하고 싶은 것과 같은 특정 통합을 위해 무언가를 테스트하거나 사이트를 빠르게 시작하려는 경우에 사용했습니다.

Marcy: 많은 예가 있습니다. 그래서 항상 시행착오를 겪으면서 그것을 알아내려고 하는 것은 아닙니다. 하지만 이러한 빌딩 블록을 조합하여 생성할 수 있는 것입니다. 우리가 콘텐츠 메시라고 부르는 것입니다. 따라서 이러한 최고의 통합을 사용하여 사이트를 만들 수 있습니다. 클래식 WordPress 사이트가 있는 경우 작성 경험과 팀과의 작업이 정말 좋습니다.

Marcy: 하지만 모바일 장치에서 작동하는 방식과 같은 프론트 엔드에 단점이 있었습니다. 다른 무엇? 전자상거래 솔루션을 원했다면? 요즘에는 더 쉽게 할 수 있는 것들이 있다고 생각하지만 인증을 위해 원하는 최상의 솔루션 종류를 선택할 수 있거나 최신 기술이 무엇이든 선택할 수 있게 되면 "이걸 사용할 수 있으면 좋겠어요. " Gatsby를 사용하면 이러한 많은 것을 함께 끌어올 수 있고 이 콘텐츠를 구성하는 방식을 상당히 상쾌하게 만들 수 있습니다.

Marcy: 특히 WordPress와 같은 통합을 계속 사용할 수 있고 여전히 팀과 함께 작업할 수 있는 경우. 그래서, 우리는 당신이 좋아하거나 팀을 위해 작동하는 모든 기술을 선택할 수 있는 이 새로운 작업 방식에 대해 매우 기쁘게 생각합니다.

Drew: Gatsby가 강력하게 내세우는 큰 기능 중 하나는 다양한 소스에서 데이터나 콘텐츠를 가져올 수 있다는 것입니다. 워드프레스와 드루팔과 같은 것들과 당신이 가지고 있는 것에 대해 언급했습니다. 전통적으로 내가 Jekyll이나 Eleventy 같은 것을 사용하고 있다면 API와 상호 작용하기 위해 직접 연결해야 했을 것입니다. 아마도 콘텐츠를 끌어내려 마크다운 파일이나 JSON 파일에 작성한 다음 생성기를 작동시키십시오. 그 파일들과 함께.

Drew: 그래서 그것은 일종의 2단계 프로세스가 될 것입니다. 소스 비트와 같은 것을 사용할 수 있습니다. 그런 종류의 일을 하는 이전 에피소드에서 다루었습니까? Gatsby는 다른 정적 사이트 생성기와는 달리 다른 소스를 소비할 수 있는 고유한 기능을 가지고 있다는 것을 올바르게 이해하고 있습니까?

Marcy: 이 분야에서 Gatsby를 정말 강력하게 만드는 것은 GraphQL 데이터 레이어와 플러그인 생태계라고 생각합니다. 따라서 누군가가 이미 구축하려는 데이터 소스에 대한 플러그인을 작성했을 가능성이 있습니다. 그리고 그렇지 않다면 아마도 가까운 무언가가 있을 것입니다. 그러나 GraphQL을 사용하는 것은 일종의 작업 중입니다. 이러한 모든 통합을 가능하게 하는 계층은 GraphQL을 사용하고 있습니다.

Marcy: 그리고 당신이 끌어들일 수 있는 많은 가능성이 있고 우리는 플러그인도 쉽게 작성할 수 있도록 노력하고 있습니다. 그래서 플러그인을 작성하는 방법과 플러그인이 생성하는 AST 또는 추상 구문 트리를 작성하는 방법과 모든 작동 방식에 대한 일종의 학습 방법에 대해 정말 깔끔하게 배웠습니다. 하지만 네, 스스로 작성하지 않고도 선택할 수 있는 선반에 있는 많은 것들이 있으며, 이는 꽤 굉장합니다.

Marcy: 그리고 마크다운을 끌어올 수 있는 유연성이 있어서 좋습니다. 개발자가 블로그 콘텐츠 마크다운을 작성하고 싶지만 마케팅 팀이 이에 만족하지 않는다고 가정해 보겠습니다. 콘텐츠 소스를 결합하고 여러 위치에서 소스를 얻을 수 있습니다. 나는 사람들이 다른 GitHub 리포지토리에서 물건을 소싱하는 것을 보았고 그들은 get 플러그인을 사용하여 그런 식으로 마크다운 콘텐츠를 가져옵니다. 유연성이 많습니다.

Drew: 그리고 사용자 정의 데이터 소스에서 가져올 플러그인을 작성할 수 있는 옵션이 있는 것 같습니다. 레거시 시스템이 있고 그 전면에 멋지고 빛나는 새 웹사이트를 추가하고 싶다고 가정해 보겠습니다. 필요한 형식으로 데이터를 내보내고 작업보다 더 큰 것으로 변환하는 플러그인을 작성할 수 있습니까?

마시: 그럴 수 있습니다. 그래서 플러그인이 이를 가능하게 합니다. 그리고 그 위에 우리가 개츠비 테마라고 부르는 이 추상화가 있습니다. 그리고 그것들은 사용자 인터페이스 코드일 뿐만 아니라 GraphQL 쿼리, 플러그인을 설정하는 구성일 수 있으므로 함께 번들로 사용되는 플러그인과 같습니다. 그리고 그 테마를 NPM에 배포할 수 있습니다.

Marcy: 그런 다음 해당 버전을 가져와서 가져올 수 있습니다. 그리고 이 전체 API는 여러 저장소가 있다고 말하는 팀에게도 매우 흥미로울 것입니다. 동일한 코드의 이 모든 repos에서. 그래서, 일을 조금 말리고 자신을 너무 많이 반복하지 마십시오. 테마라고 하는 이러한 추상화를 사용하여 해당 소스 플러그인을 활성화하는 논리 또는 코드를 배포할 수 있습니다. 팀이 지금 당장 많은 것을 얻고 있다고 들었는데 그 위에 구축할 수 있는 이러한 종류의 추상화 계층이 있습니다.

Drew: Gatsby 세계의 테마는 WordPress와 같은 CMS와 같은 모양과 느낌이 아닙니다.

Marcy: 네, 그럴 수는 있지만 그게 다가 아닙니다. 그래서 이름을 짓는 것은 매우 어렵습니다. 하지만 유연성에 대해 배우는 것을 정말 좋아하는 테마입니다. 예, 일부 사용자 인터페이스 코드를 포함할 수 있습니다. 그러나 거기에 들어가는 쿼리 언어 코드도 있을 수 있습니다. 그러나 함께 묶인 형태로 되어 있기 때문에 배포하기 쉽습니다. 네, 사람들이 무엇을 만들고 어떤 테마를 전달하는지 등을 보는 것이 정말 멋지다는 것은 정말 멋진 추상화였습니다.

Drew: 예, Gatsby의 상당히 혁신적인 사용으로 이어질 것이라고 상상할 수 있습니다. 고객이 특히 창의적으로 하고 있다는 점에서 특히 눈에 띄는 것을 본 적이 있습니까?

마시: 네. 글쎄요, 주제의 관점에서, 제 말은 제가 처음 읽은 것 중 하나가 Gatsby 블로그에 사례 연구가 있다는 것입니다. 저는 Apollo에서 생각합니다. 그리고 그들은 Gatsby 테마를 사용하여 소스 가져오기 플러그인을 사용하는 문서 사이트를 작성했습니다. 따라서 소싱과 콘텐츠를 분리하여 팀이 여러 리포지토리에서 사용할 테마를 가져올 수 있도록 합니다.

Marcy: 내가 상상할 수 있는 것 때문에 그게 가장 흥미로웠어요 그것은 수. 그래서 이제 팀이 "오, 이거 잘 되네요."라고 말하는 솔루션을 보고 있습니다. 그것도 작년 여름이었거나 얼마 전 사례 연구였습니다.

Marcy: 그 이후로 API가 개선되고 있으며 Gatsby 테마를 작업하는 전체 팀이 있습니다. 그리고 나는 그들이 앞으로 몇 주 안에 몇 가지 큰 개선 사항을 출시할 것이라는 것을 알고 있습니다. 그래서 나는 그들의 천둥을 훔치고 싶지 않지만 테마와 함께 오는 깔끔한 것들이 있습니다. 그들은 우리가 Gatsby에서 제공하는 핵심 테마와 같은 일부 블로그 테마를 점검했습니다.

Marcy: 나는 그들이 그것을 내부적으로 사용하여 우리 자신의 제품 발표 또는 앞으로 몇 주 안에 여기에서 발표될 제품 개선 사항을 구축하고 있다는 것을 알고 있습니다. 따라서 Gatsby 테마로 진행되는 많은 멋진 일들과 자신만의 테마와 스타터를 판매하는 사람들이 있습니다. 그것도 정말 흥미로운 것 같아요.

Drew: Gatsby 주변에 시장이 생겨나고 있습니다.

마시: 네, 있습니다.

Drew: 온라인 교육이 있습니까? 누군가 원할 때 그런 일이... 누군가가 정말로 Gatsby에 입문하고 그것을 빨리 배워야 한다고 결정했다면? 그런 정보를 가지고 갈 수 있는 달리기 장소가 있습니까?

마시: 많이요? 네. 분명히 Gatsby Doc의 사이트인 gatsbyjs.org/doc가 있습니다. 튜토리얼도 있고 거의 매주 Gatsby 관련 라이브 스트림을 진행하고 있습니다. YouTube와 다양한 학습 플랫폼에 Gatsby 자료를 가지고 있는 교육자가 많습니다. 에그헤드, Gatsby의 팀원 중 일부도 에그헤드 비디오를 가지고 있는 것 같습니다.

Marcy: 그래서, 거기에는 엄청나게 많은 것들이 있습니다. 나는 당신이 뭔가를 찾으면 날짜를 확인하라고 말하고 싶습니다. 업데이트를 위해 모든 단일 학습 리소스를 모니터링할 수 없기 때문에 Gatsby Doc, 일부 오래된 타사 비디오 및 날짜를 ​​확인할 수 있는 항목을 항상 적극적으로 업데이트하고 있습니다. 우리 직원들을 따라잡기가 어렵습니다.

Marcy: 콘텐츠 소싱 옵션과 사용 사례가 너무 많기 때문입니다. 굉장히 넓은 공간입니다. 그러나 거기에는 학습 자료가 너무 많고 시작하는 방법이 많이 있으므로 학습 스펙트럼의 어느 위치에 있는지에 따라 시도하고 찾을 수 있습니다. 당신은 초기 단계에 있습니까? 다른 기술에서 오고 있으며 이 React가 무엇인지에 대해 배울 필요가 있습니다.

Marcy: 현재 위치에 따라 어떤 재료가 효과가 있을지 일종의 선택을 할 수 있습니다. 저는 최근에 Gatsby Web Creators라는 라이브 스트림을 통해 과정을 진행하고 있습니다. 여기서 우리는 초급 HTML, CSS 및 JavaScript에서 첫 번째 Gatsby 사이트 만들기에 이르기까지 모든 과정을 진행했습니다. 금요일에 완료했습니다. 그래서, 처음으로 완전히 돌아가는 것은 정말 깔끔했습니다.

Marcy: 그리고 Gatsby에는 많은 자료가 있기 때문에 React를 사용합니다. 그래서, 그것을 시작하는 것은 꽤 큰 도약입니다. 그래서 저는 정말로 돌아가서 React와 Gatsby로 모든 것을 구축하는 단계를 밟고 싶었습니다. 그래서 정말 깔끔했습니다. 그리고 그 길을 계속 이어갈 수 있게 되어 매우 기쁩니다. 많은 기술이 다른 프레임워크로 이식될 수 있기 때문에 사람들이 Gatsby로 사이트를 구축하는 방법을 이해하는 데 도움이 되는 더 많은 초보자 자료와 더 많은 것들이 있습니다.

Drew: Gatsby를 사용하여 일종의 클라이언트 프로젝트 사이트를 구축하는 것에 대해 생각하고 있는 모든 사람에게 제기될 큰 질문 중 하나는 곧 제기될 큰 질문 중 하나가 콘텐츠를 관리하고 클라이언트 앞에 물건을 놓는 것에 관한 것입니다. Gatsby가 다양한 콘텐츠 관리 시스템에 연결하는 방법을 이미 언급했습니다. 그것이 당신이 그 질문을 다루기 위해 배치할 기본 방법입니까? 아니면 Gatsby의 생태계에 사람들이 어떤 식으로든 콘텐츠를 편집할 수 있는 기능이 있습니까?

Marcy: 네, CMS 같은 것이 있으면 팀 관계가 훨씬 더 좋아질 수 있습니다. 저는 개발 팀이 "HTML 배우기"와 같은 사용 사례에 있었습니다. 그리고 당신은 "아니요, 당신이 방금 그런 말을 했다는 것이 믿기지 않습니다." 따라서 사람들이 가장 적합한 방식으로 최선을 다할 수 있는 시스템을 갖추는 것은 매우 중요합니다.

Marcy: 당신이 마케터 GitHub를 다룰 수 없는 것처럼, 가끔은 작동하지만 항상 작동하지는 않습니다. 따라서 미리보기를 좋아하고 인프라를 구축하면 더 나은 결과를 얻을 수 있으며 Gatsby 클라우드 제품 공간이 일종의 싸움에 들어가는 것입니다. 미리보기를 하는 방법이 있습니다. 유료 클라우드가 없으면 Gatsby 클라우드에는 개인 프로젝트에 대한 프리 티어가 있으므로 모두 유료가 아닙니다.

Marcy: 하지만 Gatsby가 창립 조직으로서 오픈 소스 프레임워크를 유지하고, 건전하게 유지하고, 커뮤니티를 계속 운영할 수 있도록 충분한 돈을 벌 수 있도록 오픈 소스와 제품 생태계와 같은 것이 있습니다. . 이것이 바로 이 오픈 소스 상업적 측면이 함께 모여 팀이 필요로 하는 이러한 워크플로 중 일부를 실제로 활성화하는 곳입니다.

Marcy: 빠른 미리 보기, 빠르게 구축하고 배포하는 것과 같은 몇 가지 사항이 있습니다. 따라서 Gatsby 클라우드 측에는 구체적으로 솔루션이 있습니다. 그런 다음 Gatsby가 미리 보기 서버와 같이 작동하도록 하는 오픈 소스 방법이 있는 곳이면 어디에서나 이를 문서화하고 커뮤니티가 무엇을 어떻게 해야 하는지 알 수 있도록 합니다. 해당 팀의 요구 사항을 충족합니다.

Marcy: 예, CMS 변경 사항을 미리 볼 수 있는 방법이 필요합니다. 왜냐하면 그것은 즉각적인 만족과 같기 때문입니다. 빌드가 일부 콘텐츠를 볼 때까지 한 시간을 기다리고 싶지 않습니다.

드류: 흥미롭군요. Gatsby 클라우드 서비스는 헤드리스 CMS 서비스를 사용할 수 있는 기능을 제공합니다. 여기서 콘텐츠 작업만 할 수 있지만 사이트에서 어떻게 보일지 시각화할 수 없기 때문에 그 내용을 미리 볼 수 있습니다. 작동 할 것이다. 맞나요?

마시: 그렇죠. 따라서 이것은 분리의 트레이드 오프의 일부입니다. 헤드리스 CMS는 WordPress와 같이 프론트 엔드를 조회할 수 있었지만 새로운 프론트 엔드를 제공하고 잠재적으로 다른 소스를 가져옵니다. 그리고 WordPress가 알지 못하는 다른 것들. 따라서 그런 식으로 분리하는 것이 합리적입니다. 그러나 여전히 팀원으로서 빠르게 익숙해진 속도로 작업을 수행할 수 있어야 합니다.

Marcy: 그래서 Gatsby 미리보기, Gatsby 빌드가 팀에 프론트 엔드를 다시 제공하여 팀이 협업하고 결정을 내리고 제품을 배송할 수 있도록 하는 곳입니다. 그래서 지난 해에 더 많은 기능과 개선 사항이 생겨났고 실제로 속도가 증가하기 시작했다는 일부 팀의 이야기를 들었습니다.

Marcy: 그리고 우리가 "좋아, 이 빌드가 느리게 진행되고 있다면 그 이유는 무엇인가?" 일반적으로 사이트가 정말 크기 때문입니다. 그래서 우리는 대규모 사이트를 개선하고 팀의 협업 워크플로를 실제로 개선하는 데 많은 초점을 맞췄습니다. 그것은 지금 팀의 큰 초점입니다.

Drew: Gatsby 클라우드의 핵심은 호스팅 서비스인 것 같습니다. Gatsby 특정 기능과 그 주변의 기능이 가득한 Gatsby 사이트를 배포하기 위한 CDN입니까?

Marcy: 실제 CDN이 아니기 때문에 지속적인 전달 제품이라고 부를 수 있습니다. Fastly, Netlify와 같은 CDN과 통합됩니다. 연결할 수 있는 다양한 공급자가 있으며 그 중 일부는 무료입니다. 무료로 많은 작업을 수행할 수 있습니다. 지난 날 Gatsby 웹 제작자 세션에서 방금 수행했습니다. Gatsby 클라우드와 Netlify를 사용하여 사이트를 구축합니다.

Marcy: 그리고 Gatsby 사이트를 더욱 빠르게 만들 수 있습니다. 개선 사항이 있기 때문입니다. 한 가지 유형의 사이트만 구축하면 됩니다. 따라서 Gatsby 클라우드가 만들 수 있는 몇 가지 개선 사항이 있습니다. 다른 플랫폼에서는 이러한 다양한 유형의 웹 사이트를 모두 지원하려고 하고 모두 잘 수행하기 때문입니다.

Marcy: 하지만 Gatsby의 경우, 그것이 당신이 만들고 있는 전부이고 Gatsby에 대해 모두 참여하는 꽤 많은 에이전시가 있고 그들은 가능한 한 빨리 그것을 만들고 싶어합니다. 따라서 Gatsby 클라우드는 다른 플랫폼에 대해 걱정할 필요가 없기 때문에 Gatsby를 위해 특별히 성능을 개선할 수 있습니다.

Drew: Gatsby 클라우드가 빌드를 수행한 다음 Netlify와 같은 곳에 배포하거나 아마도 다양한 장소에 배포할 것입니다.

마시: 네. 네, 그럴 겁니다. 따라서 Netlify가 빌드된 패키지를 업로드할 때 사용할 부분입니다. 빌드된 파일. 빌드를 사용하지 않기 때문에 Gatsby 클라우드 인프라에서 빌드가 진행 중이며, 여기서 상당한 속도 향상이 발생할 수 있습니다. 그리고 선택한 항목이 무엇이든 CDN으로 내보내는 업로드 단계가 있습니다.

Marcy: 하지만 네, 팀들이 이 볼 수 있는 능력을 정말 좋아하는 것 같습니다. 내 말은, 당신이 놓쳤을 기능입니다. 따라서 다시 추가해야 하는 것은 이러한 협업 미리 보기를 수행하고 승인을 받는 등의 모든 것입니다.

Drew: 그래서 Gatsby 클라우드는 Gatsby 회사에서 서비스로 제공하고 Gatsby 오픈 소스 프로젝트도 있습니다. 이것은 오픈 소스 제품을 개발하는 상업 주체가 있는 WordPress 및 자동과 유사한 종류의 관계입니까?

Marcy: Drupal처럼 그렇습니다. 일종의 선순환 구조인 이러한 창립 조직이 있다는 기술의 전례가 있습니다. 그리고 우리는 현재 커뮤니티에서 결정을 내리는 방법을 명확하게 하기 위해 일부 거버넌스 문서를 게시하기 위해 노력하고 있습니다. 그러나 전체 목표는 Gatsby를 지속 가능하게 유지하여 사람들이 Gatsby 클라우드에 들어가더라도 사용할 수 있는 오픈 소스 프로젝트를 계속할 수 있도록 하는 것입니다.

Marcy: 원한다면 다른 솔루션을 사용할 수도 있습니다. 그래서 우리는 그 일을 하는 사람들처럼 유지하기에 충분한 비즈니스가 필요합니다. 그래서 저는 오픈 소스와 상업적 측면 사이를 오가며 우리가 우선 순위를 정하고 있는지 확인하려고 노력하는 것처럼 중간에 있습니다. 내 말은, 당신이 상상할 수 있듯이, 우리는 우리 모두가 우리가 좋아하고, 정말로 강하게 느끼고, 우리의 일을 위해 해야 하는 틈새 사용 사례가 있는 것과 같은 공간의 폭으로 많은 것을 저글링하고 있습니다.

Marcy: 틈새 사용 사례가 많이 추가됩니다. 그래서 우리는 저글링을 하고 우선 순위를 정하고 현재 무엇이 아프고 무엇이 고통스럽고 잘 진행되고 있는지에 대해 커뮤니티의 이야기를 진정으로 경청합니다. 그래서 개인적으로 devREL로 돌아가 커뮤니티의 의견을 들을 수 있는 흥미로운 여정이었습니다. 어떻게 하면 우리를 더 좋게 만들 수 있을까요?

Drew: 그리고 Gatsby 주변에 많은 사람들이 그것을 사용하는 큰 커뮤니티가 있습니까?

Marcy: 많은 사람들이 그것을 사용하고 있으며 많은 기여자들이 있습니다. 따라서 많은 사람들에게 이것은 우리 부두에 와서 Hacktoberfest 등에 참여하는 것과 같은 오픈 소스에 기여하는 것이 처음일 수 있습니다. 그래서 Gatsby가 가지고 있는 큰 커뮤니티, 특히 접근성과 같은 것들과 프레임워크가 기본적으로 무료로 할 수 있는 모든 것을 할 수 있도록 하는 것을 보는 것은 정말 깔끔했습니다.

Marcy: 그리고 접근성과 Gatsby의 하위 집합 또는 교차 부분이 있습니다. 그게 제가 행복한 곳입니다. 그러나 더 넓은 커뮤니티에서 많은 사람들이 Gatsby를 통해 React를 배우거나 웹 개발을 배웁니다. 따라서 커뮤니티를 통해 진행 상황을 보는 것은 정말 멋진 일이며, 문제가 되거나 다음과 같은 경우에도 사람들이 기여할 수 있기를 바랍니다. 또는 구식입니다.”

Marcy: 사용하는 프레임워크나 프로젝트에 대해 이야기하는 것처럼, 개선할 수 있는 부분에 대한 통찰력을 얻을 수 있기 때문에 더 나은 것이 있을 수 있다고 하는 것이 기여할 수 있는 좋은 방법입니다. 따라서 기여하는 것이 좋습니다.

Drew: 당신은 접근성에 대해 언급했고 물론 사람들은 당신을 접근성 전문가로 알게 될 것입니다. And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.