gatsby

source: categories/study/gatsby/README.md

• 1 Gatsby 알아보기 및 개발 환경 구성하기 - Gatsby란 무엇일까?
• 1 Gatsby 알아보기 및 개발 환경 구성하기 - Gatsby를 위해 필수로 알아야 할 기술
• 2 Gatsby 알아보기 및 개발 환경 구성하기 - Gatsby 프로젝트 생성하기
• 3 Gatsby 알아보기 및 개발 환경 구성하기 - TypeScript 개발 환경 구성하기
• 4 간단하게 페이지 띄워보기 - TypeScript로 컴포넌트 작성하기
• 5 간단하게 페이지 띄워보기 - GraphQL Query 알아보기
• 6 간단하게 페이지 띄워보기 - Gatsby에서의 페이지 이동 방법
• 7 글 목록을 띄워 줄 메인 페이지 구현하기 - EmotionJS 라이브러리란 무엇일까?
• 8 글 목록을 띄워 줄 메인 페이지 구현하기 - EmotionJS 라이브러리를 통한 컴포넌트 스타일링 방법
• 9 글 목록을 띄워 줄 메인 페이지 구현하기 - 메인 페이지의 기본적인 틀 만들기
• 10 글 목록을 띄워 줄 메인 페이지 구현하기 - 카테고리 목록 컴포넌트 구현하기
• 11 글 목록을 띄워 줄 메인 페이지 구현하기 - 게시글 목록 부분 컴포넌트 구현하기
• 12 글 목록을 띄워 줄 메인 페이지 구현하기 - 메인 페이지 반응형 디자인 구현하기
• 13 메인 페이지에 실제 데이터 띄워보기 - Markdown 파일을 사용하기 위한 라이브러리 세팅하기
• 14 메인 페이지에 실제 데이터 띄워보기 - Markdown 파일 추가 후, GraphQL Query 확인해보기
• 15 메인 페이지에 실제 데이터 띄워보기 - 메인 페이지에서 Props로 받아 포스트 데이터 출력하기
• 16 메인 페이지에 실제 데이터 띄워보기 - gatsby-plugin-image 라이브러리로 최적화된 썸네일 사진 띄워주기
• 17 메인 페이지에 실제 데이터 띄워보기 - 카테고리 생성 및 카테고리별로 포스트 아이템 띄워주기
• 18 메인 페이지에 실제 데이터 띄워보기 - 인피니티 스크롤 기능 구현하기
• 19 포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기 - Slug에 대해 알아보고, 데이터 추가해보기
• 20 포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기 - 포스트 아이템 링크 연결 및 게시글 페이지 생성하기
• 21 포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기 - 템플릿 컴포넌트 내에서 Slug에 맞는 데이터 조회하기
• 22 게시글 페이지 구현하기 - 메인 페이지와 중복되는 부분 분리하기
• 23 게시글 페이지 구현하기 - 게시글 페이지 상단 부분 구현하기
• 24 게시글 페이지 구현하기 - 마크다운 형식의 포스트 출력하기
• 25 게시글 페이지 구현하기 - Utterances 위젯 추가하기
• 26 게시글 페이지 구현하기 - 게시글 페이지 반응형 디자인 구현하기
• 27 404 에러 페이지 구현하기 - 404 에러 페이지의 중요성