πŸ€” 3. μž‘μ„± κ°€μ΄λ“œ

@Hudi Β· April 03, 2021 Β· 5 min read

1. 포슀트 μΆ”κ°€ν•˜κΈ°

contents/post κ²½λ‘œμ— μƒˆλ‘œμš΄ λ§ˆν¬λ‹€μš΄ νŒŒμΌμ„ μƒμ„±ν•˜μ—¬ μ—¬λŸ¬λΆ„μ˜ 글을 μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

1-1. 포슀트 파일 ꡬ쑰

μƒˆλ‘œμš΄ λ¬Έμ„œλ₯Ό μΆ”κ°€ν•˜λŠ” λ°©λ²•μ—λŠ” 두가지가 μžˆμŠ΅λ‹ˆλ‹€. μ²«λ²ˆμ§ΈλŠ” 디렉토리 없이 λ¬Έμ„œλ₯Ό μƒμ„±ν•˜λŠ” λ°©λ²•μž…λ‹ˆλ‹€. λ§Œμ•½ μ—¬λŸ¬λΆ„μ΄ Javascript 에 κ΄€ν•œ λ¬Έμ„œλ₯Ό μƒμ„±ν•œλ‹€λ©΄, about-javascript.md νŒŒμΌμ„ contents/posts 디렉토리에 μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λ‘λ²ˆμ§Έ 방법은 λ¨Όμ € 디렉토리λ₯Ό μƒμ„±ν•œ λ’€, 디렉토리 μ•ˆμ— index.md νŒŒμΌμ„ μΆ”κ°€ν•˜λŠ” 것 μž…λ‹ˆλ‹€. 이 방법은 λ¬Έμ„œ 내에 μ—¬λŸ¬ 이미지 파일 λ“± λΆ€μˆ˜μ μΈ 파일 μ—¬λŸ¬κ°œκ°€ ν¬ν•¨λ˜μ—ˆμ„ λ•Œ μœ μš©ν•©λ‹ˆλ‹€.

첫번째 λ°©λ²•μœΌλ‘œ μƒμ„±ν•œ 파일λͺ…μ΄λ‚˜, λ‘λ²ˆμ§Έ λ°©λ²•μœΌλ‘œ μƒμ„±ν•œ 디렉토리 이름은 μ›Ήμ‚¬μ΄νŠΈμ—μ„œ 고유의 μ£Όμ†Œλ₯Ό κ°–μŠ΅λ‹ˆλ‹€. https://siteURL/about-javascript 와 κ°™μ΄μš”.

1-2. Frontmatter

λ§ˆν¬λ‹€μš΄μ€ λ¬Έμ„œμ˜ 메타데이터인 Frontmatter 라 λΆˆλ¦¬λŠ” 정보λ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€.

---
title: "πŸ€” 3. μž‘μ„± κ°€μ΄λ“œ"
description: "μ–΄λ–»κ²Œ 글을 μž‘μ„±ν•˜κ³  μΆ”κ°€ν• κΉŒμš”?"
date: 2021-04-03
update: 2021-04-03
tags:
  - hoodie
  - writing-guide
series: "gatsby-starter-hoodie 둜 λΈ”λ‘œκ·Έ μ‹œμž‘ν•˜κΈ°"
---

μœ„λŠ” μ§€κΈˆ μ—¬λŸ¬λΆ„μ΄ 읽고 μžˆλŠ” λ¬Έμ„œμ˜ Frontmatter μž…λ‹ˆλ‹€. title κ³Ό date λŠ” ν•„μˆ˜ κ°’μž…λ‹ˆλ‹€. 띄어쓰기λ₯Ό ν¬ν•¨λœ λ¬Έμžμ—΄μ„ μž…λ ₯ν•  λ•Œμ—λŠ” λ”°μ˜΄ν‘œλ‘œ κ°μ‹ΈλŠ” 것을 μΆ”μ²œν•©λ‹ˆλ‹€.

1-3. λ§ˆν¬λ‹€μš΄ μž‘μ„±ν•˜κΈ°

λ§Œμ•½ Frontmatter κΉŒμ§€ μž‘μ„±ν–ˆλ‹€λ©΄, μ—¬λŸ¬λΆ„μ€ κ·Έ μ•„λž˜μ— λ§ˆν¬λ‹€μš΄ λ¬Έμ„œλ₯Ό μž‘μ„±ν•˜λ©΄ λ©λ‹ˆλ‹€. gatsby-starter-hoodie λŠ” λŒ€λΆ€λΆ„μ˜ λ§ˆν¬λ‹€μš΄ 문법을 μ§€μ›ν•©λ‹ˆλ‹€. λ§ˆν¬λ‹€μš΄ μž‘μ„± 방법을 μ•Œκ³  μ‹Άλ‹€λ©΄, Github 의 Mastering Markdown λ¬Έμ„œλ₯Ό μ°Έκ³ ν•˜μ„Έμš”.

