Gatsby를 어떻게 적용할 수 있을까? (+ gatsby에 typescript 적용하기)

너드팩토리 프론트엔드 챕터가 Gatsby를 도입한 배경과 TypeScript 개발환경 세팅까지 정리한 글이다. Gatsby는 React 기반의 Jamstack 프레임워크로, 렌더링할 화면을 미리 만들어 CDN에서 제공해 웹 서버를 따로 관리하거나 실행할 필요가 없다는 점을 내세운다.

핵심 포인트

일반적인 웹사이트는 프론트엔드의 시각화와 백엔드의 데이터로 페이지를 만들어 보여주는데, 렌더링할 때마다 이 과정이 필요해 로딩이 오래 걸린다.
Jamstack은 모든 데이터를 서버에서 미리 불러와 화면으로 만들어 두고, 사용자가 접속하면 만들어 놓은 화면을 그려준다.
JavaScript가 실행되면 빈 HTML에 마크업을 추가하는 일반적인 React SPA와 달리, 빌드 과정에서 마크업이 생성돼 더 빠르게 렌더링된다.
빌드 시점에 페이지 내 모든 콘텐츠가 생성돼 있어 SPA보다 SEO에 유리하다.
Next.js가 다운로드 수는 가장 많지만 주로 SSR을 쓰는 프레임워크라 요청마다 동적으로 생성하는 특성이 있어, 이 팀은 정적 생성 쪽을 택했다.

상세 정리

Gatsby의 정의: React를 기반으로 하며 프론트엔드 시장에서 자주 등장하고 빠르게 성장하는 Jamstack 계열 프레임워크다.
공식 설명 인용: 파일을 미리 렌더링해 CDN에서 직접 제공함으로써 빠르고 안전한 사이트와 앱을 만들며, 웹 서버 관리나 실행이 필요 없다는 것이다.
팀 적합성 판단: 너드팩토리 프론트엔드 챕터가 React와 TypeScript를 가장 활발하게 쓰고 있어, React를 어느 정도 다룰 수 있으면 큰 어려움 없이 개발 가능하리라 봤다.
속도 이점의 근거: 페이지 개발 후 빌드하는 과정에서 마크업이 생성되기 때문에 런타임에 마크업을 만드는 SPA보다 렌더링이 빠르다.
SEO 이점의 근거: 빌드 결과물에 콘텐츠가 이미 들어 있어 크롤러가 읽을 내용이 존재한다.
프레임워크 비교: 다운로드 횟수 기준으로 Next.js가 앞서지만 정적 사이트 생성 기능과 별개로 주로 SSR을 사용한다는 점을 구분해 설명한다.
글에는 Gatsby 프로젝트에 TypeScript를 적용하기 위한 개발환경 세팅 내용도 함께 담았다고 밝힌다.

왜 읽나정적 사이트 생성 프레임워크를 고르는 프론트엔드 팀에게, Jamstack의 렌더링 시점 차이와 SEO 영향, Next.js와의 성격 구분을 정리해 준다.

너드팩토리 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청