김태희
대충_잼이_쌓여있는_사진.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에 통합됨