Go to gatsby v5

gatsby-config.js

@@ -2,9 +2,9 @@ module.exports = {
     siteMetadata: {
         title: `winterjung blog`,
         description: `글 쓰는 소프트웨어 엔지니어`,
-        url: `https://blog.winterjung.dev`,
         image: `header.png`,
         twitterUsername: `@res_tin`,
+        siteUrl: `https://blog.winterjung.dev`,
     },
     plugins: [
         {

package.json

@@ -20,20 +20,20 @@
   },
   "homepage": "https://winterjung.dev",
   "dependencies": {
-    "@emotion/core": "^10.0.28",
-    "gatsby": "^2.27.0",
-    "gatsby-plugin-emotion": "^4.3.0",
-    "gatsby-plugin-react-helmet": "^3.5.0",
-    "gatsby-plugin-typography": "^2.5.2",
-    "gatsby-source-filesystem": "^2.3.0",
-    "gatsby-transformer-remark": "^2.8.5",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "@emotion/core": "^11.0.0",
+    "gatsby": "^5.13.3",
+    "gatsby-plugin-emotion": "^8.13.1",
+    "gatsby-plugin-react-helmet": "^6.13.1",
+    "gatsby-plugin-typography": "^5.13.1",
+    "gatsby-source-filesystem": "^5.13.1",
+    "gatsby-transformer-remark": "^6.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-typography": "^0.16.19",
-    "typography": "^0.16.19"
+    "react-typography": "^0.16.23",
+    "typography": "^0.16.24"
   },
   "devDependencies": {
-    "prettier": "^1.19.1"
+    "prettier": "^3.2.4"
   }
 }

src/components/layout.jsx

@@ -1,36 +1,36 @@
-import { css } from "@emotion/core"
+import { css } from "@emotion/react"
 import { graphql, Link, useStaticQuery } from "gatsby"
 import React from "react"
 import { rhythm } from "../utils/typography"
 import "./layout.css"
 
 export default function Layout({ children }) {
-    const data = useStaticQuery(
-        graphql`
-            query {
-                site {
-                    siteMetadata {
-                        title
-                    }
+    const data = useStaticQuery(graphql`
+        query {
+            site {
+                siteMetadata {
+                    title
                 }
             }
-        `,
-    )
+        }
+    `)
     return (
         <div
             css={css`
                 margin: 0 auto;
                 max-width: 700px;
                 padding: ${rhythm(2)};
                 padding-top: ${rhythm(1.5)};
-            `}>
+            `}
+        >
             <Link to={`/`}>
                 <h2
                     css={css`
                         margin-bottom: ${rhythm(1)};
                         display: inline-block;
                         font-style: normal;
-                    `}>
+                    `}
+                >
                     {data.site.siteMetadata.title}
                 </h2>
                 <hr />

src/components/seo.jsx

@@ -1,7 +1,7 @@
+import { useLocation } from "@reach/router"
+import { graphql, useStaticQuery } from "gatsby"
 import React from "react"
 import { Helmet } from "react-helmet"
-import { useLocation } from "@reach/router"
-import { useStaticQuery, graphql } from "gatsby"
 
 export default function SEO({ title, description, image }) {
     const { pathname } = useLocation()
@@ -56,7 +56,7 @@ export const query = graphql`
                 defaultTitle: title
                 defaultDescription: description
                 defaultImage: image
-                baseUrl: url
+                baseUrl: siteUrl
                 twitterUsername
             }
         }

src/pages/index.jsx

@@ -1,6 +1,6 @@
-import React from "react"
+import { css } from "@emotion/react"
 import { Link, graphql } from "gatsby"
-import { css } from "@emotion/core"
+import React from "react"
 import { rhythm } from "../utils/typography"
 
 import Layout from "../components/layout"
@@ -16,11 +16,13 @@ export default ({ data }) => (
                         to={node.fields.slug}
                         css={css`
                             text-decoration: none;
-                        `}>
+                        `}
+                    >
                         <h3
                             css={css`
                                 margin-bottom: ${rhythm(0.5)};
-                            `}>
+                            `}
+                        >
                             {node.frontmatter.title}
                         </h3>
                     </Link>
@@ -35,7 +37,7 @@ export default ({ data }) => (
 
 export const query = graphql`
     query {
-        allMarkdownRemark(sort: { fields: [fields___date], order: DESC }) {
+        allMarkdownRemark(sort: { fields: { date: DESC } }) {
             totalCount
             edges {
                 node {

src/templates/post.jsx

@@ -1,12 +1,11 @@
-import { css } from "@emotion/core";
-import { graphql } from "gatsby";
-import React from "react";
-import Layout from "../components/layout";
-import SEO from "../components/seo";
-
+import { css } from "@emotion/react"
+import { graphql } from "gatsby"
+import React from "react"
+import Layout from "../components/layout"
+import SEO from "../components/seo"
 
 export default ({ data }) => {
-    const post = data.markdownRemark;
+    const post = data.markdownRemark
     return (
         <Layout>
             <SEO
@@ -20,15 +19,15 @@ export default ({ data }) => {
                     dangerouslySetInnerHTML={{ __html: post.html }}
                     css={css`
                         word-break: keep-all;
-                    `}>
-                </div>
+                    `}
+                ></div>
             </div>
         </Layout>
-    );
-};
+    )
+}
 
 export const query = graphql`
-    query($slug: String!) {
+    query ($slug: String!) {
         markdownRemark(fields: { slug: { eq: $slug } }) {
             html
             frontmatter {
@@ -38,4 +37,4 @@ export const query = graphql`
             excerpt(truncate: true)
         }
     }
-`;
+`