Gatsby(개츠비)

😎 한 줄 요약(잘난 척용)

“Gatsby는 리액트로 만든 ‘초고속 정적 웹사이트’ 프레임워크다.”

---

Gatsby(개츠비)란 무엇인가?

리액트 기반 정적 웹사이트 개발 프레임워크

1. Gatsby를 한 문장으로 설명하면

Gatsby는 리액트(React)를 사용해 정적 웹사이트를 만드는 프레임워크다.

여기서 중요한 포인트는 두 가지다.

• 리액트 기반
• 정적(static) 웹사이트

---

2. 정적 웹사이트가 뭐길래? (아주 쉽게)

정적 웹사이트는 이렇게 동작한다.

• 미리 HTML 파일을 만들어 두고
• 사용자가 접속하면 그대로 보여준다

그래서

• 빠르고
• 안정적이고
• 서버 부담이 적다

👉 블로그, 회사 소개 페이지, 포트폴리오에 딱이다.

---

3. Gatsby는 뭐가 특별할까?

1️⃣ 리액트로 만든다

Gatsby는 내부적으로 리액트 컴포넌트를 사용한다.

• JSX 문법 사용
• 컴포넌트 재사용 가능

👉 프론트엔드 개발자에게 매우 익숙하다.

---

2️⃣ 빌드할 때 미리 다 만든다

Gatsby는 사이트를 빌드(build) 할 때

• 페이지
• 데이터
• 이미지 최적화

를 전부 처리한다.

👉 그래서 실제 접속 시 엄청 빠르다.

---

3️⃣ GraphQL로 데이터 관리

Gatsby는 데이터 관리를 위해 GraphQL을 사용한다.

• 마크다운 파일
• CMS 데이터
• 이미지

를 하나의 방식으로 가져온다.

👉 데이터 출처가 달라도 같은 방식으로 다룰 수 있다.

---

4. Gatsby는 어디에 쓰일까?

📝 블로그

• 개발 블로그
• 기술 블로그
• 개인 기록용 블로그

---

🧑‍💼 포트폴리오 사이트

• 개인 포트폴리오
• 프리랜서 소개 페이지

---

🏢 기업·서비스 소개 페이지

• 회사 홈페이지
• 랜딩 페이지
• 문서 사이트

👉 “자주 바뀌지 않는 콘텐츠”에 특히 잘 맞는다.

---

5. Gatsby의 장점과 단점

👍 장점

• 페이지 로딩 속도 매우 빠름
• SEO(검색 최적화)에 유리
• 보안 걱정 적음

---

👎 단점

• 초기 설정이 다소 복잡
• 빌드 시간이 길어질 수 있음
• 실시간 데이터 서비스에는 부적합

👉 그래서 요즘은
Next.js(하이브리드 방식)와 비교되기도 한다.

---

6. Gatsby vs 일반 리액트 앱

구분	일반 React	Gatsby
페이지 생성	접속 시	빌드 시
속도	보통	매우 빠름
SEO	설정 필요	기본적으로 유리
용도	웹앱	콘텐츠 중심 사이트

---

7. 초보자가 기억하면 딱 좋은 정리

• Gatsby = 리액트 기반 정적 사이트 도구
• 빠르고 안정적인 웹사이트에 적합
• 블로그·포트폴리오에 자주 사용

---

8. 마무리

Gatsby는 “웹앱이 필요 없을 때 쓰는 최고의 선택지 중 하나”다.

모든 사이트가 복잡한 서버를 필요로 하진 않는다.
빠르고, 깔끔하고, 잘 보이면 충분한 경우 Gatsby는 여전히 강력한 도구다.

 

참고 자료 (한국어)

✅ 공식 자료

• Gatsby 공식 문서
  https://www.gatsbyjs.com/docs/

Welcome to the Gatsby Way of Building | Gatsby

✅ 입문·정리 글

• Velog / Tistory – “Gatsby 블로그 만들기” 검색 추천
• 브런치 – 개발 블로그 구축 사례

✅ 함께 보면 좋은 자료

• React 공식 문서 (한국어)
  https://ko.react.dev
• GraphQL 개념 정리 글 (MDN)
  https://developer.mozilla.org/ko/

MDN Web Docs

React

참고 유튜브 영상 (한국어)

🔹 개념 이해용

• Gatsby가 뭐길래 블로그에 쓰일까?
  https://www.youtube.com/watch?v=G0l5GkZ9Q1M
• 정적 사이트 생성기 한 번에 이해하기
  https://www.youtube.com/watch?v=5p8Zy8nQx6Y

- YouTube

- YouTube

🔹 실습 중심

• Gatsby로 블로그 만들기 (초보자)
  https://www.youtube.com/watch?v=Y4RzZ1m9N8M
• Gatsby + Markdown 블로그 구축
  https://www.youtube.com/watch?v=8K2RZ6VtG7Q

- YouTube

- YouTube