Gatsby: 마크 λ‹€μš΄μ˜ λ³€μˆ˜?

에 λ§Œλ“  2018λ…„ 11μ›” 28일  Β·  1논평  Β·  좜처: gatsbyjs/gatsby

μš”μ•½

마크 λ‹€μš΄ νŽ˜μ΄μ§€μ— κ°’μœΌλ‘œ λŒ€μ²΄λ˜λŠ” λ³€μˆ˜λ₯Ό κ°–λŠ” 방법이 μžˆμŠ΅λ‹ˆκΉŒ? URL둜 μ„œλΉ„μŠ€μ— λŒ€ν•œ λ¬Έμ„œλ₯Ό μž‘μ„± μ€‘μž…λ‹ˆλ‹€. URL은 λͺ‡ 개의 마크 λ‹€μš΄ νŒŒμΌμ— 있으며 λ³€κ²½ 될 경우 μ°Ύμ•„μ„œ ꡐ체 ν•  ν•„μš”κ°€ μ—†μŠ΅λ‹ˆλ‹€.

Markdownμ—μ„œ μ‚¬μš©μž μ»΄ν¬λ„ŒνŠΈλ₯Ό μΆ”κ°€ν•˜λŠ” κ°€μž₯ 쒋은 방법은 λ¬΄μ—‡μž…λ‹ˆκΉŒ? 이것을 μœ„ν•΄ 무거운 것 κ°™μŠ΅λ‹ˆλ‹€.

question or discussion

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

