TwentyTwentyOne

GatsbyJS에서 카테고리 및 태그 필터링 기능 추가하기블로그 또는 문서 사이트에서 카테고리와 태그를 사용하면 사용자가 원하는 콘텐츠를 쉽게 찾을 수 있습니다.이번 글에서는 GatsbyJS에서 GraphQL과 동적 페이지 생성을 활용하여 카테고리 및 태그 기반 필터링 기능을 추가하는 방법을 설명하겠습니다. 🚀1. Gatsby에서 카테고리와 태그를 적용하는 방식✅ 카테고리 및 태그 적용 방식 비교적용 방식 설명 사용 예시카테고리 기반 필터링글마다 하나의 카테고리를 지정기술 블로그, 뉴스 사이트태그 기반 필터링글마다 여러 개의 태그를 지정블로그, 제품 페이지🚀 Gatsby에서는 gatsby-node.js를 활용하여 카테고리 및 태그 페이지를 자동으로 생성할 수 있습니다.2. Markdown 파일에 카테..

GatsbyJS에서 동적 콘텐츠 생성하기: 데이터 기반 페이지 생성 방법GatsbyJS는 **정적 사이트 생성기(SSG)**이지만, 동적으로 데이터를 받아서 페이지를 생성하는 기능도 지원합니다.이번 글에서는 Gatsby에서 GraphQL과 gatsby-node.js를 활용하여 동적 콘텐츠를 생성하는 방법을 설명하겠습니다. 🚀1. Gatsby에서 동적 콘텐츠를 생성하는 방법✅ 동적 콘텐츠 생성 방식방식 설명 사용 예시파일 기반 생성src/pages 폴더에 정적 파일을 추가하여 페이지 생성일반적인 정적 페이지 (/about, /contact 등)GraphQL 데이터 기반 생성외부 데이터(JSON, CMS, Markdown 등)를 기반으로 동적 페이지 생성블로그, 제품 목록, 게시판 등API 데이터 기반 생..

GatsbyJS 배포 및 호스팅: Netlify, Vercel, GitHub Pages 활용하기GatsbyJS는 **정적 사이트 생성기(SSG)**이므로 빌드된 정적 파일을 손쉽게 배포할 수 있습니다.이번 글에서는 Gatsby 프로젝트를 Netlify, Vercel, GitHub Pages에 배포하는 방법을 설명하겠습니다.1. Gatsby 배포 개요Gatsby는 정적 HTML, CSS, JavaScript 파일을 생성하므로 서버가 필요하지 않습니다.✅ Gatsby 배포 방식배포 플랫폼 특징Netlify간편한 연동, 자동 빌드, 서버리스 기능 지원Vercel빠른 CDN, Git 연동, 서버리스 함수 지원GitHub Pages무료 배포 가능, 간단한 정적 사이트 배포🚀 배포를 위해 Gatsby 프로젝트를 ..

GatsbyJS에서 GraphQL을 활용한 데이터 관리 방법GatsbyJS는 GraphQL을 기본 데이터 쿼리 언어로 사용하여 데이터 소스를 효율적으로 관리할 수 있습니다.이번 글에서는 GraphQL의 기본 개념과 Gatsby에서 데이터를 가져오는 방법을 실습과 함께 설명하겠습니다.1. GraphQL이란?GraphQL은 필요한 데이터만 선택해서 가져올 수 있는 쿼리 언어입니다.기존 REST API와 비교했을 때, GraphQL은 불필요한 데이터 요청을 줄이고, 원하는 데이터를 효율적으로 가져올 수 있도록 설계되었습니다.✅ REST API vs GraphQL 비교비교 항목 REST API GraphQL데이터 요청 방식여러 개의 API 엔드포인트 필요단일 엔드포인트에서 다양한 요청 가능응답 데이터고정된 JS..

GatsbyJS에서 페이지 생성 및 라우팅 관리하기GatsbyJS는 정적 페이지를 자동으로 생성하는 강력한 라우팅 시스템을 제공합니다.이번 글에서는 Gatsby에서 페이지를 만드는 방법과 동적 페이지를 생성하는 방법을 단계별로 설명하겠습니다.1. Gatsby에서 페이지를 생성하는 기본 개념Gatsby에서는 src/pages/ 폴더에 .js 또는 .tsx 파일을 생성하면 자동으로 해당 경로에 페이지가 생성됩니다.파일 기반 라우팅: src/pages/index.js → http://localhost:8000/자동 URL 매핑: src/pages/about.js → http://localhost:8000/about레이아웃 공유 가능: 여러 페이지에서 공통 레이아웃 사용 가능🚀 즉, Gatsby에서는 src/..

GatsbyJS 개발 환경 설정 및 프로젝트 생성하기GatsbyJS를 사용하여 웹사이트를 개발하려면 먼저 개발 환경을 설정하고, 첫 번째 Gatsby 프로젝트를 생성해야 합니다.이번 글에서는 GatsbyJS를 설치하고, 프로젝트를 생성하는 과정을 단계별로 안내하겠습니다.1. 개발 환경 준비GatsbyJS를 사용하려면 Node.js와 Git이 필요합니다.설치 여부를 확인하고, 최신 버전으로 업데이트하는 것이 좋습니다.✅ Node.js 설치 확인 및 업데이트먼저, 터미널이나 명령 프롬프트에서 아래 명령어를 실행하여 Node.js가 설치되어 있는지 확인하세요.node -v✅ 출력 예시v18.16.0🚀 Node.js가 설치되지 않았다면 Node.js 공식 사이트에서 다운로드 후 설치하세요.✅ Gatsby CL..

GatsbyJS란 무엇인가? 개념과 특징 정리GatsbyJS는 **React 기반의 정적 사이트 생성기(SSG, Static Site Generator)**로, 빠르고 효율적인 웹사이트를 구축하는 데 최적화된 프레임워크입니다.이번 글에서는 GatsbyJS의 개념과 특징, 그리고 다른 웹 프레임워크와의 차이점을 살펴보겠습니다.1. GatsbyJS란?GatsbyJS는 React를 기반으로 한 오픈 소스 프레임워크로, 다음과 같은 특징을 가지고 있습니다.✅ 정적 사이트 생성(SSG)페이지를 미리 생성하여 HTML, CSS, JavaScript 파일로 제공서버 없이도 빠른 로딩 속도 제공✅ GraphQL 기반 데이터 관리Gatsby는 GraphQL을 사용하여 다양한 소스(파일, CMS, API 등)에서 데이터를..