๋ด๊ฐ โ์คํ์์คโ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ๋ฐฐ์ด ๊ฒ๋ค
๋ด๊ฐ โ์คํ์์คโ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ๋ฐฐ์ด ๊ฒ๋ค ๊ด๋ จ
โ๋น์ ์๊ฒ ์ง์ ์ปคํผ์ฑ์ ์์ฒญํ๋ ํ์ฌ๊ฐ ์๋ค๋ฉด ์ด๋ค ๊ธฐ๋ถ์ผ๊น์?โ
๋ถ๊ณผ 2๋ ์ ๊น์ง๋ง ํด๋ ์ ๋ ์๋ฅ ํ๋ฝ๊ณผ ๋ฉด์ ๋ถํฉ๊ฒฉ ํต๋ณด๋ฅผ ์ผ์์ฒ๋ผ ๋ฐ์๋ค์ด๊ณ ์์์ต๋๋ค. ๊ทธ๋ ๊ฒ ์์ญ ํต์ ๊ฑฐ์ ๋ฉ์ผ์ ๋ฐ์ผ๋ฉฐ, ๊ฐ๋ฐ์๋ก์ ๋ถ์กฑํ๋ค๊ณ ๋๋ผ๋ ์๊ธฐ๊ฐ ์์์ฃ . ๊ทธ๋ฌ๋ ์ด์ ๋ ๊ตฌ์ง ํ๋์กฐ์ฐจ ํ์ง ์์๋๋ฐ๋ ์ฌ๋ฌ ๊ณณ์์ ์ด์ง ์ ์์ ๋ฐ๋ ์ํฉ์ด ๋์์ต๋๋ค.
์ฌ๋ฐ์๋ ๊ฒฝํ ์ค ํ๋๋ ๊ฐ์ ๊ธฐ์ ์ ์๋ก ๋ค๋ฅธ ๊ณ์ด์ฌ๋ก๋ถํฐ ๊ฐ๊ฐ ์ฐ๋ฝ์ ๋ฐ์์ ๋์ ๋๋ค. โํ์ฌ๊ฐ ์ปค์ ์ฑ์ฉ ๊ณผ์ ๋ ๋ฐ๋ก ์งํํ๋๊ตฌ๋โ๋ผ๋ ์๊ฐ์ ์ ๊ธฐํ์ฃ . ๊ทธ ๋น์ ์ด๋ฏธ ์ง์ฅ์ ๊ตฌํ ์ํ์๊ธฐ์ ๋ชจ๋ ์ ์คํ ๊ฑฐ์ ํ์ง๋ง, ๊ทธ๋ค์ด ์ ์ ์คํ์์ค ํ๋์ ๋ณด๊ณ ๊ธฐ์ ๋ ฅ๊ณผ ๋ฌธ์ ํด๊ฒฐ ๋ฅ๋ ฅ์ ๋์ด ํ๊ฐํ๋ค๋ ์ ์ ์ ์ ์์์ต๋๋ค. ๊ทธ๋ ๊ฒ ์คํ์์ค๋ ์ ์ปค๋ฆฌ์ด๋ฅผ ํ ๋จ๊ณ ๋์ด์ฌ๋ฆฌ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํด์ฃผ์์ฃ .
์๋ง ๋น์ทํ ๊ณ ๋ฏผ์ ํ๋ ๋ถ๋ค์ด ์์ ๊ฒ๋๋ค. ํ์ฌ ์ ๋ฌด๋ง์ผ๋ก๋ ๋ญ๊ฐ ๋ถ์กฑํ๋ค๋ ๋๋, ๋ ์ฑ์ฅํ๊ณ ์ถ์๋ฐ ๋ฐฉ๋ฒ์ ๋ชจ๋ฅด๊ฒ ๋ค๋ ์๊ฐโฆ ์ ๋ ๊ทธ๋ฌ์ต๋๋ค. ํ์ฌ ํ๋ก์ ํธ๋ ๋ก ์นญ์ด ๋ฏธ๋ค์ง๊ธฐ๋ ํ๊ณ , ์ ํํ ์ด๋ค ๊ธฐ์ฌ๋ฅผ ํ๋์ง ๋๋ฌ๋ด๊ธฐ๋ ์ด๋ ค์ ์ฃ . ํ๋ ์ฌ์ด๋ ํ๋ก์ ํธ๋ ๊ณ ๋ฏผํด ๋ดค์ง๋ง ํ์ค์ ๋ฒฝ์ ๋์์ต๋๋ค. ์์ต์ ๋ด์ง ๋ชปํ๋ฉด ๋จ์ํ ํ ์ด ํ๋ก์ ํธ๋ก ์น๋ถ๋๊ธฐ ์ฝ๊ณ , ํ๋ก ํธ์๋๋ถํฐ ๋ฐฑ์๋, ์๋ฒ ์ด์๋น๊น์ง ๋ชจ๋ ๊ฒ์ ์ค์ค๋ก ๊ฐ๋นํด์ผ ํ๋ ๋ถ๋ด๋ ์ปธ์ต๋๋ค.
๋ฐ๋ฉด ์คํ์์ค๋ ๋ฌ๋์ต๋๋ค. ๊นํ๋ธ์ ์ฝ๋๋ฅผ ํฌ๋ช ํ๊ฒ ๊ณต๊ฐํ๊ณ , ์ ์ธ๊ณ ๊ฐ๋ฐ์๋ค๊ณผ ํ๋ ฅํ๋ฉฐ ์์ฐ์ค๋ฝ๊ฒ ๊ธฐ์ ๋ ฅ์ ์ฆ๋ช ํ ์ ์์์ต๋๋ค. ๋ฌด์๋ณด๋ค ์์ต์ด๋ ๋น์ฉ ๊ฑฑ์ ์์ด ์จ์ ํ ์ฝ๋์๋ง ์ง์คํ ์ ์๋ค๋ ์ ์์ ํฐ ๋งค๋ ฅ์ ๋๊ผ์ฃ . ๊ทธ๋์ ์ต๊ทผ โNotionPressoโ๋ผ๋ ํ๋ก์ ํธ๋ฅผ ์์ํ์ต๋๋ค. ๋ ธ์ ํ์ด์ง๋ฅผ ๊ฐ์ธ ๋ธ๋ก๊ทธ๋ ํฌํธํด๋ฆฌ์ค ํ์ด์ง๋ก ๋ณํํด ์ฃผ๋ ์คํ์์ค ๋๊ตฌ๋ก, ๊ธฐ์กด์ โoopyโ๋ โsuper.soโ ๊ฐ์ ์๋น์ค์ ์คํ์์คํ๋ฅผ ๋ชฉํ๋ก ํ๊ณ ์์ต๋๋ค. ๊ฐ๋ฐ์๋ค์ด ์์ ์ ๋ ธ์ ํ์ด์ง๋ฅผ ์์ ๋กญ๊ฒ ์ปค์คํฐ๋ง์ด์งํ๋ฉฐ, ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋ค ์ ์๊ฒ ๋๋ ๊ฒ์ด ์ด ํ๋ก์ ํธ์ ํต์ฌ์ ๋๋ค.
์ด ๊ธ์์๋ ์ ๊ฐ ์คํ์์ค ํ๋ก์ ํธ โNotionPressoโ๋ฅผ ์งํํ๋ฉฐ ๋ฐฐ์ด ๊ฒ๋ค์ ๊ณต์ ํ๊ณ ์ ํฉ๋๋ค. ์คํ์์ค ์ฃผ์ ๋ฅผ ์ ์ ํ๋ ๋ฐฉ๋ฒ๋ถํฐ ๊ตฌ์กฐ ์ค๊ณ, ์ปค๋ฎค๋ํฐ์์ ์ํต, ๊ทธ๋ฆฌ๊ณ ๊ฒฐ๊ณผ๋ฌผ์ ๋ฐ์ ์ํค๋ ๊ณผ์ ์ ๋ด์๊ณ , ์ด ์ฌ์ ์ ํตํด ์คํ์์ค๋ผ๋ ์๋ก์ด ๋์ ์ ๋ํ ์์ ๋๊ธฐ๋ฅผ ์ป์ ์ ์๋ค๋ฉด ์ข๊ฒ ์ต๋๋ค.
์คํ์์ค ํ๋ก์ ํธ ์ฃผ์ ์ ์ ํ๊ธฐ
โ๋ด๊ฐ ๋ง๋ ์ฝ๋๋ฅผ ๊ณต๊ฐํ์ผ๋ ์ด์ ์คํ์์ค ๊ฐ๋ฐ์๋ค์!โ
์ด๋ฐ ์๊ฐ์ผ๋ก ์คํ์์ค๋ฅผ ์์ํ๋ค๊ฐ ๋ญํจ๋ฅผ ๋ณด๋ ๊ฐ๋ฐ์๋ค์ ๋ง์ด ๋ดค์ต๋๋ค. ์ ๋ ๊ทธ์ค ํ๋์์ฃ . ์ฝ๋๋ฅผ ๊นํ๋ธ์ ๊ณต๊ฐํ๊ณ ๋ฌด๋ฃ๋ก ํ์ด๋๋๋ค๊ณ ํด์ ๊ฐ์น๋ฅผ ์ธ์ ๋ฐ๋ ๊ฑด ์๋๋๋ค. ์คํ์์ค๋ ํ๋ก๋ํธ์ ๋ค๋ฅด์ง ์์ต๋๋ค. ๊ฒฐ๊ตญ ๋๊ตฐ๊ฐ์๊ฒ ํ์ํด์ผ ์๋ฏธ๊ฐ ์๊ธฐ๊ณ , ์ด๋ฅผ ์ํด์ ์ฒ ์ ํ ์์ฅ ์กฐ์ฌ๊ฐ ํ์ํฉ๋๋ค.
์ ๋ NotionPresso๋ฅผ ์์ํ๊ธฐ ์ , ๋จผ์ ๊ธฐ์กด ๋ ธ์ ๊ด๋ จ ๋๊ตฌ๋ค์ ์ดํด๋ดค์ต๋๋ค. oopy๋ super.so ๊ฐ์ ์์ฉ ์๋น์ค๋ค์ด ๋ ธ์ ํ์ด์ง๋ฅผ ๋ธ๋ก๊ทธ๋ก ๋ณํํด ์ฃผ๋ ์ ์ฉํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ฉฐ, ๋ง์ ์ธ๊ธฐ๋ฅผ ์ป๊ณ ์์์ต๋๋ค. ๋์์ ๋ช ๊ฐ์ง ๋ถ๋ช ํ ํ๊ณ๋ ๋ณด์์ต๋๋ค.
- ๋น์ฉ์ ๋ถ๋ด: ๋ง์ ์ฌ๋๋ค์ด ๊ตฌ๋ ํ ์๋น์ค ๋น์ฉ์ ๋ถ๋ด์ ๋๊ผ์ต๋๋ค. ํนํ ๊ฐ์ธ ๊ฐ๋ฐ์๋ ํ๋ฆฌ๋์๋ค์๊ฒ๋ ๋ฌด๋ฃ ํน์ ์ ๋น์ฉ ๋์์ด ํ์ํ์ฃ .
- ์ ํ๋ ์ปค์คํฐ๋ง์ด์ง: ์ํ๋ ๋๋ก ๋ธ๋ก๊ทธ๋ ํ์ด์ง๋ฅผ ๊พธ๋ฐ ์ ์๋ค๋ ์ ์ด ํฐ ์ ์ฝ์ด์์ต๋๋ค.
๊ธฐ์กด ์คํ์์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์๋ ๊ธฐ์ ์ ์ธ ํ๊ณ๊ฐ ๋ณด์์ต๋๋ค.
- ๊ฐ์ฅ ๋๋ฆฌ ์ฐ์ด๋ react-notion-x๋ ๋ ธ์ ์ ๊ณต์ API๋ฅผ ์ฌ์ฉํ์ง ์์์ต๋๋ค. ์ฌ์ฉ์๋ค์ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ์์ API ํค๊ฐ์ ์ง์ ์ฐพ์ ์ ๋ ฅํด์ผ ํ๊ณ , ๋ ธ์ ์ด ๋น๊ณต์ API ์ฌ์ฉ์ ๋ง์ผ๋ฉด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋์ํ์ง ์์ ์๋ ์์ต๋๋ค.
- ๊ณต์ API๋ฅผ ์ฌ์ฉํ๋ react-notion-render๋ ๊ฐ๋ฐ์ด ์ค๋จ๋ ์ํ์์ผ๋ฉฐ, ์์ฑ๋๊ฐ ๋ฎ์ ์ปค์คํฐ๋ง์ด์ง๋ ๊ฑฐ์ ๋ถ๊ฐ๋ฅํ์ต๋๋ค.
์ด๋ฌํ ๋ฌธ์ ๋ฅผ ๋ถ์ํ๋ฉด์ ์ ๋ NotionPresso์ ์ฐจ๋ณํ ํฌ์ธํธ๋ฅผ ๋ช ํํ ์ ํ์ต๋๋ค.
- ๊ณต์ API ์ฌ์ฉ: ์์ ์ ์ธ ์ฐ๊ฒฐ์ ์ํด ๋ ธ์ ์ ๊ณต์ API๋ฅผ ์ ๊ทน ํ์ฉํ๊ธฐ.
- ์์ ํ ์ปค์คํฐ๋ง์ด์ง ์ ๊ณต: ์ฌ์ฉ์๋ค์ด ์์ ๋กญ๊ฒ ํ์ด์ง ๋์์ธ๊ณผ ๊ธฐ๋ฅ์ ์กฐ์ ํ ์ ์๋๋ก ์ค๊ณํ๊ธฐ.
- ๋ฌด๋ฃ ์ ๊ณต: ๋๊ตฌ๋ ๋ถ๋ด ์์ด ํ์ฉํ ์ ์๋ ์คํ์์ค ์๋ฃจ์ ๋ง๋ค๊ธฐ.
์ฃผ์ ๋ฅผ ์ ํ๋ ๋ฐ ๊ฐ์ฅ ํฐ ๊ณ๊ธฐ๊ฐ ๋ ๊ฒ์ ๋ ธ์ ์ ํ์ฉํ ์๋น์ค์ ์ฑํ์ด์์ต๋๋ค. ๋ง์ ๊ธฐ์ ์ด ๋ ธ์ ์ ํ์ฉํด ์ฑ์ฉ ์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์์์ง๋ง, ๊ธฐ์กด ๋๊ตฌ๋ค๋ก๋ ์ํ๋ ๋๋ก ๋ฒํผ์ ์ถ๊ฐํ๊ฑฐ๋ ์คํ์ผ์ ์์ ํ๋ ๋ฐ ํ๊ณ๊ฐ ์์์ต๋๋ค. **โ์ฑ์ฉ ์ฌ์ดํธ์ ์ง์ํ๊ธฐ ๋ฒํผ์ ๋ง์๋๋ก ์ถ๊ฐํ ์ ์๋ค๋ฉด ์ผ๋ง๋ ์ข์๊น?โ**๋ผ๋ ์ง๋ฌธ์ด ๋ ์ฌ๋์ฃ .
๊ฒฐ๊ตญ NotionPresso๋ ์ด๋ฌํ ํ์๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ํ์ํ์ต๋๋ค. ๋จ์ํ ํ ์ด ํ๋ก์ ํธ๊ฐ ์๋, ์ค์ง์ ์ธ ์์๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ์๋ฃจ์ ์ ๋ชฉํ๋ก ๋ง์ด์ฃ . ์ ์ญ์ ์ฌ์ ํ ๋ฐฐ์๊ฐ๋ ๊ณผ์ ์ ์์ต๋๋ค. ๊ทธ๋ผ์๋ ํ์คํ ๊นจ๋ฌ์ ์ ์ด ์๋ค๋ฉด, ๋ฐ๋ก ์ฝ๋๋ฅผ ๊ณต๊ฐํ๋ค๋ ๊ฒ๋ง์ผ๋ก๋ ์ถฉ๋ถํ์ง ์๋ค๋ ๊ฒ๋๋ค. ์คํ์์ค๋ ๋จ์ํ ์ฝ๋๋ฅผ ๊ณต์ ํ๋ ๊ฒ์ด ์๋๋ผ, ์ฌ๋๋ค์๊ฒ ์ค์ง์ ์ธ ๊ฐ์น๋ฅผ ์ ๊ณตํ ์ ์๋ ํด๊ฒฐ์ฑ ์ด์ด์ผ ํฉ๋๋ค.
**โ๋ด๊ฐ ํด๊ฒฐํ๋ ค๋ ๋ฌธ์ ๋ ๋ฌด์์ธ๊ฐ?โ ๊ทธ๋ฆฌ๊ณ โ์ด๊ฒ์ด ๋๊ตฌ์๊ฒ ํ์ํ๊ฐ?โ**์ด ๋ ๊ฐ์ง ์ง๋ฌธ์ ๋ตํ ์ ์๋ค๋ฉด, ์ฌ๋ฌ๋ถ๋ ๋ ๋ง์ ์ฌ๋๋ค๊ณผ ํจ๊ปํ ์ ์๋ ์คํ์์ค ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด๊ฐ ์ ์์ ๊ฒ๋๋ค.
ํ๋ก์ ํธ ๊ตฌ์กฐ ์ค๊ณํ๊ธฐ
์ฒ์ ์คํ์์ค ํ๋ก์ ํธ๋ฅผ ์ค๊ณํ ๋ โ์๋ก์ด ๊ฑธ ๋ง๋ค์ด์ผ ํ๋คโ๋ ์๊ฐ์ ์ฌ๋ก์กํ๊ธฐ ์ฝ์ต๋๋ค. ๊ทธ๋ฌ๋ ์๋ก์ด ๊ฒ์ ์ฒ์๋ถํฐ ๋ง๋๋ ์ผ์ ์๊ฐ๊ณผ ๋ ธ๋ ฅ์ด ๋ง์ด ๋ค๊ณ , ์ฑ๊ณต ๊ฐ๋ฅ์ฑ์ ๋ฎ์ถ ์ ์์ต๋๋ค. ๊ทธ๋์ ์ด๋ฏธ ์กด์ฌํ๋ ํ๋ก์ ํธ๋ฅผ ์ฐธ๊ณ ํ๊ณ , ์ฅ์ ์ ํก์ํ๋ฉด์ ๊ฐ์ ์ ์ ์ฐพ์๋ด๋ ๊ฒ์ด ํจ์ฌ ํจ๊ณผ์ ์ธ ์ ๊ทผ๋ฒ์ด๋ผ๋ ๊ฑธ ๊นจ๋ฌ์์ต๋๋ค.
NotionPresso๋ฅผ ์ค๊ณํ๋ฉฐ ์ ๊ฐ ๊ฐ์ฅ ๋จผ์ ํ ์ผ์ ๊ธฐ์กด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ถ์ํ๋ ๊ฒ์ด์์ต๋๋ค. ํนํ react-notion-x๋ ๋ ธ์ ์คํ์ผ์ ๊ตฌํํ๋ ๋ฐ ๋ฐ์ด๋ CSS ์์คํ ์ ์ ๊ณตํ๊ณ ์์๊ณ , ์ด๋ฅผ ์ ๊ทน ํ์ฉํ๊ธฐ๋ก ํ์ต๋๋ค. ๋ฐ๋ฉด, ์ฌ์ฉ์๊ฐ ๋ธ๋ก ๊ฐ์ ๋ค์ฌ์ฐ๊ธฐ๋ฅผ ์์ ๋กญ๊ฒ ๋ณ๊ฒฝํ์ง ๋ชปํ๋ค๋ ์ ์ ๊ฐ์ ์ด ํ์ํ์ต๋๋ค. ๊ทธ๋์ CSS ๋ณ์๋ฅผ ์ค์ฌ์ผ๋ก ๋ธ๋ก ๊ฐ ๋ค์ฌ์ฐ๊ธฐ๋ฅผ ์ ์ฐํ๊ฒ ์กฐ์ ํ ์ ์๋๋ก ์ค๊ณํ์ต๋๋ค.
.notion-block > .notion-block {
margin-left: var(--notion-indent);
}
์ด์ฒ๋ผ ๊ธฐ์กด ํ๋ก์ ํธ๋ฅผ ์ ๊ทน ํ์ฉํ๋ ๊ฒ์ ๋จ์ํ ์๊ฐ ์ ์ฝ๋ฟ๋ง ์๋๋ผ ์ฌ๋ฌ ๋์์ ์ค๋๋ค. ์ฝ๋๋ฅผ ์ฝ๊ณ ๋ถ์ํ๋ ๊ณผ์ ์์ฒด๊ฐ ๋ ๋์ ์ค๊ณ๋ฅผ ์ ๋ํ๋ฉฐ, ์ค์๋ฅผ ๋ฏธ์ฐ์ ๋ฐฉ์งํ๋ ๋ฐ๋ ํฐ ์ญํ ์ ํฉ๋๋ค.
๋ํ โํ์ฅ์ฑโ์ ๊ณ ๋ คํ ์ค๊ณ๋ ์ค์ํ ํฌ์ธํธ์์ต๋๋ค. ์คํ์์ค๋ ์๋น์ค๋ณด๋ค ๋ ๋ค์ํ ์๊ตฌ์ฌํญ์ ์์ฉํด์ผ ํฉ๋๋ค. ์ด๋ฅผ ์ํด ์ ๋ ๋ ๊ฐ์ง ๋์์ธ ํจํด์ ์ ์ฉํ์ต๋๋ค.
1) ํฉํ ๋ฆฌ ๋ฉ์๋ ํจํด
๊ฐ ๋ ธ์ ๋ธ๋ก ํ์ ์ ๋ง๋ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๋ ํฉํ ๋ฆฌ๋ฅผ ์ธ๋ถ์์ ์ฃผ์ ๋ฐ์ ์ ์๋๋ก ์ค๊ณํ์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฌ์ฉ์๋ค์ด ์ํ๋ ๋๋ก ์ปดํฌ๋ํธ๋ฅผ ์ค๋ฒ๋ผ์ด๋ํ์ฌ, ์์ ๋ง์ ์คํ์ผ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
import { Notion } from "@notionpresso/react";
import CustomHeading from "./CustomHeading";
import CustomParagraph from "./CustomParagraph";
import CustomToggle from "./CustomToggle";
const MyNotionPage = ({ pageData }) => {
const customComponents = {
heading_1: CustomHeading,
heading_2: CustomHeading,
heading_3: CustomHeading,
paragraph: CustomParagraph,
toggle: CustomToggle,
};
return (
<Notion custom={customComponents}>
<Notion.Body>
<Notion.Blocks blocks={pageData.blocks} />
</Notion.Body>
</Notion>
);
};
2) ์ปดํ์ด๋ ํจํด
์ปดํฌ๋ํธ์ ์ธ๋ถ์ ์ธ ๋ถ๋ถ๋ง ์์ ํ ์ ์๋ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์์ต๋๋ค. ์๋ฅผ ๋ค์ด, Toggle ๋ธ๋ก์ ๊ฒฝ์ฐ ์ ์ฒด ๋์์ ์ ์งํ๋ฉด์๋ ์์ด์ฝ๋ง ๋ฐ๊พธ๊ณ ์ถ๋ค๋ฉด, <Toggle.Icon>
๋ก ์ปดํฌ๋ํธ๋ฅผ ์ฃผ์
ํ๋ฉด ๋ฉ๋๋ค. ๋ฐ๋๋ก ๋์ ๋ฐฉ์์ ์ ๋ฉด ์์ ํ๋ ค๋ฉด ์ ์ฒด ์ปดํฌ๋ํธ๋ฅผ ๊ต์ฒดํ ์๋ ์์ต๋๋ค.
import { Toggle } from '@notionpresso/react';
const CustomToggle = (props) => (
<Toggle {...props}>
<Toggle.Icon>
{/* ์ปค์คํ
์์ด์ฝ */}
</Toggle.Icon>
<Toggle.Content>{props.children}</Toggle.Content>
</Toggle>
);
๋ฌธ์ํ์ ํ์์ฑ
์ ๊ฐ ์ฒซ ์คํ์์ค ํ๋ก์ ํธ๋ฅผ ์์ํ์ ๋ ๊ฐ์ฅ ๊ฐ๊ณผํ๋ ๊ฒ์ด ๋ฐ๋ก ๋ฌธ์ํ์์ต๋๋ค. โ์ด ์ ๋๋ง ํด๋ ์ฌ๋๋ค์ด ์์์ ์ฐ๊ฒ ์งโ๋ผ๋ ๋ง์์ผ๋ก ์ฌ์ฉ๋ฒ์ ์ ๋นํ ์์ฑํ๊ณ ๋์ด๊ฐ์ฃ . ๊ทธ ๊ฒฐ๊ณผ๋ ์ฐธ๋ดํ์ต๋๋ค. ์๋ฌด๋ ํ๋ก์ ํธ๋ฅผ ์ฐ์ง ์์๊ณ , ๊ธฐ์ฌ์๋ ๋ํ๋์ง ์์์ต๋๋ค. ์ค๋ช ์ด ๋ถ์กฑํ ์คํ์์ค๋ ์๋ฌด๋ ์ฐ์ง ์์ต๋๋ค. ์ฌ๋๋ค์ด ํ๋ก์ ํธ๋ฅผ ์ดํดํ๊ธฐ ์ ์, ์ด ํ๋ก์ ํธ๊ฐ ๋์๊ฒ ํ์ํ์ง๋ถํฐ ์ ์ ์์ด์ผ ํ๋ค๋ ์ฌ์ค์ ๊ฐ๊ณผํ๋ ๊ฒ๋๋ค.
๋ ์ค์ํ ๊นจ๋ฌ์์ ์ด ๋ฌธ์๋ ์ด ํ๋ก์ ํธ์ ๊ด์ฌ ์๋ ์ฌ๋๋ค๋ณด๋ค, ๊ด์ฌ ์๋ ์ฌ๋๋ค์๊ฒ ๋ ๋ง์ด ๋ณด์ธ๋ค๋ ์ ์ ๋๋ค. ํ๋ก์ ํธ๋ฅผ ์ข์ํ๋ ์ฌ๋๋ค์ ์ค์ค๋ก ๋ ธ๋ ฅํด์ ์ดํดํ๋ ค๊ณ ํ๊ฒ ์ง๋ง, ๋๋ถ๋ถ์ ์ฌ๋๋ค์ ๊ทธ๋ ์ง ์์ต๋๋ค. ๊ทธ๋ค์ ๊ด์ฌ์ ๋๊ธฐ ์ํด ๋ฌธ์๋ฅผ ์ต๋ํ ์น์ ํ๊ณ ์์ธํ ์์ฑํด์ผ ํ๋ค๋ ๊ฒ์ ๋ค๋ฆ๊ฒ ๊นจ๋ฌ์์ฃ .
์ด๋ฌํ ์คํจ ๊ฒฝํ์ ๋ฐํ์ผ๋ก NotionPresso์์๋ ๋ฌธ์ํ๋ฅผ ์ต์ฐ์ ์ผ๋ก ๊ณ ๋ คํ์ต๋๋ค. README์ ํ๋ก์ ํธ์ ํต์ฌ ๊ฐ์ ๊ณผ ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ์ ๋ด์๊ณ , ๊ธฐ์ฌ ๊ฐ์ด๋์๋ ํ๋ก์ ํธ ๊ตฌ์กฐ์ PR ๊ท์น์ ์์ธํ ์ค๋ช ํ์ต๋๋ค. ๋ฌธ์๋ ๋จ์ํ ํ ์คํธ๊ฐ ์๋, ๋ณ๋์ ์น์ฌ์ดํธ๋ก ๋ฐฐํฌํ์ต๋๋ค. ์ด ์น์ฌ์ดํธ์๋ NotionPresso๋ก ๋ธ๋ก๊ทธ๋ฅผ ์์ฑํ๋ ๊ณผ์ ์ ๋์ด, Cloudflare์ ๋ฐฐํฌํ๊ณ ๋๊ธ ์์คํ ์ ์ฐ๋ํ๋ ๋ฐฉ๋ฒ๊น์ง ํฌํจํ์ต๋๋ค. ๊ฐ๋ฐ์๋ฟ๋ง ์๋๋ผ ์น ๊ฐ๋ฐ์ ์ต์ํ์ง ์์ ์ฌ์ฉ์๋ ์ฝ๊ฒ ๋ฐ๋ผ ํ ์ ์๋๋ก, ๊ฐ๋ฅํ ๊ตฌ์ฒด์ ์ผ๋ก ์์ฑํ์ต๋๋ค.
๋ฌธ์๋ ๋จ์ํ ํ๋ก์ ํธ๋ฅผ ์ฌ์ฉํ๋ ์ฌ๋์ ๋๋ฆฌ๋ ๋ฐ ๊ทธ์น์ง ์์ต๋๋ค. ํ๋ก์ ํธ๋ฅผ ์ค์ฌ์ผ๋ก ์ปค๋ฎค๋ํฐ๋ฅผ ํ์ฑํ๊ณ , ์ฌ์ฉ์์ ๊ธฐ์ฌ์๊ฐ ํ๋ก์ ํธ์ ์ฝ๊ฒ ์ฐธ์ฌํ ์ ์๋ ํ๊ฒฝ์ ๋ง๋ค์ด์ค๋๋ค. NotionPresso ์ญ์ ์์ผ๋ก ๋ ๋ง์ ํผ๋๋ฐฑ์ ๋ฐ์ ๋ฌธ์๋ฅผ ๋ฐ์ ์ํค๊ณ , ๋๊ตฌ๋ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด๊ฐ๊ณ ์ ํฉ๋๋ค.
์คํ์์ค ํ๋ก์ ํธ ํ๋ณดํ๊ธฐ
์ฒ์ ์คํ์์ค๋ฅผ ์์ํ์ ๋ ์ ๋ โ์ข์ ์ฝ๋๋ ์์์ ํผ์ง๋ค.โ๋ผ๊ณ ๋ฏฟ์์ต๋๋ค. GitHub์ ์ฝ๋๋ฅผ ์ฌ๋ฆฌ๊ณ ์คํ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ฉด ์์ฐ์ค๋ฝ๊ฒ ์ฌ๋๋ค์ด ์ฐพ์์ฌ ๊ฒ์ด๋ผ ์๊ฐํ์ฃ . ํ์ง๋ง ํ์ค์ ํ ๋ฌ ๋์ ๊ณ ์ ์คํ 5๊ฐ๋ฅผ ๋ฐ๋ ๊ฒ ์ ๋ถ์์ต๋๋ค. ๊ทธ๋์ NotionPresso๋ ์ฒ์๋ถํฐ ๋ค๋ฅด๊ฒ ์ ๊ทผํ์ต๋๋ค. ํ๋ณด๋ ์ ํ์ด ์๋๋ผ ํ์๋ผ๋ ๊ฒ์ ๊นจ๋ซ๊ณ , ๋ ๋ง์ ์ฌ๋๋ค์๊ฒ ๋ค๊ฐ๊ฐ๊ธฐ ์ํด ์ ๋ต์ ์ผ๋ก ํ๋ํ์ต๋๋ค.
1. ์ ๊ทน์ ์ธ ์ฑ๋ ํ์ฉ
NotionPresso๋ฅผ ์๋ฆฌ๊ธฐ ์ํด ๊ตญ๋ด์ธ ๋ค์ํ ์ฑ๋์ ํ์ฉํ์ต๋๋ค.
- ๊ตญ๋ด ํ๋ก๋ํธ ์ปค๋ฎค๋ํฐ์ธ ๋ ํ๊ณผ ๋์ค์ฝฐ์ด์์์ ํ๋ก์ ํธ๋ฅผ ์๊ฐํ์ต๋๋ค.
- ๋งํฌ๋์ธ, ํธ์ํฐ ๊ฐ์ SNS๋ฅผ ํตํด ๋ ๋ง์ ๊ฐ๋ฐ์๋ค์๊ฒ ๋ค๊ฐ๊ฐ์ต๋๋ค.
- ์ฃผ๊ธฐ์ ์ผ๋ก ๋ฉ์ด์ปค๋ก๊ทธ๋ฅผ ์์ฑํ๋ฉฐ ํ๋ก์ ํธ ์งํ ์ํฉ์ ๊ณต์ ํฉ๋๋ค.
ํ์ง๋ง ๋ฌด์์ โ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์จ์ฃผ์ธ์โ๋ผ๊ณ ์์ฒญํ์ง๋ ์์ต๋๋ค. ๊ทธ๊ฒ์ ์คํธ๊ณผ ๋ค๋ฅผ ๋ฐ ์์ผ๋๊น์. ๋์ Notion API๋ฅผ ๋ค๋ฃจ๋ฉด์ ๊ฒช์ ๊ธฐ์ ์ ๋์ ๊ณผ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๊ณต์ ํ๊ฑฐ๋, ์ ์ด๋ ์ฝ๋ ์ด๋ค์๊ฒ ์ฌ๋ฏธ์๋ ์ธ์ฌ์ดํธ๋ฅผ ์ ๋ฌํ๋ ค ๋ ธ๋ ฅํฉ๋๋ค. ์ ์ฉํ ์ ๋ณด๋ฅผ ๋จผ์ ์ ๊ณตํ๊ณ ๋๋ฉด, ์ฌ๋๋ค์ด ํ๋ก์ ํธ์๋ ์์ฐ์ค๋ฝ๊ฒ ๊ด์ฌ์ ๊ฐ์ง๊ฒ ๋ฉ๋๋ค.
2. ์ปค๋ฎค๋ํฐ์์ ์ํต
์ปค๋ฎค๋ํฐ ๊ตฌ์ถ์ ํ๋ก์ ํธ ์ฑ์ฅ์ ํต์ฌ์ ๋๋ค. NotionPresso๋ ํ์ฌ ๋์ค์ฝ๋ ์ฑ๋์ ํตํด ์ฌ์ฉ์๋ค๊ณผ ์ค์๊ฐ์ผ๋ก ์ํตํ๊ณ ์์ต๋๋ค. ์ฌ์ฉ์๋ค์ด ์ ์ํ ๊ธฐ๋ฅ์ด๋ ๊ฐ์ ์ฌํญ์ ๋ฐ๋ก ๋ฌธ์์ ๋ฐ์ํ๊ณ , ์ด๋ฅผ ๋ค์ ์ปค๋ฎค๋ํฐ์ ๊ณต์ ํ๋ฉด์ ๋ ๋์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด๊ฐ๊ณ ์์ต๋๋ค. ๋ํ GitHub Discussions์์๋ ๊ธฐ์ ์ ์ธ ํ ๋ก ์ด ํ๋ฐํ ์ด๋ค์ง๋๋ก ์ ๋ํ๋ฉฐ, ์ต๊ทผ์๋ ํด์ธ ์ฌ์ฉ์๋ค์ ์ํด Reddit๊ณผ Hacker News์๋ ๊ธ์ ์ฌ๋ฆฌ๊ธฐ ์์ํ์ต๋๋ค.
3. GitHub ์คํ ํ๋ณด
์ฌ๊ธฐ์ ์ ๋ง ์ค์ํ ๊ตํ์ ํ๋ ๋๋๊ณ ์ถ์ต๋๋ค. ์ ๋ ์ฒซ ์คํ์์ค๋ฅผ ํตํด ์ด์ง์ ์๋ํ์ ๋ ์๋ฌด๋ ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด ๋ฌผ์ด๋ณด์ง ์๋ ํ์ค์ ์ง๋ฉดํ์ต๋๋ค. ๋ฉด์ ๊ด๋ค์ด ์๋ฅ ๊ฒํ ๋ง์ผ๋ก๋ ์๊ฐ์ด ๋ถ์กฑํ๋ฐ, GitHub์ ๋ค์ด๊ฐ ์ฝ๋๋ฅผ ์ผ์ผ์ด ํ๊ฐํ ๊ฑฐ๋ผ๊ณ ๊ธฐ๋ํ๋ ๊ฑด ๋๋ฌด ์์งํ ์๊ฐ์ด์์ฃ . ๋ธ๋ก๊ทธ ๊ธ์ด ๋จผ์ ์กฐํ์๋ก ํ๊ฐ๋ฐ๋ฏ์ด, ์คํ์์ค๋ GitHub ์คํ๋ก ์ฒซ์ธ์์ด ๊ฒฐ์ ๋ฉ๋๋ค. ์ฌ์ฉ์๊ฐ ์ฝ๋๋ฅผ ์ฝ์ด๋ณผ ๋๊ธฐ๋ฅผ ๋จผ์ ์ ๊ณตํด์ผ ํฉ๋๋ค.
๊ทธ๋์ ์ด์ ๋ ๋งค์ฃผ ์๋ก์ด ๊ธฐ๋ฅ์ด๋ ๊ฐ์ ์ฌํญ์ ๊ณต์ ํ ๋๋ง๋ค ํญ์ GitHub ๋งํฌ๋ฅผ ์ฒจ๋ถํ๊ณ , ์คํ๋ฅผ ๋๋ฌ๋ฌ๋ผ๊ณ ๋ช ์์ ์ผ๋ก ์์ฒญํฉ๋๋ค. ์ค์ ๋ก ์คํ ์์ฒญ์ ํฌํจํ ํฌ์คํธ๋ ๊ทธ๋ ์ง ์์ ํฌ์คํธ๋ณด๋ค ํจ์ฌ ๋์ ์ฐธ์ฌ๋๋ฅผ ๋ณด์์ต๋๋ค. ๋ง์ฐํ โ์ข์์โ๋ โ์ฐธ๊ณ ๊ฐ ๋์์ต๋๋คโ๋ผ๋ ๋๊ธ์ ๊ธฐ๋ํ๊ธฐ๋ณด๋ค๋, ๊ตฌ์ฒด์ ์ผ๋ก**โGitHub์์ ์คํ ๋๋ฌ์ฃผ์๋ฉด ํฐ ํ์ด ๋ฉ๋๋ค!โ**๋ผ๊ณ ๋ถํํด ๋ณด๋ ๊ฒ๋๋ค.
ํ๋ณด๋ ์ ํ์ด ์๋๋ผ ํ์
์ข์ ์ฝ๋๋ ๊ธฐ๋ณธ์ด๊ณ , ๊ทธ๊ฒ์ ์ฌ๋๋ค์๊ฒ ์๋ฆฌ๋ ์ผ ๋ํ ์คํ์์ค ํ๋ก์ ํธ์ ์ผ๋ถ์ ๋๋ค. ์ฌ๋๋ค์ด ํ๋ก์ ํธ๋ฅผ ์ฐพ๊ณ , ๊ด์ฌ์ ๊ฐ์ง๋ฉฐ ๊ธฐ์ฌํ๋๋ก ๋ง๋๋ ๊ฒ์ ์ฝ๋ ์์ฑ๋งํผ์ด๋ ์ค์ํ๋ค๋ ๊ฑธ ์์ง ๋ง์ธ์.
๋๊ตฌ๋ ์์ํ ์ ์์ต๋๋ค
์คํ์์ค๋ ๋จ์ํ ์ฝ๋ ๊ณต์ ๊ฐ ์๋๋ผ, ๋์ ์ด์ ๊ณผ ๋ฌธ์ ํด๊ฒฐ ๋ฅ๋ ฅ์ ๋ณด์ฌ์ค ์ ์๋ ์ด์ ์๋ ์ด๋ ฅ์์ ๋๋ค. ์ ๊ฐ NotionPresso๋ฅผ ์์ํ๊ณ , ์ฌ๋ฌ ์ํ์ฐฉ์ค๋ฅผ ๊ฒช์ผ๋ฉด์ ์ป์ ๊ฐ์ฅ ํฐ ๊ตํ์ โ์๋ฒฝํ์ง ์์๋ ๊ด์ฐฎ๋ค. ์ค์ํ ๊ฒ์ ์์ํ๊ณ , ๊พธ์คํ ๊ฐ์ ํด ๋๊ฐ๋ ๊ณผ์ ์ด๋ค.โ๋ผ๋ ์ ์ ๋๋ค.
NotionPresso๋ฅผ ํตํด ์ป์ ๊ฒ๋ค์ ๋จ์ํ ๊ธฐ์ ์ ์ฑ๊ณผ์ ๊ทธ์น์ง ์์์ต๋๋ค.
- ์ฌ์ฉ์๋ค๊ณผ ์ง์ ์ํตํ๋ฉฐ ์๋ก์ด ์์ด๋์ด๋ฅผ ์ป์๊ณ ,
- ๊ธฐ์ ์ ๋์ ์ ํด๊ฒฐํ๋ฉด์ ์ฑ์ฅํ ์ ์์์ผ๋ฉฐ,
- ๋ ๋์๊ฐ ์คํ์์ค๊ฐ ๊ฐ์ ธ๋ค์ฃผ๋ ํ์ ์ ํ์ ๊ฒฝํํ ์ ์์์ต๋๋ค.
์คํ์์ค๋ ์ฌ๋ฌ๋ถ์ ์ปค๋ฆฌ์ด๋ฅผ ๋ฐ๊ฟ ์ ์๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ๋ฌผ๋ก ์ฌ์ด ๊ธธ์ ์๋๋๋ค. ์์ฅ์ ์กฐ์ฌํ๊ณ , ์ฌ์ฉ์๋ค์ ํผ๋๋ฐฑ์ ์์ฉํ๋ฉฐ, ์ง์์ ์ผ๋ก ๊ฐ์ ํ๋ ค๋ ๋ ธ๋ ฅ์ด ํ์ํฉ๋๋ค.
๊ทธ๋ผ์๋ ์ ๋ ์ฌ๋ฌ๋ถ์๊ฒ ์ด ์ฌ์ ์ ์ถ์ฒํฉ๋๋ค. ์คํ์์ค๋ ๋จ์ํ ๊ฒฐ๊ณผ๋ฌผ๋ก ํ๊ฐ๋์ง ์์ต๋๋ค. ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๊ณ ๋ฏผํ๊ณ , ์ด๋ฅผ ๊ณต๊ฐํ๋ฉฐ ๋ ๋์ ๋ฐฉํฅ์ผ๋ก ๋์๊ฐ๋ ค๋ ๊ณผ์ ์์ฒด๊ฐ ํฐ ์๋ฏธ๋ฅผ ๊ฐ์ต๋๋ค. ์๋ฒฝํ์ง ์์๋ ๊ด์ฐฎ์ต๋๋ค. ์ฒซ๊ฑธ์์ ๋ด๋๊ณ , ํ ๋จ๊ณ์ฉ ๋์๊ฐ ๋ณด์ธ์. ์ฌ๋ฌ๋ถ์ ํ๋ก์ ํธ๊ฐ ๊ณง ๋๊ตฐ๊ฐ์๊ฒ๋ ์๋ก์ด ์๊ฐ์ ์ค ๊ฒ์ ๋๋ค. ์ด ๊ธ์ด ์ฌ๋ฌ๋ถ์๊ฒ ์คํ์์ค๋ฅผ ์์ํ ์์ ๋๊ธฐ๊ฐ ๋ ์ ์๊ธธ ๋ฐ๋๋๋ค.
์์ฆIT์ ๋ชจ๋ ์ฝํ ์ธ ๋ ์ ์๊ถ๋ฒ์ ๋ณดํธ๋ฅผ ๋ฐ๋ ๋ฐ, ๋ฌด๋จ ์ ์ฌ์ ๋ณต์ฌ, ๋ฐฐํฌ ๋ฑ์ ๊ธํฉ๋๋ค.