인프런 커뮤니티 질문&답변

해결 하셨을진 모르겠지만,

루트 폴더를 새로 생성하거나 직접적인 변경이 있을경우

쉘에서 종료시킨 후 재시작을 하면 원활하게 데이터 조회가 가능하십니다

Root Directory > static 디렉토리 안에 파일명이 "profile-image"인 이미지 파일을 추가해주셨는지 확인 부탁드려요!

만약 이미지가 있는데도 오류가 뜬다면 깃허브에 프로젝트 전부 올려주신 후, 레포지토리 주소 올려주시면 확인해보겠습니다 :)

해당 index.tsx의 코드는 아래와 같습니다.

깃허브에는 아직 업로드 하지 않았는데, 보시고 만약 더 필요하시면 깃허브에 업로드할게요!

-----

import React, { FunctionComponent } from 'react';
import styled from '@emotion/styled';
import GlobalStyle from '../components/Common/GlobalStyle';
import Introduction from '../components/Main/Introduction';
import CategoryList from '../components/Main/CategoryList';
import Footer from '../components/Common/Footer';
import PostList, { PostType } from '../components/Main/PostList';
import { ProfileImageProps } from '../components/Main/ProfileImage';
import { graphql } from 'gatsby';

interface IndexPageProps {
  data: {
    allMarkdownRemark: {
      edges: PostType[];
    };
    file: {
      childImageSharp: {
        fluid: ProfileImageProps['profileImage'];
      };
    };
  };
}

const CATEGORY_LIST = {
  All: 5,
  Web: 3,
  Mobile: 2,
};

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
`;

const IndexPage: FunctionComponent<IndexPageProps> = function ({
  data: {
    allMarkdownRemark: { edges },
    file: {
      childImageSharp: { fluid },
    },
  },
}) {
  return (
    <Container>
      <GlobalStyle />
      <Introduction profileImage={fluid} />
      <CategoryList selectedCategory="Web" categoryList={CATEGORY_LIST} />
      <PostList posts={edges} />
      <Footer />
    </Container>
  );
};

export default IndexPage;

export const queryPostList = graphql`
  query queryPostList {
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date, frontmatter___title] }
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            summary
            date(formatString: "YYYY.MM.DD.")
            categories
            thumbnail {
              childImageSharp {
                fluid(
                  maxWidth: 768
                  maxHeight: 200
                  fit: INSIDE
                  quality: 100
                ) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
        }
      }
    }
    file(name: { eq: "profile-image" }) {
      childImageSharp {
        fluid(maxWidth: 120, maxHeight: 120, fit: INSIDE, quality: 100) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`;

안녕하세요, 몽키스님.

혹시 프로젝트를 깃허브에 업로드하셨다면 링크 답변으로 남겨주시면 감사하겠습니다.

아니면 해당 부분 소스코드 전부 답변으로 달아주세요!