inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React 기반 Gatsby로 기술 블로그 개발하기

안녕하세요! 몇가지 질문드려요!

766

동그리

작성한 질문수 2

1

안녕하세요 gatsby 무작정 시작했는데 이렇게 한땀한땀 따라하게 해주셔서 우선 감사드립니다.

그런데 따라서 블로그를 만들고 나서 google search console 에 sitemap.xml을 등록하려고 build했습니다. 그런데 저는 public폴더 아래 바로 sitemap.xml 있는것이 아니고 public/sitemap/sitemap-index.xml과 같은 경로에 sitemap-0.xml이 생성되었습니다. 열어보니 sitemap-index.xml이 sitemap-0.xml을 참조하는거 같아서 google search console에는 두개가 등록 가능하여 둘다 제출하였는데 네이버는 하나의 sitemap만 제출할 수 있어서 sitemap-0.xml로 제출 해보고. 몇일 기다리다 제 블로그가 노출이 안되어 sitemap-index.xml로 바꾸어 보았지만 여전히 노출이 안됩니다. 더 많은 시간이 필요할지 아니면 제가 sitemap 제출을 잘못하고 있는건지 모르겠습니다.. ㅜㅜ 이 부분 관련하여 혹시 답변 주실 수 있을까요?!

아 그리고 마크다운 리마크 플러그인이 md파일 파싱할때 **볼드**, __볼드__ 는 태그로 파싱하지 않는가 봐요? 너무 덜 굵게 표현이 되서 태그에 스타일링 해주려고 했는데 html파일 보니 그냥 p태그로만 되어 있어서 볼드 표시한 부분을 더 진하게 할 수 없습니다. 이부분도 혹시 도움주실 수 있을까요 ㅠㅠ

blog Gatsby

답변 4

1

주현도

안녕하세요, 동그리님!

제가 작성한 강의에서는 gatsby-plugin-sitemap 라이브러리의 버전이 2.12.0 이었습니다.

그런데 확인해보니까 이번에 버전이 v4로 업데이트되면서 동작 방식이 아예 변경됐습니다.


우선, gatsby-plugin-sitemap 라이브러리가 업데이트되면서 기본적으로 sitemap이 생성되는 디렉토리가 public/sitemap/ 으로 변경되었습니다.

만약 단순히 public 디렉토리에 생성하고 싶다면 아래와 같이 output options을 추가해주시면 됩니다.

module.exports = {
  siteMetadata: { ... },
  plugins: [
    ...,
    {
resolve: 'gatsby-plugin-sitemap',
options: {
output: '/',
},
}, ... ], };



아래는 gatsby-plugin-sitemap 라이브러리에서 사용되는 코드의 일부분인데요, 해당 부분에 의해서 기본적으로 생성되는 사이트맵의 파일명이 sitemap-index.xml입니다.

import * as React from "react"
import { withPrefix as fallbackWithPrefix, withAssetPrefix } from "gatsby"
import { withoutTrailingSlash } from "./internals"

// TODO: Remove for v3 - Fix janky path/asset prefixing
const withPrefix = withAssetPrefix || fallbackWithPrefix

exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  const { output, createLinkInHead } = pluginOptions

  if (!createLinkInHead) {
    return
  }

  setHeadComponents([
    <link
      key={`gatsby-plugin-sitemap`}
      rel="sitemap"
      type="application/xml"
      href={withPrefix(withoutTrailingSlash(output) + `/sitemap-index.xml`)}
    />,
  ])
}

그리고, 몇몇 웹 마스터 도구에서는 특정 개수(대략 5만) 이상의 URL이 담긴 사이트맵을 인식하지 못한다는 문제가 발생한다고 합니다.

그래서 이 문제를 해결하기 위해 단위 개수(entryLimit 옵션을 통해 설정 가능하고 기본값은 45000입니다)만큼 URL을 나눠, 그만큼의 사이트맵을 생성한 후 sitemap-index.xml 파일에 모두 해당 사이트맵을 반영하기 때문에 sitemap-index.xml 파일에는 sitemap-0.xml, sitemap-1.xml 등의 사이트맵 주소밖에 존재하지 않습니다.

이런 이유로 인해 URL의 개수가 적더라도 sitemap-0.xml 파일이 생성되어 블로그의 URL이 모두 해당 파일에 저장됩니다.

0

동그리

무료 강의인데 이렇게 질문도 다 받아주시고 감사합니다! 덕분에 많이 배웠습니다!

버전이 달라졌었군요.. 그런 의심을 안했던 제가 참 부족하다는 생각이 드네요... 흐 

해결 방법까지 제시해주셔서 감사합니다!

1

주현도

안녕하세요 동그리님 :)

