2 min read

์†”์งํžˆ ์š”์ฆ˜ ์ง€๋ผ ์ข€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.

์†”์ข€์ข‹

Table of Contents

๋จผ์ € ์จ๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด ์—ฌ๊ธฐ๋กœ

๊ทธ๋ž˜์„œ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹น์‹ ์„ ์œ„ํ•œ โ€ฆ ๋งˆํฌ๋‹ค์šด/์ง€๋ผ ๋ณ€ํ™˜๊ธฐ

์ปจํ”Œ๋ฃจ์–ธ์Šค๋Š” ๊ตฌ๋ฆฝ๋‹ˆ๋‹ค.

๋งŽ์ด๋“ค ์‚ฌ์šฉ ํ•˜์‹œ๊ฒ ์ง€๋งŒ โ€ฆ ์ €ํฌ ํšŒ์‚ฌ์—์„œ๋„ ๋ฌธ์„œ ์ž‘์„ฑ ๋ฐ ํ‹ฐ์ผ“ ๋ฐœํ–‰์— Jira, Confluence๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์•„๋‹ˆ์‹ ๊ฐ€์š”? ๋ถ€๋Ÿฝ์Šต๋‹ˆ๋‹คโ€ฆ

๋…ธ์…˜์˜ ์˜ํ–ฅ์œผ๋กœ ๋งˆํฌ๋‹ค์šด ๋ฌธ๋ฒ•์— ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์ต์ˆ™ํ•ด์ ธ ์žˆ๋Š”๋ฐ ๋ฐ˜ํ•ด ์ปจํ”Œ๋ฃจ์–ธ์Šค ์œ„ํ‚ค ๋งˆํฌ์—…์—๋Š” ์ต์ˆ™ํ•ด์ง€๊ธฐ ์‰ฝ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

๊ฐ€์งˆ ์ˆ˜ ์—†์œผ๋ฉด ๋ถ€์ˆด๋ผ

์ต์ˆ™ํ•ด์งˆ ์ˆ˜ ์—†๋‹ค๋ฉด ์•ˆ์“ฐ๋ฉด ๋ฉ๋‹ˆ๋‹ค. npm์— jira2md ํŒจํ‚ค์ง€๋ฅผ ๋ฐœ๊ฒฌํ–ˆ๊ณ , ์›ฌ๋งŒํ•œ Github-Flavored Markdown ๋ฌธ๋ฒ•์„ Jira ๋ฌธ๋ฒ•์œผ๋กœ ๋ณ€ํ™˜ํ•ด์คŒ์„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค.

jira-markdown์„ ์‹ค์‹œ๊ฐ„ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ์‚ฌ์ดํŠธ๊ฐ€ ์žˆ๊ธด ํ•˜์ง€๋งŒ, ์ฝ”๋“œ ์—๋””ํ„ฐ ๋ฌธ์ œ๋กœ ํ•œ๊ธ€ ์ž…๋ ฅ์— ๋ฌธ์ œ๊ฐ€ ์žˆ๊ณ .. ์‚ฌ์‹ค jira ๋ฌธ๋ฒ•์„ ๋ˆˆ์œผ๋กœ ๋ณด๊ณ  ์‹ถ์€๊ฑด ์•„๋‹ˆ๊ธฐ์— ๊ทธ ๋Œ€์‹  ๋งˆํฌ๋‹ค์šด ๋ทฐ์–ด๋ฅผ ๋„ฃ๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ธ”๋กœ๊ทธ ๋งŒ๋“ค๊ธฐ

