개발 · 프로그래밍

/

프론트엔드

React 기반 Gatsby로 기술 블로그 개발하기 v2

Gatsby v5를 통해 직접 나만의 기술 블로그를 개발해보는 강의입니다.

(5.0) 수강평 5개

수강생 53명

주현도

Gatsby React 블로그 TypeScript

thumbnail background

중급자를 위해 준비한
[Gatsby, 텍스트 강의] 강의입니다.

이런 걸 배울 수 있어요

Gatsby 프레임워크 사용 방법
React를 사용한 프론트엔드 개발
검색 엔진 최적화
블로그 배포 자동화
CMS(콘텐츠 관리 시스템)을 활용한 블로그 글 관리

많은 분들이 찾아주신 만큼,

더 풍부한 내용으로 다시 돌아왔습니다!

제목 없는 디자인

정말 감사하게도 많은 수강생분들께서 제 이전 강의인 "React 기반 Gatsby로 기술 블로그 개발하기"에 좋은 평가를 남겨주셨습니다.

하지만 시간이 지나며 강의 내용이 구버전이 되면서 수강생분들께서 진행하는 데 많은 어려움을 겪으셨고, 단순히 글만 보여주는 기능만 있었기에 콘텐츠가 빈약하다고 느껴졌습니다.

이러한 점들을 반영하여 이번 강의에서는 최신 버전의 더욱 풍부한 내용을 포함해 다시 돌아왔습니다.

여러분의 소중한 의견을 반영해 더욱 완성도 높은 강의를 준비했으니 많은 관심 부탁드립니다.

이번 강의에서 새롭게 추가된 내용

📌 더욱 간편한 게시글 관리를 위한 콘텐츠 관리 시스템인 Contentful을 도입했습니다.

📌 보다 쉽게 게시글 페이지를 렌더링하기 위한 Gatsby의 Collection Routes 기능을 사용합니다.

📌 Gatsby Head API / Server Side Rendering API / Browser API를 적극적으로 사용합니다.

📌 Masonry 레이아웃 / 목차 등 다양한 요소를 추가했습니다.

📌 추후 블로그 성과 분석 및 개선을 위한 Google Analytics를 추가했습니다.

직접 나만의 차별화된 블로그를 개발해보세요!

이 세상에서 유일하게 존재하는 나만의 기술 블로그를 가지고 싶지 않으신가요?

하지만 기술 블로그를 개발할 때, 개발 스택 선정부터 시작해 어떻게 개발하고 배포할지, 검색 엔진 최적화는 어떻게 해야 하는지에 대한 많은 고민과 어려움이 따릅니다.

특히 프론트엔드에 익숙하지 않거나, 개발 과정을 처음부터 끝까지 경험해보지 않으신 분들에게는 더욱 막막하게 느껴질 수 있습니다.

이런 분들을 위해 이 강의에서는 여러분들이 직접 더 쉽고 편하게 나만의 차별화된 블로그를 개발할 수 있도록 모든 과정을 체계적으로 안내해 드립니다.

섹션 0 - Gatsby 알아보기 및 개발 환경 구성하기
Gatsby 프레임워크가 무엇인지 알아보고, 블로그 개발 환경을 구성해봅시다.

섹션 1 - GraphQL을 통해 데이터 쿼리하기
블로그 게시글 데이터를 어떻게 GraphQL을 사용해 가져올 수 있는지 확인해봅시다.

섹션 2 - 프로젝트 구성 및 레이아웃 개발하기
프로젝트 구조를 설계하고, 모든 페이지에 공통으로 사용할 레이아웃을 만들어 봅시다.

섹션 3 - 글 목록을 띄워줄 메인 페이지 개발하기
게시글 목록이 띄워질 메인 페이지를 개발해봅시다.

섹션 4 - 게시글 페이지 구현하기
실제 블로그 콘텐츠가 띄워지는 페이지를 구성해봅시다.

