contentful

컨텐츠관리 시스템 Contentful
Contentful은 모든 디지털 채널에서 콘텐츠를 생성, 관리 및 게시할 수 있는 콘텐츠 플랫폼입니다. Headless CMS라 불리기도 하는 Contentful은 컨텐츠를 관리하기 위한 모든 역할을 수행할 수 있습니다.
- 컨텐츠에 대한 상태관리
- 이미지 리사이징 및 프리뷰 등 다양한 최적화 기능 제공
https://www.contentful.com/
https://app.contentful.com/spaces/b6jgybwf0ibf/content_types

gatsby-source-contentful
npm install gatsby-source-contentful gatsby-plugin-image
https://www.gatsbyjs.com/plugins/gatsby-source-contentful

dotenv
npm i dotenv

개발자가 아닌 사람들이 좋은 ui로 컨텐츠를 실을 수있음
우리의 업무 :그 데이터를 gatsby 로 가져오는 것


gatsby공식 사이트에서 

gatsby-source-contentful,
dotenv 깔고

.env파일 생성
gastby-config.ts 설정 

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `your_space_id`,
        // Learn about environment variables: https://gatsby.dev/env-vars
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        host: `preview.contentful.com`,
      },
    },
    `gatsby-plugin-image`,
  ],
}

contentful 사이트 setting 에서 space id, token 긁어서 gatsbyconfig.js와  .env각  파일에 맞게 작성

reuqire(".dotenv").config(); //// env파일 불러와서 access token 채워라 

 

-->graphiql 에서 allcontent~~~로 확인가능 

 

index.tsx 

import * as React from "react";
import { graphql, HeadFC, PageProps } from "gatsby";
import Layout from "../components/Layout";
import Seo from "../components/Seo";
import { GatsbyImage, getImage } from "gatsby-plugin-image";

export default function IndexPage({ data }: PageProps<Queries.StickersQuery>) {
    return (
        <Layout title="Welcome to dev-stickers">
            {data.allContentfulStickerPack.nodes.map((sticker) => (
                <article>
                    <GatsbyImage
                        image={getImage(sticker.preview?.gatsbyImageData!)!}
                        alt={sticker.name!}
                    />
                    <h2>{sticker.name}</h2>
                    <h4>${sticker.price}</h4>
                </article>
            ))}
        </Layout>
    );
}

export const query = graphql`
    query Stickers {
        allContentfulStickerPack {
            nodes {
                name
                price
                preview {
                    gatsbyImageData(placeholder: BLURRED)
                }
            }
        }
    }
`;

export const Head = () => <Seo title="home" />;

 

pages> products> {contentfulStickerPack.id}.tsx //graphql에서 나타난대로

import React from "react";

export default function ProductDetail() {
    return <h1>hi</h1>;
}

 

src > style.css 생성

body{background:tomato};

최상단에 gatsby-browser.ts 생성

import "./src/style.css"; 하고 

서버 재시작하면 적용 된 걸 볼 수 있다.

 

 

pico css 적용

style.css에

@import url("https://unpkg.com/@picocss/pico@latest/css/pico.min.css");

하고 

layout component에 

 className="container"

className="grid"등 알맞게 적용하면 꾸며짐

 

PicoCSS
시맨틱 HTML을 위한 미니멀 CSS 프레임워크
https://picocss.com/

Install from CDN
https://unpkg.com/@picocss/pico@latest/css/pico.min.css

다크모드로 변경
다크모드로 바뀌지 않는 분들은 윈도우나 맥 내에서 다크모드로 설정하시면 됩니다.

Gatsby Browser APIs
gatsby-browser.jsx/gatsby-browser.tsx 파일을 사용하면 브라우저 내에서 Gatsby 관련 이벤트에 응답하고 page 컴포넌트를 추가적으로 global 컴포넌트로 래핑할 수 있습니다. Gatsby Browser API는 Gatsby의 클라이언트측과 상호 작용하기 위한 다양한 옵션을 제공합니다.
https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/

 

 

 

Netlify

https://www.netlify.com

환경 변수 설정
(CONTENTFUL_DELIVERY_TOKEN과 CONTENTFUL_ACCESS_TOKEN은 같은 토큰)
CONTENTFUL_SPACE_ID
CONTENTFUL_DELIVERY_TOKEN
CONTENTFUL_ACCESS_TOKEN

Build hooks
Build hooks은 새 빌드 및 배포를 trigger하는 데 사용할 수 있는 URL입니다. 이 훅을 trigger하려면 해당 URL에 POST 요청을 보내야 합니다.
대부분의 경우 이 POST 요청은 Netlify와 연결하려는 서비스에서 전송되지만 이 요청을 직접 보낼 수도 있습니다. 예를 들어 터미널에서 curl 명령을 실행할 수 있습니다. Postman과 같은 도구를 사용하여 build hook 요청을 테스트할 수도 있습니다.
```
curl -X POST -d '{}' https://api.netlify.com/build_hooks/5c23354f454e1350f8543e78
```
https://docs.netlify.com/configure-builds/build-hooks/?_ga=2.225266520.318488000.1671348292-757851106.1671348292

 

 

 

CONTENTFUL_DELIVERY_TOKEN과
-->추 후에 웹 HOOK만들 때 사용함 
CONTENTFUL_ACCESS_TOKEN차이
--> 사이트 빌드할 때  GATSBY에 의해 쓰여짐

NETLIFY와 CONTENT사이의 연결 을 만들려고하다.

deploy setting->build hook -> add build hook->hookname: contentful

url 복사해서 

contentful -> seeting ->webhooks-> tempates -> netflity  add 

누가 CONTENTFUL 로 PUBLISH 때마다 NETLIFY 가 우리 사이트를 새로 빌드하도록 하고싶음 

깃헙에 업데이트해야지 반영됨 

https://nomadcoders.co/react-masterclass/lectures/4083