성과물

https://www.70ki8suda.com/

구현된 기능

기사 일람페이지

기사 세부 정보 페이지

레이블별 일람페이지

리뷰 기능(기사 상세 정보 페이지

주요 기능 (기사 상세 정보 페이지

p5.js의 canvas 구성 요소를 UI 위젯으로 사용하기

GraphicMS란?

'빠른 공격, 그래피QL로 콘텐츠를 꺼낼 수 있는 API를 제작할 수 있는 헤드리스 CMS'

개인이 사용하면 충분한 무료 서류(100만 API 호출 100GB 자산 발표/월 무료)

UI UX는 세련되어 사용이 편합니다

Playground에서GraphiQL의query행동을 가볍게 테스트

문서와 고객 지원이 충실함

GraphicMS로 API 이전 프로세스 실제 만들기

1 회원 등록, 프로젝트 제작
2 모드 정의

이번에 제작된 모델은 POST, PostCommerent, PostLike 세 가지가 있습니다.
패턴=내용에 있는데이터의 유형정의서
패턴 간의 관계도 간단하게 정의할 수 있지만 복잡한 관계는 안 될 수도 있다
3. 내용 추가

이렇게 정의된 패턴에 따라 자동으로 입력 필드가 멋지게 생성되기 때문에 이 화면에 내용을 입력하고 채우면 API에서 두드릴 수 있다.이번 상황에서 이 화면에 입력된 것은 보도 정보뿐이다.글에 대한 논평도 블로그의 디스플레이 화면(전단)에서 API의 요청(mutation)까지 만드는 전제 조건이다.하지만 이 화면으로 투고된 평어와 잠을 한눈에 확인할 수 있어 편리하다.
또한 웹훅을 설정할 수 있으며, 글이 삭제되면vercel에서 자동으로 재구성 등 설정을 할 수 있습니다!
４.GraphiQL 조회를 해보세요.

GraphicMS에 있는 Playground에query를 써서 의도 데이터를 검색하고 변경 데이터를 처리할 수 있는지 시험해 보세요.
여기에 정확한query가 적혀 있는지 확인하면, 전방의 프로그램으로 정확하게 컴파일하기만 하면 됩니다.

next.js로 앞부분 화면 만들기

글 상세 페이지, 탭 일람 페이지 등 get Static Paths를 통해 필요한 데이터를 얻기(글 상세 페이지 [slug].tsx라면 slug) 정적 생성

export const getStaticPaths: GetStaticPaths = async () => {
  const { data } = await client.query({
    query: gql`
      query {
        posts(stage: PUBLISHED) {
          slug
        }
      }
    `,
  });
  const paths = data.posts.map((post: any) => ({
    params: {
      slug: post.slug,
    },
  }));
  return { paths, fallback: false };
};

리뷰 기능·좋아요기능 등 사용자의 동작 데이터에 따라 변경되는 부분의 데이터는 클라이언트 측에서 페이지를 로드할 때 획득한다

 (async () => {
    const { data } = await client.query({
      query: gql`
        query Post($id: ID) {
          posts(where: { id: $id }) {
            postComment {
              commentBody
              commentAuthor
              time
              id
            }
            postLikes {
              id
              ipaddress
            }
          }
        }
      `,
      variables: { id: post.id },
      fetchPolicy: 'no-cache',
    });
  })();

GraphicMS에서는 Public API에서 수행할 수 있는 작업에 대한 권한을 제어할 수 있습니다.
이번에는 데이터 읽기(읽기 처리)와 관련해 데이터 삭제, 추가, 편집에 관해 공개하고 Token의 요청만 첨부할 수 있도록 했다.
이 Token이 유출되면 좋지 않아요. (데이터를 모두 삭제할 수도 있어요) 그래서 이 Token의 요청을 직접 앞에서 포장할 수 없어요.
이번 데이터 변경 요청은 Token 정보의 은닉으로 인해 Next.js의 API Routes에서 시작합니다.
api/createPostComment.ts

export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  const { postId, commentBody, commentAuthor, time } = JSON.parse(req.body);

  const { data } = await client.mutate({
    mutation: gql`
      mutation UpdatePost($postId: ID, $commentBody: String!, $commentAuthor: String!, $time: DateTime) {
        updatePost(
          where: { id: $postId }
          data: { postComment: { create: { commentBody: $commentBody, commentAuthor: $commentAuthor, time: $time } } }
        ) {
          id
          postComment {
            commentBody
            commentAuthor
            time
            id
          }
        }
      }
    `,
    variables: {
      postId: postId,
      commentBody: commentBody,
      commentAuthor: commentAuthor,
      time: time,
    },
  });

  await client.mutate({
    mutation: gql`
      mutation PublishPostComment($postCommentId: ID) {
        publishPostComment(where: { id: $postCommentId }, to: PUBLISHED) {
          commentBody
        }
      }
    `,
    variables: {
      postCommentId: data.updatePost.postComment[data.updatePost.postComment.length - 1].id,
    },
  });
  res.status(200).end();
}

덤

이번에 블로그를 썼는데 소박해 보였는데 버튼과 댓글 기능을 설치할 때전방에서 요청을 보내고 데이터 업데이트 요청을 보내며query에서 돌아오는 응답에서 요청을 반영하는 데이터까지 약 1분의 시간이 걸린다. 이런 시차가 발생한다.
GraphicMS의 서버가 기본적으로 캐시층의 데이터를 되돌려주기 때문이다
데이터 업데이트 요청 - 캐시 레이어 업데이트 처리 - 응답에 반영
이는 캐시 레이어 업데이트 처리 간 최대 1분 차이로 인해 발생하는 동작입니다.
이런 행위에 대해 공식 문서에도 우회하는 방법이 없지만 고객 지원에 문의한 결과 캐시층을 돌아서 데이터를 얻는 설정 방법을 알게 되었습니다. 궁금하시면 고객센터에 문의하십시오.이렇게 하면 프런트에서 데이터 업데이트 요청을 보낸 후 5초가량 그래픽스 응답에도 반영돼 품질이 좋다.
Next.js에서 P5.js를 사용한 canvas 구성 요소화된 UI 제작에 대한 도전입니다. 시간과 정력이 있다면 다른 기사에 적어 주십시오.잘 부탁드립니다!