Gatsby: gatsby-node.js์—์„œ ํŽ˜์ด์ง€๋กœ ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•

์— ๋งŒ๋“  2019๋…„ 05์›” 19์ผ  ยท  1๋…ผํ‰  ยท  ์ถœ์ฒ˜: gatsbyjs/gatsby

์ด๊ฒƒ์€ ํ˜„์žฌ ๋‚ด ์ฝ”๋“œ์˜ ์ผ๋ถ€์ž…๋‹ˆ๋‹ค.

        const posts = result.data.allCockpitHello.edges
        const date = new Intl.DateTimeFormat("default", {
          month: "short",
          day: "2-digit",
          year: "numeric",
        }).format(posts.node.cockpitCreated,);
        posts.forEach((post, index) => {
          const previous = index === posts.length - 1 ? null : posts[index + 1].node
          const next = index === 0 ? null : posts[index - 1].node

          createPage({
            path: `/blog/${post.node.Name.value}`,
            component: path.resolve(`./src/components/single.js`),
            context: {
              slug: post.node.Name.value,
              date,
              previous,
              next,
            },
          })
        })

date ์„ prop์œผ๋กœ _single.js_ ๋˜๋Š” ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ์ „๋‹ฌํ•  ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.

question or discussion

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@ Hypothesis-github ์ด์ „์— createPage API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹จ์ผ ๊ตฌ์„ฑ ์š”์†Œ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ์ž…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด ๊ทธ ์‹ฑ๊ธ€์ด ์‹ค์ œ๋กœ ํ…œํ”Œ๋ฆฟ์ž…๋‹ˆ๊นŒ? ๊ทธ๋ฆฌ๊ณ  ์•„๋งˆ๋„ ๋‹น์‹ ์ด ์›ํ•˜๋Š” ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

const posts = result.data.allCockpitHello.edges
        const date = new Intl.DateTimeFormat("default", {
          month: "short",
          day: "2-digit",
          year: "numeric",
        }).format(posts.node.cockpitCreated,);
        posts.forEach((post, index) => {
          const previous = index === posts.length - 1 ? null : posts[index + 1].node
          const next = index === 0 ? null : posts[index - 1].node

          createPage({
            path: `/blog/${post.node.Name.value}`,
            component: path.resolve(`./src/components/single.js`),
            context: {
              slug: post.node.Name.value,
              cockpidate:date,
              previousitem:previous,
              nextitem:next,
            },
          })
        })

๊ทธ๋ฆฌ๊ณ  single.js :

import React from "React"
import {Link} from "gatsby"

const Single=props=>{
   const {pageContext}= props
   const {slug,cockpidate,nextitem,previousitem}= pageContext
  return (
      <div>
        <h3>{slug}</h3>
         <hr/>
         <h5>created at {cockpidate}</h5>
         <Link to={nextitem}/>next item</Link>
          <Link to={previousitem}/>previousitem</Link>
       <div>
  )
}
export default Single

ํ”ผ๋“œ๋ฐฑ์„ ์ž์œ ๋กญ๊ฒŒ ์ œ๊ณตํ•˜์‹ญ์‹œ์˜ค

>๋ชจ๋“  ๋Œ“๊ธ€

@ Hypothesis-github ์ด์ „์— createPage API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹จ์ผ ๊ตฌ์„ฑ ์š”์†Œ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ์ž…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ์•„๋‹ˆ๋ฉด ๊ทธ ์‹ฑ๊ธ€์ด ์‹ค์ œ๋กœ ํ…œํ”Œ๋ฆฟ์ž…๋‹ˆ๊นŒ? ๊ทธ๋ฆฌ๊ณ  ์•„๋งˆ๋„ ๋‹น์‹ ์ด ์›ํ•˜๋Š” ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

const posts = result.data.allCockpitHello.edges
        const date = new Intl.DateTimeFormat("default", {
          month: "short",
          day: "2-digit",
          year: "numeric",
        }).format(posts.node.cockpitCreated,);
        posts.forEach((post, index) => {
          const previous = index === posts.length - 1 ? null : posts[index + 1].node
          const next = index === 0 ? null : posts[index - 1].node

          createPage({
            path: `/blog/${post.node.Name.value}`,
            component: path.resolve(`./src/components/single.js`),
            context: {
              slug: post.node.Name.value,
              cockpidate:date,
              previousitem:previous,
              nextitem:next,
            },
          })
        })

๊ทธ๋ฆฌ๊ณ  single.js :

import React from "React"
import {Link} from "gatsby"

const Single=props=>{
   const {pageContext}= props
   const {slug,cockpidate,nextitem,previousitem}= pageContext
  return (
      <div>
        <h3>{slug}</h3>
         <hr/>
         <h5>created at {cockpidate}</h5>
         <Link to={nextitem}/>next item</Link>
          <Link to={previousitem}/>previousitem</Link>
       <div>
  )
}
export default Single

ํ”ผ๋“œ๋ฐฑ์„ ์ž์œ ๋กญ๊ฒŒ ์ œ๊ณตํ•˜์‹ญ์‹œ์˜ค

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

magicly picture magicly  ยท  3์ฝ”๋ฉ˜ํŠธ

andykais picture andykais  ยท  3์ฝ”๋ฉ˜ํŠธ

theduke picture theduke  ยท  3์ฝ”๋ฉ˜ํŠธ

benstr picture benstr  ยท  3์ฝ”๋ฉ˜ํŠธ

kalinchernev picture kalinchernev  ยท  3์ฝ”๋ฉ˜ํŠธ