TaeHee Kim
Software Engineer / Bassist
김태희
대충_잼이_쌓여있는_사진.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'
---
testsrc/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에 통합됨
By TaeHee Kim
JAMStack에 대한 간략한 소개 및 실제 적용경험을 공유하는 슬라이드