누구나 블로그 개발 할 수 있다! React 기반 Gatsby로 기술 블로그 개발하기 - goormEDU
오늘은 9름데이!
지금 모든 강좌 10% 추가 할인10% 추가 할인받으세요.
ll:ll:ll후에 종료됩니다.
All Lectures
RouteNoticeQ&A

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

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

Lecture Introduction
Difficulty
Normal
Category
Web Programming - Programming
Tag
리액트, 자바스크립트
Certificate
You can issue a certificate of completion
Target Audience
- 나만의 기술 블로그를 개발하여 운영하고 싶으신 분
- 프론트엔드 라이브러리인 React에 대한 지식이 어느정도 있는 분
- 동영상보다 글로 된 설명으로 학습하는 것이 더 효과적이신 분


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



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

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

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

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

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




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

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

"시작이 반이다"

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

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

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




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

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

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

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

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

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

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






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



주현도

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


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

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


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

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



all Icon made by Freepik from www.flaticon.com

Curriculum
Expand All
  • 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 알아보기 및 배포 준비
    블로그 배포하기
    웹 마스터 도구에 블로그 등록하기
Instructor Introduction
TipFor more detailed information, such as other courses and reviews from the instructor, you can view the instructor introduction page by clicking on their profile.

Lecture Reviews
Free

Average Rating
5.0
Difficulty
Normal
Lecture Period
Unlimited