목표

• [ ] 썸네일 추가
• [ ] 메인 페이지 구조 변경

진행 상황

메인 페이지 구조 변경

기술 하고, 프로젝트, 최신 게시글 6개정도만 첫 화면에서 보이면 괜찮을 것 같아서.

위와같은 탭으로 이동하게 메인 구조를 엎기로 했다.

기술 부분을 어떻게 보여줘야 할지가 조금 애매해서, 그냥 아이콘 나열 하기로하고, 공부하고 있는 항목을 추가하면 괜찮을 것 같다는 생각을 좀 하고 있는중.

그래서 최대한 아이콘으로만 볼 수 있도록 메인을 유지하는게 나쁘지 않을 것 같다는 생각을해서 엎기로했다.. 아이신나

썸네일 추가

Working with Images in Markdown Posts and Pages

위 블로그 참고해가며 진행을 해주었는데, 문제가 하나 생겼던게

1. npm 오류가 발생해서 계속해서 --force 를 이용해 줘야하는 부분
2. 그리고, 이미 plugin-image가 있는데 image를 다시 설치하라는 부분이 조금 이상해서

설마하고 비슷하게 한 사람들 글 작성 년도를 봤는데 2019라서, gatsby-image 관련해서, 공식 문서를 다시 찾아보았다

The gatsby-image  package is now deprecated. The new Gatsby image plugin  has better performance, cool new features and a simpler API. See the migration guide  to learn how to upgrade.

보니까.. 바로위에 이렇게 적혀있어서… , 그래서 그동안의 뻘짓은 잘 찾아보라는 어쩌구군아 라는 생각을 하면서, gatsby-plugin-sharp 를 이용해주었다. 진짜로 이백배는 편하더라…. 응…. 그런데 플러그인 공식 문서랑 내가 사용해야하는 경우랑 조금 다른 것 같아서 그냥 대충,,, 아래와같이 이용해 주었다

import { GatsbyImage, getImage } from "gatsby-plugin-image";

import styled from "styled-components";
const Posts = ({ data }) => {

  const { alt, src } = frontmatter.featuredimage;
  const image = getImage(src);

  return (
    <GlobalLayout>
      <TitleSection>
        <Title>{frontmatter.title}</Title>
        <PostDate>{frontmatter.date}</PostDate>
      </TitleSection>
      <GatsbyImage image={image} alt={alt} />
      <PostSection dangerouslySetInnerHTML={{ __html: Html }} />
    </GlobalLayout>
  );
};

export const pageQuery = graphql`
  query ($id: String) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
        featuredimage {
          alt
          src {
            childImageSharp {
              gatsbyImageData(width: 768, height: 400)
            }
          }
        }
      }
    }
  }
`;