์ฝํ
์ธ ๊ฐ ๋ง์ ๋ธ๋ก๊ทธ์์ ๋ด ๋ธ๋ก๊ทธ๋ฅผ ๊ฐ์ ธ ์ค๋ ค๊ณ ํ๋๋ฐ ์ด์ํ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
์ด ๋ฌธ์ ๋ฅผ ์ฌ๋ ์ ์ผํ ์ด์ ๋ ์ค๋ฅ๊ฐ ๋ด๊ฒ ๊ทธ๋ ๊ฒ ๋งํ๊ธฐ ๋๋ฌธ์
๋๋ค.
์ด๊ฒ์ ์ค๋ฅ๊ฐ ๋งํ ๊ฒ์
๋๋ค.
์ค๋ฅ :์ด StaticQuery์ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
"์ด๊ฒ์ Gatsby์ ๋ฒ๊ทธ ์ผ ์ ์์ผ๋ฉฐ ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์นจํด๋ ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์ง ์์ผ๋ฉด https://github.com/gatsbyjs/gatsby/issues ์์ ๋ฌธ์ ๋ฅผ์ฌ์ธ์."
๊ฐ์ธ ๋น ์ ๋ณด ์ถ๋ ฅ :
์ฒด๊ณ:
์ด์์ฒด์ : Windows 10
CPU : (8) x64 Intel (R) Core (TM) i7-3632QM CPU @ 2.20GHz
๋ฐ์ด๋๋ฆฌ :
npm : 6.9.0-C : \ Program Filesnodejsnpm.CMD
์ธ์ด :
ํ์ด์ฌ : 3.7.2
๋ธ๋ผ์ฐ์ :
๊ฐ์ฅ์๋ฆฌ : 44.18362.1.0
npm ํจํค์ง :
๊ฐ์ธ ๋น : ^ 2.13.51 => 2.13.51
gatsby-plugin-sass : ^ 2.1.4 => 2.1.4
gatsby-plugin-sharp : ^ 2.2.10 => 2.2.10
๊ฐ์ธ ๋น ๋ฐ์ธ ์ด๋ฏธ์ง : ^ 3.1.7 => 3.1.7
๊ฐ์ธ ๋น ๋ฐ์ธ ์๋ ์ด๋ฏธ์ง : ^ 0.2.3 => 0.2.3
gatsby-source-contentful : ^ 2.1.18 => 2.1.18
๊ฐ์ธ ๋น ์์ค ํ์ผ ์์คํ
: ^ 2.1.9 => 2.1.9
๊ฐ์ธ ๋น ๋ณ์๊ธฐ ๋ฐ์ธ : ^ 2.6.11 => 2.6.11
์ค๋ฅ ์ฒ๋ฆฌ๋์ง ์์ ๊ฑฐ๋ถ
์ค๋ฅ : ์์คํ ์ด ์ง์ ๋ ๊ฒฝ๋ก๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.
envinfo.js : 1 Function.e.exports.sync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:4908
envinfo.js : 1 Object.copySync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:66886
envinfo.js : 1 Object.t.writeSync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:48715
envinfo.js : 1
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:46872
envinfo.js : 1
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:46887
task_queues.js : 88 processTicksAndRejections
internal / process / task_queues.js : 88 : 5
์๋ ํ์ธ์ @ EdinK1 ,์ด ์ฝ๋๋ฒ ์ด์ค์ ๋ํ ์ ์ฅ์๋ฅผ ๊ณต์ ํ์ฌ ๋ ์์ธํ ์ดํด ํ์๊ฒ ์ต๋๊น ? ๊ทธ๋ ์ง ์๋ค๋ฉด ์ด๊ฒ์ ๋ณต์ ํ ์ ์์ต๋๊น?
์๋ ํ์ธ์ @lannonbr . ๋ฌผ๋ก ์ฌ๊ธฐ์ ๋ด ์ ์ฅ์์ ๋ํ ๋งํฌ๊ฐ ์์ต๋๋ค. ๋ฌธ์ ๋ gatsbty-source-contenful ํด๋์ fragments.js์์ ๋ฐ์ํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ๋ ธ๋ ๋ชจ๋ ํด๋๋ฅผ gitignoredํ์ต๋๋ค. ๋ ธ๋ ๋ชจ๋๋ ์ดํด ๋ด์ผํ๋ค๋ฉด ์๋ ค์ฃผ์ธ์.
๋๋ ๋ํ์ด ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. ์ด ํํ ๋ฆฌ์ผ https://www.youtube.com/watch?v=8t0vNu2fCCM&t=13486s ๋ฅผ ๋ฐ๋ฅด๊ณ ์์๊ณ blog.js์ ์ฟผ๋ฆฌ๋ฅผ ์ถ๊ฐํ๋ ค๊ณ ํ ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. ์ด์ํ ์ ์ ์ด์ ์ graphi์์ ์๋ํ๋ค๋ ๊ฒ์ ๋๋ค.
https://itnext.io/content-management-with-gatsby-netlify-and-contentful-70f03de41602 ๋ฅผ ๋ฐ๋ฅด๋ ๋์์ด ์ค๋ฅ๋ฅผ ์ฌํ ํ ์
node_modules / gatsby-source-contentful / sec / fragments.js๋ฅผ ์ญ์ ํ๋ฉด ์ค๋ฅ๊ฐ "์์ "๋ ๊ฒ ๊ฐ์ต๋๋ค.
ํ , ๋ค ๋์๊ฒ๋ ํจ๊ณผ์ ์ด์์ต๋๋ค. ์ด๊ฒ์ด ์ฌ๋ฐ๋ฅธ ๋ฐฉ๋ฒ์ธ์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง ์ด์จ๋ ๊ฐ์ฌํฉ๋๋ค!
๋น์ทํ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค. ์กฐ๊ฐ ํ์ผ ์ญ์ ๊ฐ ์๋ํ์ง ์์ต๋๋ค. ์๋ฌด๋ ์์ง ํด๊ฒฐ์ฑ ์ ์ฐพ์์ต๋๊น?
์กฐ๊ฐ ํ์ผ์ ์ญ์ ํ๋ฉด ํธ๋ฆญ์ ์ํ ํ ์ ์์ต๋๋ค. ์๋ฒ๋ฅผ ๋ค์ ์์ํ์ญ์์ค.
๊ฐ์ฌํฉ๋๋ค. ์กฐ๊ฐ ํ์ผ์ ์ญ์ ํ์ฌ ์๋ํ์ง๋ง ์ค์ ์๋ฃจ์ ๋ณด๋ค ํด๊ฒฐ ๋ฐฉ๋ฒ์ฒ๋ผ ๋ณด์ ๋๋ค. ๋๊ตฌ๋ ์ง ์ด๊ฒ์ ๊น์ด ํ๊ณ ๋ค์์ต๋๊น?
์ฌ๊ธฐ์๋ ๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ์ฝํ ์ธ ๊ฐ ๋ง์ ์ด๋ฏธ์ง์ ๋ฌธ์ ๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.
export const mainQuery = graphql`
query {
contents: allContentfulContents {
edges {
node {
slug
title
content {
json
}
cover {
fluid {
...GatsbyContentfulFluid_noBase64
}
}
gallery {
id
fluid {
src
}
}
}
}
}
}
`
์ปจํ ์ธ ๊ฐ ๋ง์ ์กฐ๊ฐ์ ๋ชจ๋ ์๋ํ์ง๋ง ์๋ํ์ง ์์ต๋๋ค.
export const query = graphql`
query {
contentfulBlogPost {
title
publishedDate
body {
json
}
}
}
`
์ฝํ ์ธ ๊ฐ ๋ง์ ๋ธ๋ก๊ทธ์ ๋ชจ๋ ์ด๋ฏธ์ง์ ์ฝํ ์ธ ๊ฐ ์ฌ๊ธฐ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. (๋ณธ๋ฌธ {json})
์ ๋ฐ์ดํธ : gatsby-source-contentful์ ์ ๋ฐ์ดํธ ํ ํ ๋ฒ๊ทธ๊ฐ ์ฌ๋ผ์ง ๊ฒ ๊ฐ์ต๋๋ค. ์ ์ด๋ ์ง๊ธ ๋ด ์ด๋ฏธ์ง๋ฅผ ์ป์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด์ ์ ๋์ผํ ์ค๋ฅ ๋ฉ์์ง๊ฐ ๋ํ๋ฌ์ต๋๋ค. ์ฆ, ํด๋น ์ค๋ฅ๋ Gatsby์์ ์ ๊ณต ํ ๊ฒ์ด๋ฉฐ ์ฌ๊ธฐ์ ํด๋น ์ค๋ฅ์ ๋ํด github์ ๊ฒ์ํด์ผํฉ๋๋ค.
๋๋ ๊ฐ์ ๋ฌธ์ ๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
๊ฐ์ธ ๋น @ 2.13.59
[email protected]
[email protected] ( ์ด์ ๋ฒ์ ๋ ์๋ํ์ง๋ง ๋์ผํ ๋ฌธ์ )
๋ค์๊ณผ ๊ฐ์ด ๊ฐ์ธ ๋น ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์์ต๋๋ค.
gatsby new great_gatsby_bootcamp https://github.com/gatsbyjs/gatsby-starter-hello-world
[email protected]
์ค์น ๋ฐ ํ๊ฒฝ ์ค์ ๋ณ์๋ README.md์ ์ค๋ช
๋์ด ์์ต๋๋ค.
๊ฐ๋จํ ์ฝํ
์ธ ๋ชจ๋ธ ์์ฑ :
์ผ๋ถ ์ฝํ
์ธ ๋ฅผ ์์ฑํ๊ณ gatsby develop
์คํ ํ ๋ค์ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
output.txt
๊ฑฐ์ ๊ธฐ๋ณธ ๊ตฌ์ฑ์์ ํน๋ณํ ๊ฒ์ ์์ต๋๋ค.
localhost : 8000์ React ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋ํ์ง ์์ผ๋ฉฐ graphql ๋์ดํฐ์์ ์ฝํ ์ธ ๊ฐ ๋ง์ ์ฟผ๋ฆฌ๋ฅผ ํ ์ ์์ต๋๋ค.
๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ฉด gatsby-source-contentful์ ๋ฒ์ 2.1.19๋ก ๋ค์ ์ค์นํด๋ณด์ญ์์ค.
npm install --save gatsby-source-contentful
์ฌ์ค์น๋ฅผ ์๋ํ์ง๋ง ์ด์ด ์์ต๋๋ค. ์ค๋ฅ๋ณด๋ค๋ ๋ฒ๊ทธ ๋๋ ๋ฒ์ ์ถฉ๋์ ๊ฐ๊น๋ค๊ณ ์๊ฐํฉ๋๋ค.
์ฌ์ค์น๋ฅผ ์๋ํ์ง๋ง ์ด์ด ์์ต๋๋ค. ์ค๋ฅ๋ณด๋ค๋ ๋ฒ๊ทธ ๋๋ ๋ฒ์ ์ถฉ๋์ ๊ฐ๊น๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋ค์ ๋จ๊ณ๋ฅผ ์ํํ์ต๋๋ค.
fragments.js
์ญ์ npm run clean
gatsby develop
์๋ํ์ง๋ง ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค (๋ค๋ฅธ ํฌ๋ผ์์๋ ์ผ๋ถ ์ฌ์ฉ์๊ฐ์ด ๋จ๊ณ์์ ๋ฒ๊ทธ๋ฅผ ์์ ํ์ต๋๋ค).npm install --save gatsby-source-contentful
npm run clean
gatsby develop
๋ฐ ์ฑ๊ณต-์๋ํฉ๋๋ค.npm i [email protected] [email protected]
๋ค์ด ๊ทธ๋ ์ด๋
์ฝํ ์ธ ์ ๋ฏธ๋์ด ํ์ผ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ์ญ์์ค. ๊ทธ๋ฆฌ๊ณ ๊ฒ์๋ฌผ ์์ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด๋ณด์ธ์. ์ด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค. ์ด๋ป๊ฒ ๊ทธ๋ฆฌ๊ณ ์ ํ์คํ์ง ์์ต๋๋ค.
๋์ผํ ์ค๋ฅ๊ฐ์๋ ๊ฒฝ์ฐ ๋ค์ ๋จ๊ณ๋ฅผ ์ํํ์ฌ ๋ฐ์ดํฐ๋ฅผ ์ญ์ ํ๊ฑฐ๋ ํจํค์ง๋ฅผ ๋ค์ด ๊ทธ๋ ์ด๋ํ์ง ์๊ณ ๋ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค.
npm run develop
๋๋ gatsby develop
๋ฅผ ์คํํ์ฌ dev ์๋ฒ๋ฅผ ๋ค์ ์์ํฉ๋๋ค.๋ฐ๋ผ๊ฑด๋, ์ด๊ฒ์ด ๋น์ ์ ๋ฌธ์ ๋ ํด๊ฒฐํ๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๋๊ตฐ๊ฐ ์ด๊ฒ์ด ์ ๊ทธ๋ฐ์ง ์ฐ๋ฆฌ์๊ฒ ์๋ ค์ค ์ ์๋ค๋ฉด ๋์์ด ๋ ๊ฒ์ ๋๋ค.
์ด๋ฏธ์ง ์ถ๊ฐ๊ฐ ๋์์ด๋์์ผ๋ฏ๋ก ์ด๋ฏธ์ง๋ฅผ ๊ฒ์ํด์ผํฉ๋๋ค.
์ฌ์ ํ์ด ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ์ด์ ํ๋ ์ด์ค ํ๋ ์ด๋ฏธ์ง๋ฅผ ์
๋ก๋ํ์ ๋ ์๋ํ๊ณ , ๊ฐ์ ํํ ๋ฆฌ์ผ์ ์งํํ๋ฉด์ ์๋์ ๋ฉ์ท์ต๋๋ค.
์ด์ fragment.js๋ฅผ ์ญ์ ํ์ต๋๋ค (์ค์ ๋ก๋ ๋ฐ์ดํฐ ์์ค์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ ์ฒด ํ์ผ์ ์ฃผ์ ์ฒ๋ฆฌํ์ต๋๋ค). ๋ค์ ์ ์์ ์ผ๋ก ์๋ํฉ๋๋ค.
๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. fragments.js ์ญ์ -๋์์ด๋์์ต๋๋ค.
fragments.js ํ์ผ์ ์ญ์ ํ๋ฉด ์ค๋ฅ๊ฐ ์ ๊ฑฐ๋์์ต๋๋ค. ๊ทธ๊ฒ์ด ์ ์ ํ ํด๊ฒฐ์ฑ
์ธ์ง๋ ๋ชจ๋ฅด๊ฒ ์ง๋ง.
๋๋ ๊ทธ๊ฒ์ด ์ด๋ป๊ฒ ์๋ํ๋์ง ์ฌ์ ํ ํผ๋ ์ค๋ฝ์ต๋๋ค.
๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. "๋ฏธ๋์ด"ํญ์ ๋๋ฏธ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค.
์ด๋ฏธ์ง ์๋ฆฌ ํ์์๋ฅผ ์ถ๊ฐํ๋ฉด ํจ๊ณผ์ ์ด์์ต๋๋ค.
[email protected]
์์์ด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์๋์ง ํ์ธํ ์ ์์ต๋๋ค. @frodd ๋ ๊ทธ์ ์์ ์ฌํญ์ด ๊ด๋ จ์ด ์๋ค๊ณ ์๊ฐํ ์ ์์ต๋๋ค.
๋๋ ๊ทธ๊ฒ์ ํ ์คํธ ํ ๊ฒ์ ๋๋ค, ๊ทธ๋ฌ๋ ๋ง์กฑํ ๋ 2 ๊ฐ์ ๊ณต๊ฐ ๋ง ๋ง๋ค ์ ์์ผ๋ฉฐ ์ง๊ธ ๋ ๋ค ์ฌ์ฉํ๊ณ ์์ต๋๋ค : /, ๊ทธ์ค ํ๋๋ฅผ ์ญ์ ํ ์ ์์ต๋๋ค. ํ ์คํธ ํ ์์๋ ๋ค๋ฅธ ์ข์ ์์ ์ด ์์ต๋๊น? :) ๊ณ ๋ง์
์ด๋ด, ๋๋ fragment.js์ ๋ชจ๋ ๋ด์ฉ์ ์ญ์ ํ์ฌ ํด๊ฒฐํ์ต๋๋ค. ๋ค๋ฅธ ๊ฒ์ ์์ต๋๋ค. ํ์ผ์ ์ญ์ ํ ๋ ์๋ํ์ง ์๊ณ ๋ด์ฉ ๋ง ์ญ์ ๋์์ต๋๋ค.
fragments.js๋ฅผ ์ญ์ ํ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ง๋ง ์ด์์ ์ธ ํด๊ฒฐ์ฑ ์ ์๋๋๋ค. fragments.js ํ์ผ์ ์ด๋์ ์ฌ์ฉ๋ฉ๋๊น?
์ฝํ ์ธ ์ ๋ฏธ๋์ด ํ์ผ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ์ญ์์ค. ๊ทธ๋ฆฌ๊ณ ๊ฒ์๋ฌผ ์์ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด๋ณด์ธ์. ์ด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค. ์ด๋ป๊ฒ ๊ทธ๋ฆฌ๊ณ ์ ํ์คํ์ง ์์ต๋๋ค.
๋๋ ์ํด
๊ฐ์ฌํฉ๋๋ค @dreilacadin , ๋ฏธ๋์ด์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค.
๋ฐฉ๊ธ ์๋ก ์ค์นํ๋๋ฐ์ด ๋ฌธ์ ๊ฐ ๊ณ์ ๋ฐ์ํฉ๋๋ค. ํ์คํ ๋ฒ๊ทธ์ธ๊ฐ์?
๋ฐฉ๊ธ ์๋ก ์ค์นํ๋๋ฐ์ด ๋ฌธ์ ๊ฐ ๊ณ์ ๋ฐ์ํฉ๋๋ค. ํ์คํ ๋ฒ๊ทธ์ธ๊ฐ์?
@wardpeet ๊ทธ๋ ์ง ์์ ๊ฒ ๊ฐ์ต๋๋ค.
fragments.js์ ์ฝํ ์ธ ๋ฅผ ์ญ์ ํ๋ฉด ๋์๊ฒ๋ ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค.
๋ฏธ๋์ด์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๋ ํธ๋ฆญ์ผ๋ก ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค. ํ์ง๋ง ์ ์ด๋ฐ ์์ผ๋ก ์๋ํฉ๋๊น?
๊ฐ๋ฐ์ ์ํด ์์ ๋ fragments.js ์ญ์ . ๊ทธ๋ฌ๋ Netlify ๋น๋์์๋ ์์ ํ์ง ์์์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ฏธ๋์ด๋ฅผ ์ถ๊ฐํ๋ฉด ํจ๊ณผ๊ฐ์์์ต๋๋ค. ์ด ์ผ๋ง๋ ์์์ "์์ ".
๋ํ ๋ฏธ๋์ด ํญ์ ์๋ฆฌ ํ์ ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ์ฌ ํธ๋ฆญ์ ์ํํ์ต๋๋ค.
์๋ฆฌ ํ์ ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๊ณ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค.
์๋ฆฌ ํ์ ์ ์ด๋ฏธ์ง ์ถ๊ฐ๋ ๋๋ฅผ ์ํด ์ผํ์ต๋๋ค.
์๋ฆฌ ํ์ ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๋ฉด์ด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์์ ํ์ธํ ์๋ ์์ต๋๋ค.
(๊ฒ์ ๋จ!) ์๋ฆฌ ํ์ ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๋ ๊ฒ๋ ์ ์๊ฒ ํจ๊ณผ์ ์ด์์ต๋๋ค.
Contentful์ ๋ฏธ๋์ด ์์ฐ์ด ํ๋ ์ด์์๋ ๊ฒ์ด ๋ฌธ์ ์ธ ๊ฒ ๊ฐ์ต๋๋ค. ์ด ํ๋๊ฐ ๋๋ฝ๋๋ ๊ฒ์ ํ์ฉํ๋๋ก ์ฝ๋๋ฅผ ๋ณ๊ฒฝํ ์ ์์ต๋๊น?
์์ ์ฌ๋๋ค๊ณผ ๋์ผํ ํํ ๋ฆฌ์ผ์ ๋ฐ๋๋ค ๊ณ ์๊ฐํฉ๋๋ค ( "The Great Gatsby Bootcamp-Full Gatsby.js Tutorial Course"by Mr Andrew Mead, https://www.youtube.com/watch?v=kzWIUX3CpuI).
๋ฌธ์ ๊ฐ ์ฌ์ ํ ์กด์ฌํ๋ฉฐ /gatsby-source-contentful/src/
๋๋ ํ ๋ฆฌ์์ fragment.js
์ ๋ด์ฉ์ ์ญ์ ํ์ฌ ํด๊ฒฐํ ์ ์์ต๋๋ค.
์์์ ์ ์ํ๋๋ก ์ฌ์ดํธ์ Contentful ํญ๋ชฉ์ ์๋ฆฌ ํ์ ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ์ง ์์์ต๋๋ค. ๋ด ํ๋ก์ ํธ๋ ํํ ๋ฆฌ์ผ์ ๋ฐ๋ฅด๊ธฐ์ํ ๊ฒ์ด์ง๋ง ์์ฑ์๊ฐ ํญ์ ์ด๋ฏธ์ง๋ฅผ ์ ์ถํ๋๋กํ๊ณ ์ถ์ง ์์ต๋๋ค.
๋๋ ์ด๊ฒ์ด ๋ฏธ๋์ ์์์น ๋ชปํ ๋ถ์์ฉ์ ์ผ์ผํฌ ๊ฒ์ด๋ผ๋ ๊ฒ์ ํฌ๊ฒ ๋๋ ค์ํ๋ฉฐ ์์ผ๋ก ๋์๊ฐ ์ ์ ํ ํ๋ก์ ํธ๋ฅผ ์ํด ๋น๋์ค (Gatsby.js + Contentful)์ ์๋ฃจ์ ์ ์ฌ์ฉํ๋ ๊ฒ์ ๋งค์ฐ ์ฃผ์ ํฉ๋๋ค.
์๋ จ ๋ ๊ฐ๋ฐ์๊ฐ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์์๋ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
@ martink-rsa ๋๋ ๊ทธ ํํ ๋ฆฌ์ผ์ ๋ฐ๋ฅด์ง ์์์ต๋๋ค. ๋๋ ์ค์ ํ๋ก์ ํธ์์ ์ผํ๊ณ ์์ผ๋ฉฐ ๊ทธ ๋ฌธ์ ๋ ๋ฐ์ํ๊ณ ๋ด ํด๊ฒฐ์ฑ ์ ์๋ฆฌ ํ์ ์ ํธ๋ฆญ์ ์ํํ๋ ๊ฒ์ด ์์ต๋๋ค.
2.1.67
๋ฒ์ ์์์ด ์ค๋ฅ๊ฐ ๋ค์ ๋ฐ์ํฉ๋๋ค.
์ด ๋ฌธ์ ๋ ์ฝํ
์ธ ๊ฐ์๋ ์ฝํ
์ธ ์ ๋๋ฏธ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐ ํ ๊ฒฝ์ฐ์๋ 2.1.69
๋ฒ์ ์์ ๋ค์ ๋ฐ์ํ์ต๋๋ค.
fragement.js ํ์ผ์ ์ญ์ ํ๊ณ , ๋ชจ๋์ ๋ค์ ์ค์นํ์ฌ ์บ์๋ฅผ ์ ๋ฆฌํ๋ ๋ฑ ๋ชจ๋ ์ ์์ํ์ต๋๋ค. ๊ทธ๋ฌ๋ ์ ์๊ฒ ๋์์ด ๋ ๊ฒ์ Contentful์ ๋ฏธ๋์ด ํด๋์ "๋๋ฏธ"์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ์ต๋๋ค ... ยฏ_ (ใ) _ / ยฏ์ด ํ์คํ Bug
๋์๊ฐ๋ฉ๋๋ค.
@Kureyko ๋๊ธ์์ ..
์ต์ ๋ฒ์ 2.1.69
์์์ด ๋ฌธ์ ๋ฅผ ์ฌํ ํ ์ ์์ต๋๋ค.
blogPost
๋ผ๋ ์ฝํ
์ธ ๋ชจ๋ธ์ด ์์ต๋๋ค. ๊ฒ์ ๋ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ ๊ฒ์ ์ทจ์ํ๊ณ npm run develop
๋ฅผ ์คํํ๋ฉด gatsby๊ฐ
ERROR #11321 PLUGIN
"gatsby-node.js" threw an error while running the createPages lifecycle:
Cannot read property 'allContentfulBlogPost' of undefined
TypeError: Cannot read property 'allContentfulBlogPost' of undefined
- review-page.js:48 module.exports.buildReviewPages
build/review-page.js:48:22
- task_queues.js:85 processTicksAndRejections
internal/process/task_queues.js:85:5
- gatsby-node.js:7 async Object.module.exports.createPages
gatsby-node.js:7:3
- api-runner-node.js:235 async runAPI
๊ฐ์ธ ๋น๊ฐ ์ฑ๊ณต์ ๊ฑฐ๋๋ ค๋ฉด ํด๋น ๊ฒ์๋ฌผ์ ๋ค์ ๊ฒ์ํ๊ฑฐ๋ ์ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ ๊ฒ์ํด์ผํฉ๋๋ค.
์๋ ํ์ธ์,
์ฌ๊ธฐ์๋ ๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
๋น์ ์ด ๋จ์ํ ๋นจ๋ฆฌ Contentful์์ (์ด๋ฏธ ๋ชจ๋ ๋ฏธ๋์ด ์์ฐ๊ณผ ๊ด๋ จ๋) ๊ธฐ์กด์ ์ปจํ
์ธ ํญ๋ชฉ์ ๋ถ๋ฆฌ ํ ๋, ๊ฐ์ธ ๋น ํ๋ก์ ํธ์ ๋ฃจํธ์์๋ .cache ํ์ผ์ ์ญ์ ํ์ฌ ์๋ ํ ์์๋ ๊ฒฝ์ฐ์๋, ๊ฐ์ธ ๋น๋ฅผ ๋ค์ ์คํ ํ ํ ์ค๋ฅ์ ๋ฌด๋ฆฌ๋ฅผ ์ป์ :
์ค๋ฅ # 85901 GRAPHQL
GraphQL ์ฟผ๋ฆฌ์ ์ค๋ฅ๊ฐ ์์ต๋๋ค.
์ ์์๋ ์ ํ "ContentfulFixed".
ํ์ผ : node_modules / gatsby-source-contentful / src / fragments.js : 20 : 37
์ค๋ฅ # 85923 GRAPHQL
GraphQL ์ฟผ๋ฆฌ์ ์ค๋ฅ๊ฐ ์์ต๋๋ค.
"Query"์ ํ์์ "allContentfulBlogPost"ํ๋๋ฅผ ์ฟผ๋ฆฌ ํ ์ โโ์์ต๋๋ค.
์ค๋ฅ # 98123 ์นํฉ
์ค๋ฅ "Query"graphql / template-strings ์ ํ์์ "allContentfulBlogPost"ํ๋๋ฅผ ์ฟผ๋ฆฌ ํ ์ โโ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋ค์ ์๋ํ๊ฒํ๋ ค๋ฉด Gatsby ํ๋ก์ ํธ์ ๋ฃจํธ์์ .cache ํ์ผ์ ์ญ์ ํด์ผํฉ๋๋ค.
๊ทธ๊ฒ์ ์คํ๋ ค ๊ฐ์ธ ๋น์ ๊ด๋ จ๋ ๊ฒ ๊ฐ๋ค ๊ทธ๋์ Contenful์์ ์ฝํ ์ธ ๋ฅผ ์ญ์ ํ๋ ๊ฒฝ์ฐ, (ํ๋ฌ๊ทธ์ธ, ์บ์๋? ... ์์์ง๊ณ )!
๊ฑด๋ฐฐ
์ต์ ๋ฒ์
2.1.69
์์์ด ๋ฌธ์ ๋ฅผ ์ฌํ ํ ์ ์์ต๋๋ค.
blogPost
๋ผ๋ ์ฝํ ์ธ ๋ชจ๋ธ์ด ์์ต๋๋ค. ๊ฒ์ ๋ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ ๊ฒ์ ์ทจ์ํ๊ณnpm run develop
๋ฅผ ์คํํ๋ฉด gatsby๊ฐERROR #11321 PLUGIN "gatsby-node.js" threw an error while running the createPages lifecycle: Cannot read property 'allContentfulBlogPost' of undefined TypeError: Cannot read property 'allContentfulBlogPost' of undefined - review-page.js:48 module.exports.buildReviewPages build/review-page.js:48:22 - task_queues.js:85 processTicksAndRejections internal/process/task_queues.js:85:5 - gatsby-node.js:7 async Object.module.exports.createPages gatsby-node.js:7:3 - api-runner-node.js:235 async runAPI
๊ฐ์ธ ๋น๊ฐ ์ฑ๊ณต์ ๊ฑฐ๋๋ ค๋ฉด ํด๋น ๊ฒ์๋ฌผ์ ๋ค์ ๊ฒ์ํ๊ฑฐ๋ ์ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ ๊ฒ์ํด์ผํฉ๋๋ค.
์ปจํ ์ธ ์ ๋ฏธ๋์ด ํ์ผ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๊ณ ์๋ฒ๋ฅผ ๋ค์ ์์ํ์ญ์์ค.
์ปจํ ์ธ ์ ๋ฏธ๋์ด ํ์ผ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๊ณ ์๋ฒ๋ฅผ ๋ค์ ์์ํ์ญ์์ค.
์ด๊ฒ์ด ํญ์ ๊ฐ์ฅ ๋จผ์ ๋ฐ์ํ๋ ํด๊ฒฐ ๋ฐฉ๋ฒ์ด๋ฏ๋ก ์ด๋ฏธ ์๋ฃ๋์์ต๋๋ค.
์ฌ์ค, ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ๊ณผ ๊ด๋ จ๋ ๋ฏธ๋์ด ์์ฐ์ด ์์ต๋๋ค!
publishig๋ก ์๋ํ ๋ค์ Contentful์์ ์ฝํ
์ธ ํญ๋ชฉ์ ์ ๊ฑฐํด์ผํฉ๋๋ค ...
์ผ๋ฐ์ ์ผ๋ก .cache !!๋ฅผ ์ง์ธ ํ์๊ฐ ์์ต๋๋ค. ์ฝํ
์ธ ๊ฐ์๋ ์ฝํ
์ธ ์ Gatsby์ ์ฌ๋ฌ๊ทธ ์ฑ ์ฌ์ด์ ๋ชจ๋ '๋๊ธฐํ ํด์ '์ ๋ํด ์๋ฒ๋ฅผ ๋ค์ ์์ํ ์ ์์ต๋๋ค.
์๊ฒฌ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.
๋์ผํ ๋ฌธ์ ๋ฅผ ์ง๋จํ๋ ๋์์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ผ๋ฉฐ gatsby / packages / gatsby-source-contentful / src / gatsby-node.js ์ ์์ค ์ฝ๋์์๋์ด ์ฃผ์ ์ค ๋ํซ์ ๊ณต์ ํ ๊ฒ์ด๋ผ๊ณ ์๊ฐํ์ต๋๋ค.
// Check if there are any ContentfulAsset nodes and if gatsby-image is installed. If so,
// add fragments for ContentfulAsset and gatsby-image. The fragment will cause an error
// if there's not ContentfulAsset nodes and without gatsby-image, the fragment is useless.
GraphQL์ null ํญ๋ชฉ์ ์ ์ฒ๋ฆฌํ์ง ์๊ณ ๊ธฐ๋ณธ์ ์ผ๋ก Contentful์ ๋ชจ๋ ์์ฐ์ ๋ํด gatsby-source-contentul
ํ๋ฌ๊ทธ์ธ ์ฟผ๋ฆฌ๋ฅผ ์ํํ๊ธฐ ๋๋ฌธ์ ์ฐพ์ ์์ฐ์ด ์์ ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
๋ฌธ์ # 2392์ ํ ๋ก ์์ ์๋ง๋ gatsby-source-contentful
ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉ์ ์ ์ ์คํค๋ง๋ฅผ ์ถ๊ฐํ๋ฉด ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ๋ฐฉ์ง ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ๊ทธ ๋์ ์ต์ ์ "์์ "์ ๋จ์ํ Contentful> Media์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๋ fragments.js
๋ฅผ ์ ๊ฑฐํ๋ ๊ฒ์ด ์๋๋๋ค.
ํ์ผ!
์ด ๋ฌธ์ ๋ ์กฐ์ฉํด์ก์ต๋๋ค. ๋ฌด์ ๋ฌด์ํ ์กฐ์ฉํจ. ๐ป
๋ง์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ฏ๋ก ํ์ฌ 30 ์ผ ๋์ ํ๋์ด ์์ผ๋ฉด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํฉ๋๋ค. ์ฌ๊ธฐ์ ๋ง์ง๋ง์ผ๋ก ์
๋ฐ์ดํธ ํ ์ง 20 ์ผ์ด ์ง๋ฌ์ต๋๋ค.
์ด ๋ฌธ์ ๋ฅผ ๋์ณค๊ฑฐ๋ ๊ณ์ ์ด๋ ค๊ณ ์ถ๋ค๋ฉด ์ฌ๊ธฐ์์ ๋ต์ฅ ํด์ฃผ์ธ์. ์ด ๋ฌธ์ ๋ฅผ ๊ณ์ ์ด์ด๋๊ธฐ ์ํด "๋ถ์คํ์ง ์์"์ด๋ผ๋ ๋ ์ด๋ธ์ ์ถ๊ฐ ํ ์๋ ์์ต๋๋ค.
์ด ๋ฌธ์ ๋ ๋ค๋ฅธ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ Pull Request๋ฅผ ์ฌ๋ ๊ฒ์
๋๋ค. PR ์ด๊ธฐ, ๋ฌธ์ ๋ถ๋ฅ ๋ฐ ๊ธฐ์ฌ์ ๋ํ ์์ธํ ์ ๋ณด๋ gatsby.dev/contribute ๋ฅผ ํ์ธํ์ญ์์ค!
Gatsby ์ปค๋ฎค๋ํฐ์ ์ผ์์ด๋์ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค! ๐ช๐
๋ ์๋ !
์ด ๋ฌธ์ ์ ๋ํด ๋ฌด์จ ์ผ์ด ์ผ์ด๋ ์ง 30 ์ผ์ด ์ง๋ฌ์ผ๋ฏ๋ก ์ฐ๋ฆฌ์ ์น์ ํ ์ด์ ๋ก๋ด (๋์ผ!)์ด ๋ฌธ์ ๋ซ์ ๊ฒ์
๋๋ค.
์ ๋ ๋ก๋ด ์ผ ๋ฟ์ด๋ฏ๋ก์ด ๋ฌธ์ ๋ฅผ ์ค์๋ก ์ข
๋ฃํ๋ค๋ฉด HUMAN_EMOTION_SORRY
์
๋๋ค. ์ด ๋ฌธ์ ๋ฅผ ๋ค์ ์ด๊ฑฐ ๋ ๋ค๋ฅธ ๊ฒ์ด ํ์ํ๋ฉด ์ ๋ฌธ์ ๋ฅผ ๋ง๋์ญ์์ค.
์ด ๋ฌธ์ ๋ ๋ค๋ฅธ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ Pull Request๋ฅผ ์ฌ๋ ๊ฒ์
๋๋ค. PR ์ด๊ธฐ, ๋ฌธ์ ๋ถ๋ฅ ๋ฐ ๊ธฐ์ฌ์ ๋ํ ์์ธํ ์ ๋ณด๋ gatsby.dev/contribute ๋ฅผ ํ์ธํ์ญ์์ค!
Gatsby ์ปค๋ฎค๋ํฐ์ ์ฐธ์ฌํด ์ฃผ์ ์ ๋ค์ ํ ๋ฒ ๊ฐ์ฌ๋๋ฆฝ๋๋ค! ๐ช๐
๋จ์ผ ๋ฏธ๋์ด ์์๋ฅผ ์ถ๊ฐํ๋ ๊ฒ๋ ์ ์๊ฒ ํจ๊ณผ์ ์ด์ง๋ง ๊ถ๊ธํฉ๋๋ค.์ด ๋ฒ๊ทธ์ ๊ทผ๋ณธ ์์ธ์ด Contentful์ API ๋๋ gatsby-source-contentful์ ๋๊น?
๋๋ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
ํธ์ง : ์ด๋ฏธ์ง ์์ฐ์ ์ถ๊ฐํ๊ณ ํด๋น ์ด๋ฏธ์ง๋ฅผ ํ์ํ๋ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ ์์ฑํ๋ฉด ๋ฌธ์ ๊ฐ "์์ ๋"๊ฒ์ผ๋ก ๋ณด์ ๋๋ค.
myName<strong i="8">@myComputer</strong>:~/www/gatsby-bootcamp$ rm -rf .cache && npm run develop
> [email protected] develop /home/myName/www/gatsby-bootcamp
> env-cmd -f env.development gatsby develop
success open and validate gatsby-configs - 0.067s
success load plugins - 2.227s
success onPreInit - 0.005s
success initialize cache - 0.014s
success copy gatsby files - 0.117s
success onPreBootstrap - 0.015s
success createSchemaCustomization - 0.489s
Starting to fetch data from Contentful
Fetching default locale
default locale is : en-US
contentTypes fetched 1
Updated entries 2
Deleted entries 0
Updated assets 0
Deleted assets 0
Fetch Contentful data: 315.783ms
success source and transform nodes - 0.600s
success building schema - 0.405s
success createPages - 0.032s
success createPagesStatefully - 0.072s
success onPreExtractQueries - 0.004s
success update schema - 0.037s
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:20:37
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:34:47
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:48:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:61:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFixed". Did you mean "ContentfulBlogPost", "ContentfulBlogPostEdge", or "ContentfulContentType"?
File: node_modules/gatsby-source-contentful/src/fragments.js:77:55
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:92:37
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:106:47
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:120:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:133:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulFluid". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:149:55
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:161:43
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:171:53
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:181:52
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:190:52
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulResolutions". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", "ContentfulBlogPostEdge", or "ContentfulBlogPostConnection"?
File: node_modules/gatsby-source-contentful/src/fragments.js:202:61
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:213:37
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:223:47
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:233:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:242:46
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "ContentfulSizes". Did you mean "ContentfulBlogPost", "ContentfulBlogPostSys", "ContentfulContentType", or "ContentfulBlogPostEdge"?
File: node_modules/gatsby-source-contentful/src/fragments.js:254:55
failed extract queries from components - 0.695s
success write out requires - 0.037s
success write out redirect data - 0.007s
success onPostBootstrap - 0.003s
โ
info bootstrap finished - 9.644 s
โ
success run queries - 0.148s - 11/12 80.81/s
success Generating image thumbnails - 0.900s - 3/3 3.33/s
โ
You can now view gatsby-starter-hello-world in the browser.
โ
http://localhost:8000/
โ
View the GraphQL Playground, an in-browser IDE, to explore your site's data and schema
โ
http://localhost:8000/___graphql
โ
Note that the development build is not optimized.
To create a production build, use gatsby build
โ
success Building development bundle - 5.216s
์ด ๋ฌธ์ ๋ ์ ๋ง๋ก ์ข ๊ฒฐ๋์ด์๋ ์๋ฉ๋๋ค. ์๋ ค์ง ์์ธ์ด ์์ต๋๋ค (๋ฏธ๋์ด ์์ฐ์ด์๋ ์ฝํ ์ธ ๊ณต๊ฐ ์ฌ์ฉ). ๋ํ์ด ํ ๋ก ์ ๋ํ ๋๊ธ ์์ ๋๊ธ์ ๋ํ ๋ฐ์์ ๊ณ ๋ คํ ๋ ์๋นํ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
์ด๊ฒ์ ๋ค์ ํ์ฑํํ๊ณ ๋ด์ด ๋ซ๋ ๊ฒ์ ๋ฐฉ์ง ํ ์์๋ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
(์ฃผ์ ์์ ๋ฒ์ด๋จ : ๋ฌธ์ ๋ฅผ ์๋์ผ๋ก ๋ซ๋ ๋ด์ ์คํํ๋ ์ ์ง ๊ด๋ฆฌ์์ ๊ฒฝํฅ์ด ์ ๋ง ๋ง์์ ๋ค์ง ์์ต๋๋ค. 30 ์ผ ๋์ ๋๊ธ์ด ์๋ค๊ณ ํด์ ๋ฌธ์ ๊ฐ ๋ ํ์ค์ ์ด๊ฑฐ๋ ์ํฅ์ ๋ฏธ์น์ง๋ ์์ต๋๋ค. ๋์์ด๋์ง ์๋ "+1"์ ๊ถ์ฅํฉ๋๋ค. "์ด์์๋"์ด์๋ฅผ ์ ์งํ๊ธฐ์ํ ์ฝ๋ฉํธ)
๊ณ์ ์ด๋ ค ์์ด์ผํ๋ค๋ ๋ฐ ๋์ํ๋ฏ๋ก ๋ค์ ์ฝ๋ ๋ค.
๋๊ตฌ๋ ์ง ์ด๊ฒ์ ๊ณ ์น๋ ๋ฐฉ๋ฒ์ ๋ํ ์์ด๋์ด๊ฐ ์์ต๋๊น?
https://github.com/gatsbyjs/gatsby/issues/15397์ ๋ณต์ ๋ ์ด๋ค ๊ฒ์ด ์ค์ ๋ก ์ด์ด๋๊ธฐ์ ๊ฐ์ฅ ์ข์ ์ค๋ ๋์ธ์ง ํ์คํ์ง ์์ต๋๋ค.
์ต๊ทผ์ ์ฐพ์ ๋ด์ฉ์ ๋ํด ๋ค๋ฅธ ์ค๋ ๋์ ๋ํ ์ธ๋ถ ์ ๋ณด๋ฅผ ์ถ๊ฐํ์ต๋๋ค. ์ด๊ฒ์ด ์ธ์ ๋์ ๋์๋์ง์ ๋ํด; ํํฌ๋ฅผ ์ฝ์ ํ์ฌ ๊ณ ์ ํ ์์๋ ์์น์ ๋๋ค.
์๋ ๊ตฌ์ฑ์ gatsby-config.js์ ์ถ๊ฐํ์ต๋๋ค.
{
resolve: "gatsby-source-filesystem",
options: {
name: "src",
path:
$ {__ dirname} / src ,
},
}
๋์ผํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ฌ ์ ์ ๋ ๊ฒ๊ณผ ๊ฐ์ ๋ฏธ๋์ด ์์ฐ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ์ผ๋ฉฐ ์๋ํ์ต๋๋ค. ๋ง์ด ์๋์ง๋ง ์์์๋ฅผ ์ฌ์ฉํ์ต๋๋ค ...
๋์ผ ... Contentful์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐ ํ ํ ๋ฌธ์ ๊ฐ ์ฌ๋ผ์ก์ต๋๋ค. ๋ด๊ฐ ๋ณธ ๊ฐ์ฅ ์ด์ํ ๊ฒ ...; -9
๊ทธ๋ฆฌ๊ณ : ๊ฒธ์ํ ์ง๊ตฌ์ธ๋ค์ด ์ฐ๋ฆฌ์๊ฒ๋ง ์ผ์ด๋๋ ์ผ์ด ์๋๋๋ค. ์ฌ๊ธฐ์์๋ ๊ฐ์ ์ผ์ด ์ผ์ด๋๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค : https://www.youtube.com/watch?v=T9hLWjIN-pY
๋ชจ๋ ํธ๋ฆญ์ ์๋ํ ํ ๋ง์นจ๋ด ์ด๋ฏธ์ง๋ฅผ ์
๋ก๋ํ๋ฉด ์๋ํฉ๋๋ค. Jason Lengstorf ์์ ๋ ์ด๊ฒ์ด 'ํ์คํ ๊ฐ์ธ ๋น ๋ฌธ์ '๋ผ๊ณ ์ธ์ ํฉ๋๋ค!
์ค๋ฅ # 85901 GRAPHQL
์ฝํ ์ธ ๊ฐ ๋ง์ ๋ธ๋ก๊ทธ์์ ๋ด ๋ธ๋ก๊ทธ๋ฅผ ๊ฐ์ ธ ์ค๋ ค๊ณ ํ๋๋ฐ ์ด์ํ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
์ด ๋ฌธ์ ๋ฅผ ์ฌ๋ ์ ์ผํ ์ด์ ๋ ์ค๋ฅ๊ฐ ๋ด๊ฒ ๊ทธ๋ ๊ฒ ๋งํ๊ธฐ ๋๋ฌธ์ ๋๋ค.์ด๊ฒ์ ์ค๋ฅ๊ฐ ๋งํ ๊ฒ์ ๋๋ค.
์ค๋ฅ :์ด StaticQuery์ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค."์ด๊ฒ์ Gatsby์ ๋ฒ๊ทธ ์ผ ์ ์์ผ๋ฉฐ ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์นจํด๋ ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์ง ์์ผ๋ฉด https://github.com/gatsbyjs/gatsby/issues ์์ ๋ฌธ์ ๋ฅผ์ฌ์ธ์."
๊ฐ์ธ ๋น ์ ๋ณด ์ถ๋ ฅ :
์ฒด๊ณ:
์ด์์ฒด์ : Windows 10
CPU : (8) x64 Intel (R) Core (TM) i7-3632QM CPU @ 2.20GHz
๋ฐ์ด๋๋ฆฌ :
npm : 6.9.0-C : \ Program Filesnodejsnpm.CMD
์ธ์ด :
ํ์ด์ฌ : 3.7.2
๋ธ๋ผ์ฐ์ :
๊ฐ์ฅ์๋ฆฌ : 44.18362.1.0
npm ํจํค์ง :
๊ฐ์ธ ๋น : ^ 2.13.51 => 2.13.51
gatsby-plugin-sass : ^ 2.1.4 => 2.1.4
gatsby-plugin-sharp : ^ 2.2.10 => 2.2.10
๊ฐ์ธ ๋น ๋ฐ์ธ ์ด๋ฏธ์ง : ^ 3.1.7 => 3.1.7
๊ฐ์ธ ๋น ๋ฐ์ธ ์๋ ์ด๋ฏธ์ง : ^ 0.2.3 => 0.2.3
gatsby-source-contentful : ^ 2.1.18 => 2.1.18
๊ฐ์ธ ๋น ์์ค ํ์ผ ์์คํ : ^ 2.1.9 => 2.1.9
๊ฐ์ธ ๋น ๋ณ์๊ธฐ ๋ฐ์ธ : ^ 2.6.11 => 2.6.11์ค๋ฅ ์ฒ๋ฆฌ๋์ง ์์ ๊ฑฐ๋ถ
์ค๋ฅ : ์์คํ ์ด ์ง์ ๋ ๊ฒฝ๋ก๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.
- envinfo.js : 1 Function.e.exports.sync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:4908- envinfo.js : 1 Object.copySync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:66886- envinfo.js : 1 Object.t.writeSync
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:48715- envinfo.js : 1
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:46872- envinfo.js : 1
[v12.0.0] / [gatsby-cli] / [envinfo] /dist/envinfo.js:1:46887- task_queues.js : 88 processTicksAndRejections
internal / process / task_queues.js : 88 : 5
๋น์ ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐ ํ ํ์๊ฐ contentful ๋น์ ์ด ๊ทธ๋ ๊ฒ ๋ชจ๋ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐ ํ๋ถํ ํ ์คํธ ์์๋ฅผ ์ ํํ ๋ค์ ์๋ฒ๋ฅผ ๋ค์ ์์ํ๊ณ ์ด๋ฌํ ์ค๋ฅ๋ ์ฌ๋ผ์ง ๊ฒ ๋๋ฌธ์ ์ ์ฒด ์ผ๋ถ ์ฌ์ดํธ.
์ด ์๋ฃจ์ ๋ณด๋ค ๋ ๋์ ์๋ฃจ์ ์ ๋ํ ํผ๋๋ฐฑ์ด๋ ์ ์์ ์ ๊ณตํ์ญ์์ค. #happyCoding :)
์ฒจ๊ฐ
{ resolve: "gatsby-source-filesystem", options: { name: "src", path: ${__dirname}/src, }, }
gatsby-config.js๊ฐ ๋์์ด๋์์ต๋๋ค.
https://itnext.io/content-management-with-gatsby-netlify-and-contentful-70f03de41602 ๋ฅผ ๋ฐ๋ฅด๋ ๋์์ด ์ค๋ฅ๋ฅผ ์ฌํ ํ ์
node_modules / gatsby-source-contentful / sec / fragments.js๋ฅผ ์ญ์ ํ๋ฉด ์ค๋ฅ๊ฐ "์์ "๋ ๊ฒ ๊ฐ์ต๋๋ค.
๋๋ฅผ ์ํด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค. ๊ฐ์ฌ
๊ฐ์ฌํฉ๋๋ค.
ํ์ผ!
์ด ๋ฌธ์ ๋ ์กฐ์ฉํด์ก์ต๋๋ค. ๋ฌด์ ๋ฌด์ํ ์กฐ์ฉํจ. ๐ป
๋ง์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ฏ๋ก ํ์ฌ 30 ์ผ ๋์ ํ๋์ด ์์ผ๋ฉด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํฉ๋๋ค. ์ฌ๊ธฐ์ ๋ง์ง๋ง์ผ๋ก ์
๋ฐ์ดํธ ํ ์ง 20 ์ผ์ด ์ง๋ฌ์ต๋๋ค.
์ด ๋ฌธ์ ๋ฅผ ๋์ณค๊ฑฐ๋ ๊ณ์ ์ด๋ ค๊ณ ์ถ๋ค๋ฉด ์ฌ๊ธฐ์์ ๋ต์ฅ ํด์ฃผ์ธ์. ์ด ๋ฌธ์ ๋ฅผ ๊ณ์ ์ด์ด๋๊ธฐ ์ํด "๋ถ์คํ์ง ์์"์ด๋ผ๋ ๋ ์ด๋ธ์ ์ถ๊ฐ ํ ์๋ ์์ต๋๋ค.
์ด ๋ฌธ์ ๋ ๋ค๋ฅธ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ Pull Request๋ฅผ ์ฌ๋ ๊ฒ์
๋๋ค. PR ์ด๊ธฐ, ๋ฌธ์ ๋ถ๋ฅ ๋ฐ ๊ธฐ์ฌ์ ๋ํ ์์ธํ ์ ๋ณด๋ gatsby.dev/contribute ๋ฅผ ํ์ธํ์ญ์์ค!
Gatsby ์ปค๋ฎค๋ํฐ์ ์ผ์์ด๋์ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค! ๐ช๐
์ด๊ฒ์ ๋นํ์ฑํํ๋ ๋ฐฉ๋ฒ์ด ์์ต๋๊น? โ๏ธ
์ด ๋ฌธ์ ๋ Contentful๊ณผ ํจ๊ป Gatsby๋ฅผ ์ฌ์ฉํ๋ ๋ชจ๋ ์ฌ๋์๊ฒ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ์ ์๊ฐ์๋ ์ด๊ฒ์ ๋ํ ์์ (ํด๊ฒฐ์ฑ ์ด ์๋ ์ค์ ์์ )์ ์ฐพ์ ๋๊น์ง ๋ซ์์๋ ์๋ฉ๋๋ค.
์ด๊ฒ์ ์ด์ https://github.com/gatsbyjs/gatsby/issues/15397 ์ ์ค๋ณต์ด๋ฉฐ ์ฐ๋ฆฌ๋ ๊ฑฐ๊ธฐ์์ ๊ทธ๊ฒ์ ์ถ์ ํ๊ณ ์ถ์ต๋๋ค.
๋์ผํ ์ค๋ฅ๊ฐ์๋ ๊ฒฝ์ฐ ๋ค์ ๋จ๊ณ๋ฅผ ์ํํ์ฌ ๋ฐ์ดํฐ๋ฅผ ์ญ์ ํ๊ฑฐ๋ ํจํค์ง๋ฅผ ๋ค์ด ๊ทธ๋ ์ด๋ํ์ง ์๊ณ ๋ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค.
- ์ฝํ ์ธ ๊ฐ์๋ ๊ณต๊ฐ์ผ๋ก ์ด๋
- '๋ฏธ๋์ด'ํญ์ ํด๋ฆญํ๊ณ ๋จ์ผ ์์ฐ์ ๋๋ฏธ ์ด๋ฏธ์ง๋ก ์ถ๊ฐํ์ฌ ์๋ฆฌ ํ์ ์ ์ญํ ์ํฉ๋๋ค.
npm run develop
๋๋gatsby develop
๋ฅผ ์คํํ์ฌ dev ์๋ฒ๋ฅผ ๋ค์ ์์ํฉ๋๋ค.๋ฐ๋ผ๊ฑด๋, ์ด๊ฒ์ด ๋น์ ์ ๋ฌธ์ ๋ ํด๊ฒฐํ๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๋๊ตฐ๊ฐ ์ด๊ฒ์ด ์ ๊ทธ๋ฐ์ง ์ฐ๋ฆฌ์๊ฒ ์๋ ค์ค ์ ์๋ค๋ฉด ๋์์ด ๋ ๊ฒ์ ๋๋ค.
๋ฏธ๋์ด ์์ฐ์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ๋ ๊ฒ๋ ์ ์๊ฒ ํจ๊ณผ์ ์ด์์ต๋๋ค. ์ด์ ๋ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋์ผํ ์ค๋ฅ๊ฐ์๋ ๊ฒฝ์ฐ ๋ค์ ๋จ๊ณ๋ฅผ ์ํํ์ฌ ๋ฐ์ดํฐ๋ฅผ ์ญ์ ํ๊ฑฐ๋ ํจํค์ง๋ฅผ ๋ค์ด ๊ทธ๋ ์ด๋ํ์ง ์๊ณ ๋ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค.
npm run develop
๋๋gatsby develop
๋ฅผ ์คํํ์ฌ dev ์๋ฒ๋ฅผ ๋ค์ ์์ํฉ๋๋ค.๋ฐ๋ผ๊ฑด๋, ์ด๊ฒ์ด ๋น์ ์ ๋ฌธ์ ๋ ํด๊ฒฐํ๊ธฐ๋ฅผ ๋ฐ๋๋๋ค. ๋๊ตฐ๊ฐ ์ด๊ฒ์ด ์ ๊ทธ๋ฐ์ง ์ฐ๋ฆฌ์๊ฒ ์๋ ค์ค ์ ์๋ค๋ฉด ๋์์ด ๋ ๊ฒ์ ๋๋ค.