Thumbnail
개발 · 프로그래밍 프론트엔드

React 기반 Gatsby로 기술 블로그 개발하기 대시보드

(4.9)
105개의 수강평 ∙  2,713명의 수강생

무료

지식공유자: 주현도
총 37개 수업
수강기한: 
무제한
수료증: 미발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

중급자를 위해 준비한
[프론트엔드] 강의입니다.

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

✍️
이런 걸
배워요!
Gatsby 프레임워크를 다루는 방법
타입스크립트로 리액트 컴포넌트 작성하는 방법
SEO 및 웹 접근성 향상 조치 방법
블로그 배포 방법

 

해당 강의는 런칭 시점 기준 버전인 Gatsby v3를 사용하고 있습니다.
따라서 새롭게 강의를 수강하는 분들은 버전에 유의해주세요!
현재 새로운 버전을 사용한 강의를 준비중이며,
그에 따라 더 이상 커뮤니티 관리를 하지 않으니 참고 부탁드립니다.

 


 

직접 만드는 나만의 기술 블로그,
React Gatsby로 쉽고 재미있게 🔧

개발 실력을 높이는
기술 블로그의 힘.

개발자라면 한 번쯤 들어보셨을 것입니다. 기술 블로그가 개발 실력 향상에 도움이 된다는 말을요.
저 역시 실제로 도움이 된다고 생각합니다. 자신이 배운 내용을 정리하는 과정에서 모르는 내용을 발견할 수도 있고, 다시 이를 찾아보는 과정을 통해 내 기술력을 성장시킬 수 있기 때문입니다.


기술 블로그 개발을 둘러싼
수많은 고민들!

  • 개발 스택 선정은 어떻게?
  • 검색 엔진 최적화(SEO)는 어떻게 해결할지?
  • 어떤 개발 과정을 거쳐야 하는지?

무엇이든 처음이 가장 어려운 법입니다. 기술 블로그도 마찬가지죠. 이미 많은 개발자들이 기술 블로그를 운영하고 있지만, 신경써야 할 요소가 많다 보니 적지 않은 분들이 어떻게 블로그 개발을 시작할지 막막함을 느끼곤 합니다.

하지만 이 모든 과정을 따라올 수 있도록 알려주는 도우미가 있다면 어떨까요? 더 쉽고 편하게 기술 블로그를 개발할 수 있지 않을까요? 이 강의는 바로 이런 고민에서 출발합니다.


요즘 대세, 
리액트 개츠비로 만드는 
쉽고 빠른 블로그 개발.

Gatsby.js?

개츠비는 현재 가장 인기있는
프론트엔드 라이브러리 리액트(React) 기반의
정적 사이트 생성 프레임워크입니다.

이 강의에서는 최근 프론트엔드 시장에서 빠르게 성장하고 있는 JAM Stack 기반의 프레임워크 중에서 정적 사이트 생성 프레임워크인 Gatsby로 기술 블로그를 개발해 봅니다.

뿐만 아니라, 점점 더 많은 프론트엔드 개발자들이 사용하고 있는 타입스크립트(TypeScript)를 통해 리액트 애플리케이션을 작성하는 방법도 함께 배울 수 있습니다.


직접 만들어보세요,
나만의 기술 블로그!

이 강의에서 만들어볼 블로그를 미리 확인할 수 있어요. (바로가기)


이 강의를 만든
지식공유자를 소개합니다.

주현도

더 나은 개발자가 되기 위해 노력하는 주니어 개발자입니다.

  • 한국디지털미디어고등학교 졸업
  • 서울시립대학교 수학과 재학 중
  • 스타트업 "크날개발" 웹 프론트엔드 개발자 (2019)
  • 서울시립대학교 멋쟁이 사자처럼 강의자 (2019)
  • 스타트업 "하이 프로토콜" 웹 프론트엔드 개발자 (2022 ~)

순서대로 학습해보세요!

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

섹션 1 - 간단하게 페이지 띄워보기
Gatsby로 생성한 프로젝트를 실행해 웹 사이트를 띄워봅시다.

섹션 2 - 글 목록을 띄워 줄 메인 페이지 구현하기
블로그 콘텐츠 목록이 띄워질 메인 페이지의 틀을 구성해봅시다.

섹션 3 - 메인 페이지에 실제 데이터 띄워보기
GraphQL을 통해 가져온 데이터를 메인 페이지에 띄워봅시다.

섹션 4 - 포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기
메인 페이지에 보이는 콘텐츠를 클릭하면 페이지가 이동되도록 링크를 연결해봅시다.

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

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

섹션 7 - 검색 엔진 최적화 및 웹 접근성 향상 조치하기
누구나 사용할 수 있게 웹 접근성 표준을 맞춰보고, 검색 결과 상단에 뜨도록 SEO 작업을 진행해봅시다.

섹션 8 - 사이트 배포 및 웹 마스터 도구에 사이트 등록하기
개발한 블로그를 배포해보고, 검색 엔진이 검색할 수 있도록 웹 마스터 도구에 블로그를 등록해봅시다.