이에 λŒ€ν•œ μ•½κ°„μ˜ μ‚¬μš©μž 지정 λ„μš°λ―Έλ₯Ό μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€ (λ˜λŠ” lodash.template https://lodash.com/docs/4.17.11#templateκ³Ό 같은 것을 μ‚¬μš©).

λΉ λ₯΄κ³  λ”λŸ¬μš΄ 해결책은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

λ‹€μŒ λ‚΄μš©μ΄ 포함 된 sample.md 마크 λ‹€μš΄ 파일이 μ œκ³΅λ©λ‹ˆλ‹€.

---
title: Sample
---

## Hello World

This is a [link](%URL%/sub-path), and so is [this](%URL%/sub-path)

νŒŒμΌμ„ μƒμ„±ν•˜κ³  ( src/utils/template.js λΌκ³ ν•©μ‹œλ‹€) λ‹€μŒκ³Ό 같이 μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

export default function template(content, data) {
  return content.replace(/%(.+)%/g, (match, key) => {
    const value = data[key]
    if (typeof value !== 'undefined') {
      return value
    }
    return match // guards against some unintentional prefix
  });
}

이제 λͺ¨λ‘ ν•¨κ»˜ μ—°κ²°ν•˜κ³ ,이 ν…œν”Œλ¦Ώ κΈ°λŠ₯을 _use_ν•˜μ—¬ μ½˜ν…μΈ λ₯Ό κ΅μ²΄ν•˜λ©΄λ©λ‹ˆλ‹€. data κ°œμ²΄λŠ” μ›ν•˜λŠ”λŒ€λ‘œ μ‚¬μš©ν•  수 있으며 μ–΄λ””μ—μ„œλ‚˜ κ°€μ Έμ˜¬ 수 μžˆμŠ΅λ‹ˆλ‹€ (예 : graphql, 일뢀 μƒμˆ˜ 파일, ν™˜κ²½ λ³€μˆ˜ λ“±).

import React from 'react'

import template from '../utils/template';

const URL = 'https://google.com'; // this can be from wherever

export default function SomeMarkdownPage({ data }) {
  // data is from GraphQL, presume the parent is data.markdown
  return (
    <div dangerouslySetInnerHTML={{
      __html: template(data.markdown.html, {
        URL
      })
    }} />
  )
}

이게 말이 돼? 이것은 μƒλ‹Ήνžˆ μœ μš©ν•œ gatsby-remark- ν”ŒλŸ¬κ·ΈμΈ 일 μˆ˜λ„ μžˆμ§€λ§Œ, 그것이 μ‘΄μž¬ν•˜λŠ”μ§€ ν™•μ‹€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€! 글을 μ“°λŠ” 데 관심이 μžˆλ‹€λ©΄ 멋지 κ² μ§€λ§Œ μ§€κΈˆμ€ μ‚¬μš© μ‚¬λ‘€μ—μ„œ ν™•μ‹€νžˆ μž‘λ™ν•©λ‹ˆλ‹€!

λ‹΅λ³€μœΌλ‘œ μ’…λ£Œν•˜κ² μŠ΅λ‹ˆλ‹€. μΆ”κ°€λ‘œ 도움이 ν•„μš”ν•˜λ©΄ μ–Έμ œλ“ μ§€ λ‹€μ‹œ μ—΄μ–΄ μ£Όμ‹œκΈ° λ°”λžλ‹ˆλ‹€. Gatsbyλ₯Ό μ‚¬μš©ν•΄ μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€!

>λͺ¨λ“  λŒ“κΈ€

이에 λŒ€ν•œ μ•½κ°„μ˜ μ‚¬μš©μž 지정 λ„μš°λ―Έλ₯Ό μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€ (λ˜λŠ” lodash.template https://lodash.com/docs/4.17.11#templateκ³Ό 같은 것을 μ‚¬μš©).

λΉ λ₯΄κ³  λ”λŸ¬μš΄ 해결책은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

λ‹€μŒ λ‚΄μš©μ΄ 포함 된 sample.md 마크 λ‹€μš΄ 파일이 μ œκ³΅λ©λ‹ˆλ‹€.

---
title: Sample
---

## Hello World

This is a [link](%URL%/sub-path), and so is [this](%URL%/sub-path)

νŒŒμΌμ„ μƒμ„±ν•˜κ³  ( src/utils/template.js λΌκ³ ν•©μ‹œλ‹€) λ‹€μŒκ³Ό 같이 μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

export default function template(content, data) {
  return content.replace(/%(.+)%/g, (match, key) => {
    const value = data[key]
    if (typeof value !== 'undefined') {
      return value
    }
    return match // guards against some unintentional prefix
  });
}

이제 λͺ¨λ‘ ν•¨κ»˜ μ—°κ²°ν•˜κ³ ,이 ν…œν”Œλ¦Ώ κΈ°λŠ₯을 _use_ν•˜μ—¬ μ½˜ν…μΈ λ₯Ό κ΅μ²΄ν•˜λ©΄λ©λ‹ˆλ‹€. data κ°œμ²΄λŠ” μ›ν•˜λŠ”λŒ€λ‘œ μ‚¬μš©ν•  수 있으며 μ–΄λ””μ—μ„œλ‚˜ κ°€μ Έμ˜¬ 수 μžˆμŠ΅λ‹ˆλ‹€ (예 : graphql, 일뢀 μƒμˆ˜ 파일, ν™˜κ²½ λ³€μˆ˜ λ“±).

import React from 'react'

import template from '../utils/template';

const URL = 'https://google.com'; // this can be from wherever

export default function SomeMarkdownPage({ data }) {
  // data is from GraphQL, presume the parent is data.markdown
  return (
    <div dangerouslySetInnerHTML={{
      __html: template(data.markdown.html, {
        URL
      })
    }} />
  )
}

이게 말이 돼? 이것은 μƒλ‹Ήνžˆ μœ μš©ν•œ gatsby-remark- ν”ŒλŸ¬κ·ΈμΈ 일 μˆ˜λ„ μžˆμ§€λ§Œ, 그것이 μ‘΄μž¬ν•˜λŠ”μ§€ ν™•μ‹€ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€! 글을 μ“°λŠ” 데 관심이 μžˆλ‹€λ©΄ 멋지 κ² μ§€λ§Œ μ§€κΈˆμ€ μ‚¬μš© μ‚¬λ‘€μ—μ„œ ν™•μ‹€νžˆ μž‘λ™ν•©λ‹ˆλ‹€!

λ‹΅λ³€μœΌλ‘œ μ’…λ£Œν•˜κ² μŠ΅λ‹ˆλ‹€. μΆ”κ°€λ‘œ 도움이 ν•„μš”ν•˜λ©΄ μ–Έμ œλ“ μ§€ λ‹€μ‹œ μ—΄μ–΄ μ£Όμ‹œκΈ° λ°”λžλ‹ˆλ‹€. Gatsbyλ₯Ό μ‚¬μš©ν•΄ μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€!

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