๋งˆํฌ๋‹ค์šด ์ž…๋ ฅ์„ ๋งˆํฌ๋‹ค์šด ์ถœ๋ ฅ์œผ๋กœ ๋ฐ”๊พธ์–ด์ฃผ๋Š” ๊ณผ์ •์€ ์—ฌ๋Ÿฌ ๋ธ”๋กœ๊ทธ ์ƒ์„ฑ ๊ณผ์ •๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค. ๋ฆฌ์•กํŠธ ํ™˜๊ฒฝ์— ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ์ง€๋งŒ, ์ด๋ฒˆ์—๋„ dangerouslySetInnerHTML ํ•˜์ง€ ์•Š๋Š” React-markdown ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ ๋งˆํฌ๋‹ค์šด์—๋Š” GFM(Github-Flavored Markdown)๊ณผ๋Š” ๋‹ค๋ฅธ ์ ๋“ค์ด ์กฐ๊ธˆ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ์•„๋งˆ ์˜ต์‹œ๋””์–ธ์„ ์‚ฌ์šฉํ•ด๋ณด์‹  ๋ถ„๋“ค์ด๋ผ๋ฉด ์ด๋ฏธ ๋ˆˆ์น˜์ฑ„์…จ์„ ์ˆ˜ ๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

GFM์—์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฌธ๋ฒ• ์ฐจ์ด๊ฐ€ ์žˆ๋Š”๋ฐ,

  1. Tables: |---| ์„ ํ†ตํ•ด ํ…Œ์ด๋ธ” ์ƒ์„ฑ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  2. Task lists: - [ ] ์„ ํ†ตํ•ด ๋ฆฌ์ŠคํŠธ ์†์— ์ฒดํฌ๋ฐ•์Šค ์ถ”๊ฐ€๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  3. Fenced Code Blocks: ```javascript ๋ฐฑํ‹ฑ 3๊ฐœ์— ์–ธ์–ด๋ฅผ ์ถ”๊ฐ€ํ•ด ์ฝ”๋“œ ๋ธ”๋Ÿญ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ ๋˜ํ•œ GFM์˜ ๋ฌธ๋ฒ•์ž…๋‹ˆ๋‹ค.

react-markdown์€ remark๋‚˜ rehype ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. remark๋Š” ๋งˆํฌ๋‹ค์šด ๋ณ€ํ™˜์— ์žˆ์–ด ํ”Œ๋Ÿฌ๊ทธ์ธ ์ถ”๊ฐ€๋ฅผ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฐ๋ฐ์š”, remark-gfm์„ ์‚ฌ์šฉํ•ด์„œ gfm ๋ฌธ๋ฒ•์„ ์ง€์›ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋”ธ๊น

ํ† ์ด ํ”„๋กœ์ ํŠธ๋กœ ๋ฒ„์…€๋งŒํ•œ ๊ฒƒ์ด ์—†๋‹ค๊ณ  ํ•ญ์ƒ ์ƒ๊ฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. nextjs ํ”„๋กœ์ ํŠธ๊ธฐ ๋•Œ๋ฌธ์— vercel์— ๋ฐ”๋กœ ์ž„ํฌํŠธ ํ•ด์„œ ๋ฐฐํฌํ•˜๊ณ  analytics ๋‹ฌ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์„œ๋ธŒ๋„๋ฉ”์ธ์— https ์ธ์ฆ์„œ ๋ฐ›์•„์ฃผ๋Š” ์†๋„๋Š” ์˜ˆ์ˆ ์ž…๋‹ˆ๋‹ค.

https://m2j.luciancah.com

๋งŽ์ด ์จ์ฃผ์„ธ์š”. ์‚ฌ์‹ค ๊ณ ์ • ์‚ฌ์šฉ์ž ํ•œ๋ช…์ด ์žˆ์–ด์„œ ๊ดœ์ฐฎ๊ธด ํ•˜์ง€๋งŒ ์‚ฌ์šฉ ์ค‘ ๋ถˆํŽธํ•จ์ด๋‚˜ ๊ฐœ์„ ์ ์ด ๋ˆˆ์— ๋ณด์ด์‹ ๋‹ค๋ฉด ์–ธ์ œ๋“ ์ง€ ๊นƒํ—ˆ๋ธŒ ์ด์Šˆ๋‚˜ ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.