우선 sitemap.xml 파일은 public 디렉토리 안에 생성되어야 하는데 파일이 존재하는 디렉토리 위치와 파일명이 모두 다르네요??

이 부분 확인을 위해 gatsby-config.js 코드를 전부 올려주실 수 있나요??

아니면 yarn run gatsby clean 커맨드 입력을 통해 cache, public 디렉토리를 모두 삭제하신 후, 다시 빌드를 해보시는 것도 좋을 것 같습니다.

그리고 정상적으로 public/sitemap.xml 파일이 생성된다면 그 때 다시 웹 마스터 도구에 sitemap 등록을 해보시는 것을 권장드립니다.

그리고 해당 예제에서 사용하는 플러그인은 ** 혹은 __로 볼드체를 작성할 수 있습니다!

strong 태그로 변환해주기 때문에 해당 태그의 font-weight 속성을 더 굵게 조정하시면 될 것 같아요.

0

동그리

앗 너무 감사합니다! 사이트맵은 알려주심 방법을 시도해보고 안되면... ㅜㅜ gatsby-config 파일을 올려보겠습니다! 

strong 태그였군요! 좀더 진하게 해봐야겠습니다 ㅎㅎ 

답변 감사드립니다!

0

동그리

안녕하세요!

gatsby clean를 하고 다시 build를 했는데 마찬가지로 아래와 같이 sitemap 폴더에 두 개로 나뉘어 생성됩니다. ㅜㅜ

위 댓글에 gatsby-config 파일을 올렸습니다. 혹시 봐주실 수 있을까요?

부탁드립니다. ㅜㅜㅜ 구글링해도 잘 안나오네요 ㅠㅠ

0

동그리

module.exports = {
  siteMetadata: {
    title: 'DevWhkang Blog',
    description: '안녕하세요 주니어 개발자 강원형 블로그입니다.',
    author: 'DevWhkang',
    siteUrl: 'https://devwhkang.gatsbyjs.io',
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        host: 'https://devwhkang.gatsbyjs.io',
        sitemap: 'https://devwhkang.gatsbyjs.io/sitemap/sitemap-index.xml',
        policy: [{ userAgent: '*', allow: '/' }],
      },
    },
    {
      resolve: 'gatsby-plugin-canonical-urls',
      options: {
        siteUrl: 'https://devwhkang.gatsbyjs.io',
        stripQueryString: true,
      },
    },
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-typescript',
      options: {
        isTSX: true,
        allExtensions: true,
      },
    },
    `gatsby-plugin-emotion`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `contents`,
        path: `${__dirname}/contents`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/static`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-smartypants',
            options: {
              dashes: 'oldschool',
            },
          },
          {
            resolve: 'gatsby-remark-prismjs',
            options: {
              classPrefix: 'language-',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 768,
              quality: 100,
              withWebp: true,
              loading: 'lazy',
            },
          },
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {},
          },
          {
            resolve: 'gatsby-remark-external-links',
            options: {
              target: '_blank',
              rel: 'nofollow',
            },
          },
        ],
      },
    },
  ],
};

쿼리오류 Field "thumbnail" must not have a selection...

1

872

1

타입스크립트를 설정할 때 jsxPragma 옵션을 뺀 이유는 무엇인가요?

1

605

1

마지막 배포 부분 질문드립니다!

1

626

1

'[username]/[username].github.io' -> 'username/reponame'

0

344

0

IntersectionObserver deploy( gatsby build) 시 오류(자답)

1

399

1

PostHead.tsx BackgroundImage 동작오류(자답)

1

297

0

19강 인피니티 스크롤 IntersectionObserver 코드 위치 수정이 필요합니다.

1

411

1

썸네일 이미지 제작 및 학습 방법 관련 문의

1

447

1

배포 후 포스트 업로드 방법

1

387

1

배포 질문이요!

1

528

1

gatsby develop 오류

1

940

1

깃허브 레퍼지토리 질문드려요

1

344

1

특정 게시글을 클릭하여 상세 페이지로 넘어가는 과정과 SPA에 관한 질문

1

285

1

Unhandled Runtime Error 가 뜹니다

0

506

2

sign in with GitHub 클릭 시

1

394

3

동작 반복 시 오류

1

351

2

const BackgroundImage 질문

1

212

1

오타 문의

1

305

2

Props로 받아 포스트 데이터 출력하기가 안됩니다.

1

203

1

index.tsx allMarkdownRemark 에러..

0

595

2

스네이크 케이스로 변수명을 짓는 이유

1

251

1

'Tagged Template Literal 방식을 통해 정의한 CSS 적용 방법'에서 발생하는 문제

3

353

2

상단 이미지를 썸네일 사용하지않고 다른 이미지를 쓰고싶습니다

1

284

1

여기까지 했는데 runtime 에러가 발생합니다

2

286

1