2. μ½”λ“œ ν•˜μ΄λΌμ΄νŒ… & Katex

2-1. μ½”λ“œ ν•˜μ΄λΌμ΄νŒ…

Prism.JS 에 κΈ°λ°˜ν•œ μ½”λ“œ ν•˜μ΄λΌμ΄νŒ…μ΄ μ œκ³΅λ©λ‹ˆλ‹€.

μ˜ˆμ‹œ

Javascript

console.log("Hello, world!")

Python

print("Hello, world!")

κ·Έ μ™Έ 더 λ§Žμ€ μ–Έμ–΄λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. μ œκ³΅λ˜λŠ” μ–Έμ–΄λ₯Ό ν™•μΈν•˜κ³  μ‹Άλ‹€λ©΄, Prism.js μ›Ήμ‚¬μ΄νŠΈ λ₯Ό μ°Έκ³ ν•˜μ„Έμš”.

2-2. Katex

Katex 문법을 μ§€μ›ν•˜μ—¬ λ³΅μž‘ν•œ μˆ˜μ‹λ„ μ‰½κ²Œ ν‘œν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

인라인 λͺ¨λ“œ

E=mc2E = m c^{2}

λΈ”λŸ­ λͺ¨λ“œ

∫0∞f(x)dx\int_{0}^{\infty} f(x) dx

3. 글에 이미지 μΆ”κ°€ν•˜κΈ°

μƒλŒ€κ²½λ‘œλ₯Ό μ΄μš©ν•˜μ—¬ μ‰½κ²Œ 이미지λ₯Ό μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 디렉토리λ₯Ό μƒμ„±ν•˜κ³  κ·Έ μ•ˆμ— index.md λ₯Ό μΆ”κ°€ν•˜μ—¬, 글을 μΆ”κ°€ν•˜λŠ” λ°©λ²•μœΌλ‘œ μž‘μ„±ν•΄μ•Ό 이미지 관리가 μ‰½μŠ΅λ‹ˆλ‹€.

sample image

μ΄λ―Έμ§€λŠ” Lazy Loading 으둜 λ‘œλ“œλ˜μ–΄, λΉ λ₯Έ 초기 λ¬Έμ„œ λ‘œλ”© 속도λ₯Ό 확보할 수 μžˆμŠ΅λ‹ˆλ‹€.

⚠ μ΄λ―Έμ§€μ˜ λͺ¨λ“  ν™•μž₯μžλŠ” μ†Œλ¬Έμžμ—¬μ•Όν•©λ‹ˆλ‹€.

4. νƒœκ·Έ

tag example

Frontmatter 의 νƒœκ·Έλ₯Ό 톡해 μ‰½κ²Œ λ¬Έμ„œλ₯Ό λΆ„λ₯˜ν•˜κ³  검색할 수 μžˆμŠ΅λ‹ˆλ‹€. μ—¬λŸ¬λΆ„μ˜ λͺ¨λ“  νƒœκ·ΈλŠ” https://siteUrl/tags κ²½λ‘œμ—μ„œ ν™•μΈν•˜κ³ , 검색할 수 μžˆμŠ΅λ‹ˆλ‹€.

5. μ‹œλ¦¬μ¦ˆ

series example

μ—¬λŸ¬λΆ„μ΄ μ—°κ΄€λœ μ—¬λŸ¬κ°œμ˜ λ¬Έμ„œλ₯Ό μž‘μ„±ν•  λ•Œ μ‹œλ¦¬μ¦ˆλ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. Frontmatter 에 μž‘μ„±λœ μ‹œλ¦¬μ¦ˆκ°€ 같은 λ¬Έμ„œλΌλ¦¬ λ¬Άμ—¬ λ¬Έμ„œ 상단에 리슀트둜 ν‘œμ‹œλ©λ‹ˆλ‹€. μ‹œλ¦¬μ¦ˆλŠ” 일련의 μˆœμ„œκ°€ μžˆλŠ” λ¬Έμ„œλ“€μ„ μž‘μ„±ν•  λ•Œ μœ μš©ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ‹œλ¦¬μ¦ˆλŠ” λ¬Έμ„œμ˜ μž‘μ„± λ‚ μ§œ μˆœμ„œλŒ€λ‘œ μ •λ ¬λ©λ‹ˆλ‹€.

ν˜„μž¬ λ¬Έμ„œλŠ” gatsby-starter-hoodie 둜 λΈ”λ‘œκ·Έ μ‹œμž‘ν•˜κΈ° λΌλŠ” μ‹œλ¦¬μ¦ˆλ‘œ μ„€μ •λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

@Hudi
Hello :) I'm Hudi who developed gatsby-starter-hoodie theme.