gastby

Gatsby는 엄청나게 빠른 웹사이트와 앱을 구축할 수 있도록 도와주는 React 기반의 무료 오픈 소스 프레임워크입니다.
동적으로 렌더링되는 사이트의 제어 및 확장성과 정적 사이트 생성 속도를 결합하여 완전히 새로운 가능성의 웹을 만듭니다.

 

library: import하고 사용하는 것 

framework: 내가 짠 코드를 파일에 배치하고 개츠비가 소환해

 

리액트 룰 위에 개츠비 룰이 따로있음. 따라서 component,state등등 모든기능 작동 o

---

설치 방법

터미널에

npm i -g gatsby-cli  개츠미 커맨드 설치

 

생성한 폴더에 들어가

gatsby new로 

gatsby 앱 생성하면 됨.

 

---

정적 웹사이트: 블로그, 전자상거래 

동적 웹사이트: sns, 넷플릭스 

 

구매대행 사이트한다면 create react app이 필요하진 않을 거임 그많은 기능 필요 x  html css 빨리 로드하는게 관건

 

 

create React app웹사이트로 가면 브라우저저가 js다운로드해서 구동시켜서 ui보여주는것 

클라이언트가 js를 못쓰는 상황이거나 js가 느리거나 로드되지않으면 아무것도 않음 . 

gatsby 개발모드일도 같은 방식 

 

페이지 소스를 보면 컨텐츠는 div한줄임 

 

 

 

gatsby로 build 한 사이트는 html에 모든 것이 담겨있기 때문에 자바스크립트 로드와 상관없다

로드가  빠른  정적인 웹사이트  만드는데 도움을 줌 

ex)로딩이 오래걸리는 블로그는 별로잖습니까

뒤에서reactjs도 같이 작동하기 때문에 state,fetch모두 사용가능

장점 ) 빠르게 로드되는 정적인 웹사이트, reactJs도 모두 작동가능

npm run build , npm run serve

---

 

Routing

Gatsby는 src/pages 안에 각 .js 파일에 대한 페이지를 생성합니다.
예를 들어 src/pages/contact.js는 yoursite.com/contact 페이지를 생성하고 src/pages/home.js는 yoursite.com/home 페이지를 생성합니다.

 

 

 

Layout Components
Gatsby는 기본적으로 레이아웃을 페이지에 자동으로 적용하지 않습니다
Layout Component를 사용하면 전체 머리글 및 바닥글, 그리고 일부 페이지에서는 사이드바를 사용하거나 레이아웃과 페이지 컴포넌트 간에 데이터를 전달할 수 있습니다.
https://www.gatsbyjs.com/docs/how-to/routing/layout-components/

Gatsby Head API

Head 컴포넌트를 export하면 그 안의 컨텐츠가 웹사이트 head에 들어가게 됨
Gatsby에는 페이지의 문서 헤드에 요소를 추가할 수 있는 내장 head가 포함되어 있습니다.
react-helmet 또는 기타 유사한 솔루션과 비교할 때 Gatsby Head는 사용하기 쉽고 성능이 우수하며 번들 크기가 더 작고 최신 React 기능을 지원합니다.
ex) export const Head = () => < title>Home Page< /title>
https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/

 

---

보통 html만 구현되고 fetch하는데 로딩시간이걸림

처음에  html과 함께 가져오고싶음 -> graphQL

query language 데이터베이스에서 뭘 꺼내오는 언어

 

develop모드나 npm run start 으로 돌리면 localhost 뿐만 아니라 lhttp://localhost:8000/___graphql도 받게됨

 

 

useStaticQuery (정적 쿼리 사용)
useStaticQuery는 빌드 시(로딩할 필요없음) 리액트 훅을 사용하여 Gatsby의 GraphQL 데이터 계층을 쿼리하는 기능을 제공합니다. 이를 통해 React 컴포넌트는 구문 분석, 평가 및 컴포넌트에 삽입될 GraphQL 쿼리를 통해 데이터를 검색할 수 있습니다.
useStaticQuery 훅은 모든 컴포넌트 또는 페이지에서 사용할 수 있습니다.
```
const data = useStaticQuery(graphql`
query HeaderQuery {
   site {
     siteMetadata {
        title
}
}
}
`)
```
https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/graphql-api/#usestaticquery

GraphQL Typegen
https://www.gatsbyjs.com/docs/how-to/local-development/graphql-typegen/

---

지금까지 GATSBY-CONIFG에 정리되어있는 사이트정보만 받아왔음.GATSBY가 보는 데이터양 늘리기

npm install gatsby-source-filesystem

나의 파일을 개츠비가 확인할 수 있도록 도와줌

gatsby config 파일 안에 plugin 설정,  blog-posts 폴더와 내부 파일 생성

 

GASTBY  query 매직 

 export  const query 하는 것만으로 데이터 전달가능 

 

 

일일히 li로 넣는 것보다 훨씬 수고를 덜었음.

 

 

graphItypegen :true 설정

 gastby가 자동적으로 쿼리읽고 맞는 타입 생성함

gatsby-types.d.ts 맨아래에서 확인가능 

<Quries.니쿼리이름Query>로 사용가능 

export default function blogs({ data }: PageProps<Queries.BlogTitlesQuery>) {
    return (
        <Layout title="Blog">
            <ul>
                {data.allFile.nodes.map((file, index) => (
                    <li key={index}>{file.name}</li>
                ))}
            </ul>
        </Layout>
    );
}

export const query = graphql`
    query BlogTitles {
        allFile {
            nodes {
                name
            }
        }
    }
`;