누구나 블로그 개발 할 수 있다! React 기반 Gatsby로 기술 블로그 개발하기

React 기반 프레임워크인 Gatsby에 TypeScript를 곁들인 기술 블로그를 개발해봅시다.

클래스 소개
난이도
보통
카테고리
웹 프로그래밍 - 프로그래밍
태그
리액트, 자바스크립트
수료증
발급 가능
추천 학습대상
- 나만의 기술 블로그를 개발하여 운영하고 싶으신 분
- 프론트엔드 라이브러리인 React에 대한 지식이 어느정도 있는 분
- 동영상보다 글로 된 설명으로 학습하는 것이 더 효과적이신 분


※ 본 강좌는 텍스트로 이루어진 강좌입니다 ※



다른 사람 모두 기술 블로그 운영하던데,
내 기술 블로그는 어떻게 하지?

기술 블로그를 운영한다는 것은
기술력 발전의 지름길이라고 생각합니다

글을 작성하며 그 내용을 리마인드 할 수 있을뿐더러
발전 과정을 기록으로 남길 수 있기 때문입니다

하지만 실제로 시작하려고 하면 얼마 가지 못해
포기하는 경우가 다반사입니다

저도 그런 개발자 중 한 명이었기에 알고 있죠 :)




개발자의 기술 블로그,
저와 함께 시작해보세요

이 상황에서는 아래 명언이 제일 적합한 것 같습니다

"시작이 반이다"

뭐든지 제일 처음이 가장 어려운 법입니다

기술 블로그도 마찬가지로 어떻게 시작해야 할지
몰라서 포기하는 경우가 대부분이죠

하지만 블로그 개발부터 검색 엔진 최적화까지
도움받을 수 있는 길잡이가 있다면 어떨까요?




내 블로그 == 내 포트폴리오

Medium, Tistory, Brunch 등
세상에는 정말 많은 블로그 플랫폼이 존재합니다

하지만 웹 개발자라면 내 손으로 직접 개발한
개성 넘치는 블로그를 한번쯤 꿈꾸셨을 거에요

직접 개발한 블로그도 하나의 웹 사이트로
포트폴리오 작품이 될 수 있습니다

최근 들어 핫하게 떠오르는 React 기반의
정적 사이트 생성기인
Gatsby와,
이제는 선택이 아닌 필수가 되어버린
TypeScript로 견고한 블로그를 개발해봅시다

저희가 만들 결과물을 미리 확인해보세요!

https://hyun-graffiti.github.io/






이 강좌를 제작한
저는 어떤 사람이냐구요?



주현도

하루하루 더 발전하기 위해 노력하는 주니어 개발자입니다 :)


한국디지털미디어고등학교 졸업

서울시립대학교 수학과 재학 중


前 스타트업 크날개발 웹 프론트엔드 개발자

前 서울시립대학교 멋쟁이 사자처럼 강의자



all Icon made by Freepik from www.flaticon.com

교육 과정
모두 펼치기
  • 01
    Gatsby 알아보기 및 개발 환경 구성하기
  • Gatsby란 무엇일까?
    Gatsby를 위해 필수로 알아야 할 기술
    Gatsby 프로젝트 생성하기
    TypeScript 개발 환경 구성하기
  • 02
    간단하게 페이지 띄워보기
  • TypeScript로 컴포넌트 작성하기
    GraphQL Query 알아보기
    Gatsby에서의 페이지 이동 방법
  • 03
    글 목록을 띄워 줄 메인 페이지 구현하기
  • EmotionJS 라이브러리란 무엇일까?
    EmotionJS 라이브러리를 통한 컴포넌트 스타일링 방법
    메인 페이지의 기본적인 틀 만들기
    카테고리 목록 컴포넌트 구현하기
    게시글 목록 부분 컴포넌트 구현하기
    메인 페이지 반응형 디자인 구현하기
  • 04
    메인 페이지에 실제 데이터 띄워보기
  • Markdown 파일을 사용하기 위한 라이브러리 세팅하기
    Markdown 파일 추가 후, GraphQL Query 확인해보기
    메인 페이지에서 Props로 받아 포스트 데이터 출력하기
    gatsby-plugin-image 라이브러리로 최적화된 썸네일 사진 띄워주기
    카테고리 생성 및 카테고리별로 포스트 아이템 띄워주기
    인피니티 스크롤 기능 구현하기
  • 05
    포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기
  • Slug에 대해 알아보고, 데이터 추가해보기
    포스트 아이템 링크 연결 및 게시글 페이지 생성하기
    템플릿 컴포넌트 내에서 Slug에 맞는 데이터 조회하기
  • 06
    게시글 페이지 구현하기
  • 메인 페이지와 중복되는 부분 분리하기
    게시글 페이지 상단 부분 구현하기
    마크다운 형식의 포스트 출력하기
    Utterances 위젯 추가하기
    게시글 페이지 반응형 디자인 구현하기
  • 07
    404 에러 페이지 구현하기
  • 404 에러 페이지의 중요성
    404 에러 페이지 구현하기
  • 08
    검색 엔진 최적화 및 웹 접근성 향상 조치하기
  • Meta Tag 추가하기
    Canonical Link Element 추가하기
    Sitemap 생성하기
    robots.txt 파일 생성하기
    Semantic Tag 추가 및 기본 언어 설정하기
  • 09
    사이트 배포 및 웹 마스터 도구에 사이트 등록하기
  • Github Pages 알아보기 및 배포 준비
    블로그 배포하기
    웹 마스터 도구에 블로그 등록하기
마지막 업데이트|2021년 11월 29일
강의자 소개
안녕하세요. 구름에듀 캡틴 주현도입니다. 함께 학습을 시작해봐요!

강좌 후기
무료

평균평점
5.0
난이도
보통
수강기간
평생 무제한