수강 전 확인해주세요!

  • 본 강의는 텍스트 형태의 강의로, 별도 영상을 제공하지 않습니다 😀

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
React를 통해 블로그를 개발하고 싶으신 분
TypeScript로 React 앱을 개발하고 싶으신 분
📚
선수 지식,
필요할까요?
JavaScript
CSS
React

안녕하세요
주현도 입니다.
주현도의 썸네일

안녕하세요,
더 나은 개발자가 되기 위해 노력하는 주니어 웹 개발자입니다 :)

기술 블로그 링크

커리큘럼 총 37 개
이 강의는 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 간단하게 페이지 띄워보기
TypeScript로 컴포넌트 작성하기
GraphQL Query 알아보기
Gatsby에서의 페이지 이동 방법
섹션 2. 글 목록을 띄워 줄 메인 페이지 구현하기
EmotionJS 라이브러리란 무엇일까?
EmotionJS 라이브러리를 통한 컴포넌트 스타일링 방법
메인 페이지의 기본적인 틀 만들기
카테고리 목록 컴포넌트 구현하기
게시글 목록 부분 컴포넌트 구현하기
메인 페이지 반응형 디자인 구현하기
섹션 3. 메인 페이지에 실제 데이터 띄워보기
Markdown 파일을 사용하기 위한 라이브러리 세팅하기
Markdown 파일 추가 후, GraphQL Query 확인해보기
메인 페이지에서 Props로 받아 포스트 데이터 출력하기
gatsby-plugin-image 라이브러리로 최적화된 썸네일 사진 띄워주기
카테고리 생성 및 카테고리별로 포스트 아이템 띄워주기
인피니티 스크롤 기능 구현하기
섹션 4. 포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기
Slug에 대해 알아보고, 데이터 추가해보기
포스트 아이템 링크 연결 및 게시글 페이지 생성하기
템플릿 컴포넌트 내에서 Slug에 맞는 데이터 조회하기
섹션 5. 게시글 페이지 구현하기
메인 페이지와 중복되는 부분 분리하기
게시글 페이지 상단 부분 구현하기
마크다운 형식의 포스트 출력하기
Utterances 위젯 추가하기
게시글 페이지 반응형 디자인 구현하기
섹션 6. 404 에러 페이지 구현하기
404 에러 페이지의 중요성
404 에러 페이지 구현하기
섹션 7. 검색 엔진 최적화 및 웹 접근성 향상 조치하기
Meta Tag 추가하기
Canonical Link Element 추가하기
Sitemap 생성하기
robots.txt 파일 생성하기
Semantic Tag 추가 및 기본 언어 설정하기
섹션 8. 사이트 배포 및 웹 마스터 도구에 사이트 등록하기
Github Pages 알아보기 및 배포 준비
블로그 배포하기
웹 마스터 도구에 블로그 등록하기
강의 게시일 : 2021년 05월 07일 (마지막 업데이트일 : 2021년 05월 07일)
수강평 총 105개
수강생분들이 직접 작성하신 수강평입니다.
4.9
105개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
똘똘이스머프 thumbnail
5
강의 감사합니다.
2023-02-07
지식공유자 주현도
강의 관심가지고 수강해주셔서 감사드립니다 :)
2023-03-06
유정수 thumbnail
5
이런 강의가 무료라니 최고입니다!!!
2023-02-08
지식공유자 주현도
무료 강의라도 좋은 강의 꼭 내고 싶었습니다 ㅎㅎ 감사합니다!
2023-03-06
박상혁 thumbnail
5
좋은 강의 무료로 주셔서 감사합니다!:)
2023-02-04
지식공유자 주현도
해당 강의로 많은 도움을 받으셨으면 좋겠습니다 감사합니다 ㅎㅎ
2023-03-06
porar thumbnail
4
리액트를 공부하며 취업을 준비하고 있습니다. Gatsby에 대해서 관심이 많았고~ 강의가 올라와서 너무 좋네요!! 텍스트로 진행하는 강의 마음에 들었구요, 무료인것도 좋네요 감사합니다.
2021-05-10
지식공유자 주현도
영상 강의를 준비할 수 없는 환경이라 다른 강의에 비해 퀄리티가 좀 떨어질 것 같다는 걱정이 많이 들었는데 다행이네요! 감사합니다 :)
2021-05-23
wjdgpwls0528 thumbnail
5
깔끔한 코드와 친절한 설명들이 있어서 완강 할 수 있었습니다 ! 이런 강의가 무료라는게 믿기지가 않네요 ! 이제부터 블로그를 제 스타일대로 이것 저것 해보면서 꾸며보고 코드 다시 보고 공부해봐야겠어요 ! 감사합니다~~!
2023-01-20
지식공유자 주현도
부족한 강의인데도 관심있게 들어주셔서 감사합니다!
2023-03-06