🐝 Gatsby는 리액트 기반의 정적 사이트 생산 프레임워크이다.
https://www.gatsbyjs.com/docs/

Gatsby 핵심 포인트, 주의사항

렌더링될 때 데이터를 포함시키는 정적웹사이트(쇼핑몰, 블로그 등)에 적합하고 이용자별로 다른 데이터를 제공해야하는 동적인 웹사이트에는 적합하지 않다.

😉 장점

1. 최적화가 잘 된 정적 웹사이트를 빌드한다.
   • 엄청 짧은 로딩시간과 함께 js의 작은 부분과 css요소, 이미지 파일들까지 놀라울 만큼 최적화가 된다.
2. 정적웹사이트임과 동시에 reactJS사이트이기도 하다.
   • 소스코드에서 html을 다 받아오지만, 배후에서 reactJS도 같이 로드되기 때문에 reactJS가 로드되면 모든 리액트요소들이 작동하므로, 상호작용 요소를 추가할 수 있다.
3. 정적웹사이트이기 때문에 빌드과정에서 마크업이 생성되서 SEO를 챙겨갈 수 있다.
4. 마크다운으로 작성된 문서가 react element요소로 자동변환된다.
5. 프레임워크이기 때문에 라우터 등 이미 많은 기능들이 만들어져 있어서 손쉽게 만들 수 있다.

😔 단점

• 프레임워크이기 때문에 자유도가 떨어진다. (돌아가게 만들려면 무조건 프레임워크에서 정해진 룰을 따라야함)
• 파일사이즈가 기하급수적으로 늘어난다.
• SSG + CSR형태의 방식만 제공한다.
• 데이터처리는 GraphQL만 사용할 수 있다.

1. install

npm init gatsby

• Gatsby는 프레임워크이기때문에 프로젝트 생성이라는 프로세스가 필요하다.

2. 개발모드 실행

npm run develop

• 빌드 성공 후 localhost:8000으로 접속
  
• 개발모드일 때는 작동방식이 react-app과 동일하다 (CSR방식)
  - 자바스크립트 작동을 중지시키면, reatJS가 UI를 만들어주지 못하기 때문에 빈화면만 보게된다.

3. 배포모드 실행

빌드 : npm run build

• 빌드되면, 404.tsx와 index.tsx를 만들어준다.
• build/index.html로 가보면 reatJS코드(index.tsx)로 html페이지가 만들어져 있는걸 볼 수 있다.

배포모드 실행:npm runu serve

• localhost:9000으로 접속
• 자바스크립트 작동을 중지시켜도 Gatsby에 의해 완성된 html을 받아오게 되므로 문제없이 동작한다.

4. 라우터

• Gatsby는 프레임워크이기 때문에 이미 여러 기능들이 구현된 환경속에서 규칙에 따라 코드를 짜주기만 하면 된다. 그만큼 자유도는 떨어지지만, 다른거 신경안쓰고 페이지만 만들면 되기때문에 손쉽게 구현 가능하다.
• 라우터를 따로 만들지 않더라도, pages폴더안에 페이지를 만들면 파일명 주소로 페이지가 생성됨
  
  

5. 레이아웃

📍 네비게이션

• <Link>는 리액트 라우터에서 온게 아니라 Gatsby자체에서 온 것으로, 페이지간 이동을 시켜준다. (리액트 라우터 돔을 따로 설치안해도 잘 작동함)

• navigation 컴포넌트를 생성하고, 각 분리된 페이지를 navigation컴포넌트로 감싼다.

  create-react-app에 있던것들이 Gatsby에는 없기 때문에 create-react-app의 index.js처럼 네비게이션바를 포함한 모든 경로들을 import시키는 총체적(?)파일이 없기 때문.
  👉🏻 그래서 각 페이지들을 통일되게 보이게 하려면, 그 틀이되는 컴포넌트를 생성하고 각 페이지를 감싸주는 방법을 사용한다.

🧢 Head 컴포넌트

• Head라는 컴포넌트를 export하면, 그 안의 컨텐츠가 웹사이트 head에 들어가게 된다.