개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 3개

수강생 39명

이런 걸
배워요!

  • Gatsby 프레임워크 사용 방법

  • React를 사용한 프론트엔드 개발

  • 검색 엔진 최적화

  • 블로그 배포 자동화

  • CMS(콘텐츠 관리 시스템)을 활용한 블로그 글 관리

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

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



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

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

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

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

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


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

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

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

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

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

💡 개발, 배포, SEO까지 모든 과정을 직접 경험할 수 있다는 장점은 그대로 가져왔습니다.

  • 블로그 배포 이후의 관리를 더욱 용이하게 할 수 있는 다양한 내용을 추가했습니다.

  • 손쉽게 블로그의 기능을 확장할 수 있도록 더욱 간단하게 코드 베이스를 구성했습니다.

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


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

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

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

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

저희가 만들 블로그는 이렇습니다.

메인 페이지 (데스크탑 화면)

게시글 페이지 (데스크탑 화면)

태블릿 화면과 모바일 화면은 데스크탑 화면과 유사하여 포함하지 않았습니다.

강의 내용은 이렇습니다.

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

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

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

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

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

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

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

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

수강 전 참고 사항


Q. 무료 강의를 대신 수강해도 상관 없을까요?

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

무료 강의이지만, 구버전인 Gatsby v3를 사용합니다.
그만큼 상대적으로 API 사용이 편리하지 않아 난이도가 생각보다 높을 수 있고, 진행하면서 에러가 많이 발생할 수 있습니다.

Q. 필요한 선수 지식이 있을까요?

TypeScript와 React

기초적인 HTML, CSS 내용


Q. 별도 영상을 제공하지 않나요?

본 강의는 이전 강의와 동일하게 텍스트 형태의 강의로, 별도 영상을 제공하고 있지 않으니 참고 바랍니다!

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 나만의 기술 블로그를 개발해보고 싶으신 분

  • 개발부터 배포, SEO까지 모든 과정을 직접 겪어보고 싶으신 분

선수 지식,
필요할까요?

  • TypeScript

  • React

현재 대학생이면서 스타트업에서 풀스택 개발자로 근무하고 있습니다.

커리큘럼

전체

33개

  • 메인 페이지에 게시글 목록 띄우기

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!