섹션 5 - 404 에러 페이지 구현하기
매우 중요한 요소이지만 쉽게 지나칠 수 있는 부분인 404 페이지를 추가해봅시다.

섹션 6 - 검색 엔진 최적화하기
내 블로그가 검색 결과 상단에 뜰 수 있도록 SEO(검색 엔진 최적화) 작업을 진행해봅시다.

섹션 7 - 배포 자동화, 구글 애널리틱스 구성 및 구글 서치 콘솔 등록하기
소스코드 또는 게시글 수정 시에 자동으로 변경 사항이 반영되도록 배포 과정을 자동화 해봅시다.
블로그 관리를 위해 애널리틱스를 연결하고, 웹 마스터 도구에 블로그를 등록해봅시다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

나만의 기술 블로그를 개발해보고 싶으신 분
개발부터 배포, SEO까지 모든 과정을 직접 겪어보고 싶으신 분

선수 지식,
필요할까요?

TypeScript
React

안녕하세요
입니다.

2,995

명

수강생

119

개

수강평

94

개

답변

4.9

점

강의 평점

2

개

강의

커리큘럼

전체

33개

섹션 1. Gatsby 알아보기 및 개발 환경 구성하기

5개

섹션 2. GraphQL을 통해 데이터 쿼리하기

2개

6. 메인 페이지에 게시글 목록 띄우기
7. 게시글 페이지에 콘텐츠 데이터 띄우기

섹션 3. 프로젝트 구성 및 레이아웃 개발하기

4개

8. 결과물 미리보기 및 컴포넌트 구상하기
9. 페이지 레이아웃 개발하기
10. SSR / Browser API를 통해 레이아웃 분리하기
11. 레이아웃 반응형 디자인 구현하기

섹션 4. 글 목록을 띄워줄 메인 페이지 개발하기

4개

섹션 5. 게시글 페이지 구현하기

8개

섹션 6. 404 에러 페이지 구현하기

2개

섹션 7. 검색 엔진 최적화하기

4개

섹션 8. 배포 자동화, 구글 애널리틱스 구성 및 구글 서치 콘솔 등록하기

4개

강의 게시일:

마지막 업데이트일:

수강평

전체

5개

5.0

5개의 수강평

거니
수강평 21
∙
평균 평점 5.0
5
30% 수강 후 작성
이전 강의 듣고 블로그 만들었는데, 업데이트 하기 위해 바로 수강!
장기철
수강평 1
∙
평균 평점 5.0
5
24% 수강 후 작성
로직박스 상단에 컴포넌트 이름을 명시해주시면 훨씬 빠른 학습이 가능할것같습니다.
- 주현도
  지식공유자
  안녕하세요 장기철님! 먼저 강의 수강해주셔서 감사드린다는 말씀부터 드리고 싶습니다 :) 모든 코드 영역 상단에 파일명과 위치를 명시해놨는데 혹시 이거랑은 다른 내용일까요??
zzz
수강평 3
∙
평균 평점 5.0
5
15% 수강 후 작성
getsby를 빠르게 적용하며 배우고 싶다면 이 강의를 추천합니다!
hj rr
수강평 12
∙
평균 평점 5.0
수정됨
5
100% 수강 후 작성
텍스트 강의이지만 아주 명쾌한 강의입니다. 덕분에 쉽고 빠르게 개츠비를 사용하여 블로그를 만들었습니다. 다만 강의에서 스타일드컴포넌트를 다루는데, 이 라이브러리가 depreciated된 만큼 강의를 보면서 다른 스타일 도구로 변경할 수 있는 수강생의 역량과 의지가 필요합니다. (저는 vanilla-extract로 하였습니다.)
totota
수강평 2
∙
평균 평점 5.0
5
97% 수강 후 작성
개츠비로 깃허브 블로그를 운영중이였는데 직접 만들고 싶었습니다!! 이강의 덕분에 많이 알아 가는것 같습니다!! 추가적으로 블로그 내 검색기능이랑 구글광고 배치에 대한 내용도 있으면 좋을것 같습니다!!

