Gatsby 시작하기 - 개발 환경 설정

Gatsby를 만들기 위한 준비물이 뭐가 있을까? 
필요한 프로그램 설치 후에 gatsby 프로젝트 생성(2가지 방법)이 있다.

1. Git 설치 - https://www.atlassian.com/git/tutorials/install-git

2. Node 설치 - https://nodejs.org/ko/

3. gatsby-cli 설치

npm install -g gatsby-cli

---

빠른 개발 환경  - Starter

gatsby new 프로젝트명 https://github.com/gatsbyjs/gatsby-starter-blog

gatsby develop 또는 npm run develop

세팅 끝 !!

심플한 블로그 템플릿이 보일 것이다. 여기에 필요한 개츠비 플러그인을 설치하여서 개발하면 편하다.

---

수동으로 개발 환경 - gatsby new

Gatsby에 튜토리얼에 자세하게 나와있다. https://www.gatsbyjs.com/docs/tutorial/part-1

이번에는 다시 gatsby를 공부한다는 생각으로 수동으로 진행하였다. 
gatsby new 입력하면 아래와 같이 이쁘게 나온다. v2에서는 이러지 않았던거로 기억이 되어진다...

자신이 하고 싶은 옵션을 넣고 진행하면 된다.

 

 

gatsby develop 또는 npm run develop

그러면 localhost:8000 과 http://localhost:8000/___graphql 가 보이면 잘 작동이 되고 있는 것이다. 
개발 환경은 이것으로 끝!!!!

 

---

폴더 구조

 contents - 블로그 포스트 관련 파일들을 저장하기 위한 디렉토리입니다.

 src
      -> components - react Component를 저장하기 위한 디렉토리
      -> hooks - custom Hooks을 저장하기 위한 디렉토리
      -> pages - 페이지의 역할을 하는 컴포넌트를 저장하기 위한 디렉토리
                       - gatsby 기본규칙으로 브라우저에서 pages 디렉토리에 있는 파일의 이름을 통해 페이지에 접근(url 경로)
      -> templates - Gatsby에서 제공하는 API를 통해 이 디렉토리에 저장된 템플릿 컴포넌트로 여러 페이지를 생성
                             - 같은 형식의 여러 콘텐츠를 보여주는 컴포넌트를 저장하기 위한 디렉토리

---

플러그인 - 추후 보충

Typescript + ESLint + Prettier 설정

gatsby-config.js 설정

 

다음에는 Gatsby Graphql를 진행!!!