/
Gatsby v5를 통해 직접 나만의 기술 블로그를 개발해보는 강의입니다.
수강생 53명
거니
수강평 21 ・평균 평점 5.0
5.0
이전 강의 듣고 블로그 만들었는데, 업데이트 하기 위해 바로 수강!
장기철
수강평 1 ・평균 평점 5.0
로직박스 상단에 컴포넌트 이름을 명시해주시면 훨씬 빠른 학습이 가능할것같습니다.
zzz
수강평 3 ・평균 평점 5.0
getsby를 빠르게 적용하며 배우고 싶다면 이 강의를 추천합니다!
totota
수강평 2 ・평균 평점 5.0
개츠비로 깃허브 블로그를 운영중이였는데 직접 만들고 싶었습니다!! 이강의 덕분에 많이 알아 가는것 같습니다!! 추가적으로 블로그 내 검색기능이랑 구글광고 배치에 대한 내용도 있으면 좋을것 같습니다!!
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 - 배포 자동화, 구글 애널리틱스 구성 및 구글 서치 콘솔 등록하기소스코드 또는 게시글 수정 시에 자동으로 변경 사항이 반영되도록 배포 과정을 자동화 해봅시다.블로그 관리를 위해 애널리틱스를 연결하고, 웹 마스터 도구에 블로그를 등록해봅시다.
React 기반 Gatsby로 기술 블로그 개발하기
무료 강의이지만, 구버전인 Gatsby v3를 사용합니다.그만큼 상대적으로 API 사용이 편리하지 않아 난이도가 생각보다 높을 수 있고, 진행하면서 에러가 많이 발생할 수 있습니다.
✔ TypeScript와 React
✔ 기초적인 HTML, CSS 내용
본 강의는 이전 강의와 동일하게 텍스트 형태의 강의로, 별도 영상을 제공하고 있지 않으니 참고 바랍니다!
학습 대상은 누구일까요?
나만의 기술 블로그를 개발해보고 싶으신 분
개발부터 배포, SEO까지 모든 과정을 직접 겪어보고 싶으신 분
선수 지식, 필요할까요?
TypeScript
React
2,976
명
수강생
116
개
수강평
94
답변
4.9
점
강의 평점
2
강의
전체
33개
섹션 1. Gatsby 알아보기 및 개발 환경 구성하기
5개
가파르게 성장하고 있는 Gatsby
Gatsby v3에서 v5가 되기까지
Gatsby 블로그 개발 환경 구성하기
게시글 관리를 위한 Contentful CMS 설정하기
Gatsby 프로젝트 생성 및 개발 환경 구성하기
섹션 2. GraphQL을 통해 데이터 쿼리하기
2개
메인 페이지에 게시글 목록 띄우기
게시글 페이지에 콘텐츠 데이터 띄우기
섹션 3. 프로젝트 구성 및 레이아웃 개발하기
4개
결과물 미리보기 및 컴포넌트 구상하기
페이지 레이아웃 개발하기
SSR / Browser API를 통해 레이아웃 분리하기
레이아웃 반응형 디자인 구현하기
섹션 4. 글 목록을 띄워줄 메인 페이지 개발하기
소개 문구, 카테고리 컴포넌트 개발하기
게시글 목록 부분 개발하기
게시글 목록에 Masonry 레이아웃 및 인피니티 스크롤 적용하기
메인 페이지 반응형 디자인 구현하기
섹션 5. 게시글 페이지 구현하기
8개
게시글 정보 컴포넌트 구현하기
게시글 렌더링 컴포넌트 구현하기
게시글 렌더링 커스터마이징하기 (1)
게시글 렌더링 커스터마이징하기 (2)
댓글 컴포넌트 추가하기
플로팅 목차 컴포넌트 구현하기 (1)
플로팅 목차 컴포넌트 구현하기 (2)
게시글 페이지 반응형 디자인 구현하기
섹션 6. 404 에러 페이지 구현하기
404 에러 페이지가 왜 중요할까?
404 에러 페이지 개발하기
섹션 7. 검색 엔진 최적화하기
Gatsby Head API를 통한 메타 태그 정의하기
Canonical Link Element 추가하기
Sitemap 생성하기
robots.txt 파일 생성하기
섹션 8. 배포 자동화, 구글 애널리틱스 구성 및 구글 서치 콘솔 등록하기
Github Actions로 배포 자동화 구성하기
Contentful Webhook 설정하기
구글 애널리틱스 추가하기
구글 서치 콘솔에 블로그 등록하기