주현도님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

React 기반 Gatsby로 기술 블로그 개발하기강의 썸네일

React 기반 Gatsby로 기술 블로그 개발하기

주현도

React 기반 정적 사이트 생성 프레임워크인 Gatsby를 통해 나만의 블로그를 만들어보는 수업입니다 :)

중급이상

중급이상

블로그, Gatsby

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

[React / VanillaJS] UI 요소 직접 만들기 Part 2강의 썸네일

[React / VanillaJS] UI 요소 직접 만들기 Part 2

정재남

대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.

초급

React, vanilla-js, ui

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기강의 썸네일

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

제로초(조현영)

타입스크립트/자바스크립트로 그림판을 만들어보며 다양한 디자인 패턴의 쓰임과 장단점을 알아봅니다. canvas api를 배울 수 있는 것은 보너스!

중급이상

중급이상

디자인 패턴, 객체지향, TypeScript

@시코 - TypeScript 제대로 배우기(초중급)강의 썸네일

@시코 - TypeScript 제대로 배우기(초중급)

시니어코딩

깊이있는 수업으로 최고의 웹 개발자가 되기 위한 타입스크립트 강좌입니다. 완강 했을 때 타입스크립트의 본질을 꿰뚫을 수 있어, 다음으로 배우게 될 리액트와 넥스트, 네스트 등의 고수가 될 수 있습니다.

초급

TypeScript, React, JavaScript

코드로 배우는 React with 스프링부트 API서버강의 썸네일

코드로 배우는 React with 스프링부트 API서버

구멍가게코딩단

스프링 부트(Spring Boot ver3.4로 제작되는 API 서버와 리액트의 연동 프로젝트 완성하기! 포트폴리오 작성 부트캠프 과정 전체를 강의로 제작

초급

React, Spring Boot, JWT

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어강의 썸네일

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

초급

Firebase, React

React 기반 Gatsby로 기술 블로그 개발하기강의 썸네일

React 기반 Gatsby로 기술 블로그 개발하기

주현도

React 기반 정적 사이트 생성 프레임워크인 Gatsby를 통해 나만의 블로그를 만들어보는 수업입니다 :)

중급이상

중급이상

블로그, Gatsby

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스강의 썸네일

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편강의 썸네일

[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편

제로초(조현영)

타입스크립트 기본 문법을 배운 상태에서, 유명한 라이브러리들의 복잡한 타입을 분석하는 방법을 알아봅시다.

중급이상

중급이상

TypeScript

멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)강의 썸네일

멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)

MDU 유인동

중고급 개발자로 성장하기 위한 고급 프로그래밍 언어 활용 능력과, 함수형, 객체 지향, LISP 패러다임이 결합된 소프트웨어 설계 및 구현 능력을 기릅니다.

중급이상

중급이상

멀티 패러다임 프로그래밍, TypeScript, 함수형 프로그래밍

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)강의 썸네일

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

이동훈

MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.

초급

MongoDB, Express, React

iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

초급

React Native, React, ES6

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)강의 썸네일

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

Indie Coder

빠른 속도를 자랑하는 Node.js 프레임워크 fastify 와 orm Prisma 그리고 Typescirpt를 활용한 최신 Node.js 백엔드 REST API를 학습하는 코스

초급

Node.js, TypeScript, Prisma

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)강의 썸네일

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

중급이상

Next.js, React, GraphQL

타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

타입스크립트와 리액트 관련 강좌입니다.

중급이상

중급이상

React, TypeScript

Node.js에 TypeScript 적용하기(feat. NodeBird)강의 썸네일

Node.js에 TypeScript 적용하기(feat. NodeBird)

제로초(조현영)

Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

중급이상

중급이상

TypeScript, 웹앱, Node.js

React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

초급

React, React Native, 하이브리드 앱