김태희
대충_잼이_쌓여있는_사진.png
대충_잼이_쌓여있는_사진.png
JavaScript
JavaScript
APIs
JavaScript
APIs
Markup
JavaScript
APIs
Markup
Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
....and many more
멜론에서 이디어츠를 검색하세요
/contact
/discography
/
/live
/movies
/photos
src/pages 아래에 있는 컴포넌트의
확장자를 제외한 파일명이 url이 됩니다.
Text
... { resolve: `gatsby-source-filesystem`, options: { name: 'src', path: `${__dirname}/src/`, }, }, 'gatsby-transformer-remark', ...
--- type: 'live' title: '2020 PUNK Marathon' posterUrl: '' posterUrls: [ { src: '/images/posters/2020-02/82191077_479553396078214_6170799798740844544_o.jpg', alt: '2020 펑크마라톤 공식 포스터', width: 680, height: 960, }, { src: '/images/posters/2020-02/goinmul.jpg', alt: '2020 펑크마라톤 포스터', width: 1926, height: 1926, }, ] place: '고인물' date: '2020.02.22' teams: ['링고포레스트', '노앤써', '오버헤드', '코인클래식'] priceInfos: [ '예매 5일권: 50,000원 (full pass) (50% 할인) + 1일권 게스트 티켓 2매 증정', '예매 4일권: 45,000원 (4-day pass)(44% 할인) + 1일권 게스트 티켓 1매 증정', '예매 3일권: 35,000원 (3-day pass)(42% 할인)', '예매 2일권: 25,000원 (2-day pass)(37% 할인)', '예매 1일권: 15,000원 (1-day pass)(25% 할인)', '당일 현매: 20,000원', ] eventLink: 'https://www.facebook.com/hippytokki/posts/479149026118651' ticketLink: 'https://docs.google.com/forms/d/e/1FAIpQLSeh6-iz-uWGq2LB8uvcSG6Wtm4QAAuBTmWy4hSU-WKa19Bd9w/viewform?vc=0&c=0&w=1&fbclid=IwAR0ajB3k7KoW-QwAzET_UBUEPWIBONWar7ZN1DdCOFecboytpY3fY2bMqfw' --- test
src/pages/live/2020-punk-marathon.md
md 파일 path를 url으로 사용합니다.
/live/2020-punk-marathon/
{ allMarkdownRemark( filter: { frontmatter: { type: { eq: "live" } } } sort: { fields: [frontmatter___date], order: DESC } ) { edges { node { id frontmatter { date title } fields { slug } } } } }
{ "data": { "allMarkdownRemark": { "edges": [ { "node": { "id": "9cf14b80-b26a-5a37-a280-5e2881fb8b00", "frontmatter": { "date": "2020.2.22", "title": "2020 PUNK Marathon" }, "fields": { "slug": "/live/2020-punk-marathon/" } } }, { "node": { "id": "b7d7fd44-9f6b-5941-adf2-d1739e2df65a", "frontmatter": { "date": "2020.01.09", "title": "오롯한 라이브와 함께" }, "fields": { "slug": "/live/o-rot-han-live/" } } }, { "node": { "id": "35a154ac-53b2-5cf5-b74a-c505da1e06c0", "frontmatter": { "date": "2019.12.12", "title": "LIVE in DEC 2019" }, "fields": { "slug": "/live/live-in-dec-2019/" } } }, { "node": { "id": "aaadce5a-9584-51f2-95ef-389166a62bc3", "frontmatter": { "date": "2019.11.28", "title": "LIVE in NOV 2019" }, "fields": { "slug": "/live/live-in-nov-2019/" } } }, { "node": { "id": "3117ad79-83d6-53dd-bf05-01d4e0d65ced", "frontmatter": { "date": "2019.1.29", "title": "이디어츠 1st EP 발매기념 공연" }, "fields": { "slug": "/live/idiots-1st-ep/" } } } ] } } }
live md 파일로 공연 페이지 빌드하기
// gatsby-node.js exports.onCreateNode = ({ node, getNode, actions }) => { const { createNodeField } = actions if (node.internal.type === `MarkdownRemark`) { const slug = createFilePath({ node, getNode, basePath: `pages` }) createNodeField({ node, name: `slug`, value: slug, }) } // graphql로 type이 live인 md 파일만 가져옴 // slug는 src를 기준으로 폴더명과 파일명 const result = await graphql(` { allMarkdownRemark(filter: {frontmatter: {type: {eq: "live"}}}) { edges { node { fields { slug } } } } }`) // 위에서 가져온 md 파일로 slug에 해당하는 파잉 생성 result.data.allMarkdownRemark.edges.forEach(({ node }) => { createPage({ path: node.fields.slug, component: path.resolve('./src/components/LiveDetail.tsx'), context: { slug: node.fields.slug, }, }) console.log(`${node.fields.slug} created,`) }) }
gatsby-node.js 에서 createPage한 페이지들이
pre-rendering 되고, slug 경로에 맞게
pre-rendering 된 결과물이 index.html로 생성
/live/2020-03-20-for-the-new-kids/
/live/2020-03-bbang/
/live/idiots-1st-ep/
createPage로 정의하지 않은 모든 url
생성된 static resources만 배포하면 끝!
...and many more
static hosting만 필요하기 때문에,
별도로 관리해야하는 웹서버가 필요🙅♂️
outsider님의 블로그 https://blog.outsider.ne.kr/1426 를 참고하시면 됩니다.
...and many more
트위터 친구분이 추천해주심
REST API 형태
graphql 형태
// gatsby-config.js ... { resolve: 'gatsby-source-strapi', options: { apiURL: 'https://admin.idiots.band', contentTypes: [ // List of the Content Types you want to be able to request from Gatsby. 'albums', 'lives', 'home-content', ], queryLimit: 1000, }, }, ...
자동으로 gatsby의 graphql에 통합됨