LUCATHREE.COM

← Back to list

lucathree.com

Notion λ°μ΄ν„°λ² μ΄μŠ€ 기반 개인 μ›Ήμ‚¬μ΄νŠΈ

πŸ‘€ 개인 ν”„λ‘œμ νŠΈ
|2025. 10. ~ 2025. 10.
Node.jsTypeScriptNext.js
GitHubCodeTry it out β†’
ν˜„μž¬ 보고 κ³„μ‹œλŠ” μ›Ήμ‚¬μ΄νŠΈλŠ” 개인 포트폴리였 κ²Έ λΈ”λ‘œκ·Έλ‘œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄ 직접 λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.
정적인 이λ ₯μ„œλ₯Ό λ³΄μ—¬μ£ΌλŠ” 것을 λ„˜μ–΄, μ œκ°€ μ§„ν–‰ν•œ ν”„λ‘œμ νŠΈλ“€μ— λŒ€ν•œ μžμ„Έν•œ μ„€λͺ…κ³Ό ν‰μ†Œ 개발 κ΄€λ ¨ ν•™μŠ΅ λ‚΄μš© 및 개인적인 κ²½ν—˜λ“€μ„ κΈ€λ‘œ μ •λ¦¬ν•˜κ³  λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ μ œμž‘ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

μ£Όμš” κΈ°λŠ₯

이 μ›Ήμ‚¬μ΄νŠΈμ— ν‘œμ‹œλ˜λŠ” ν”„λ‘œμ νŠΈ μ†Œκ°œκΈ€λ“€κ³Ό λΈ”λ‘œκ·Έ 글은 λ…Έμ…˜ DBλ₯Ό μ‚¬μš©ν•˜μ—¬ μž‘μ„± 및 ν‘œμ‹œλ©λ‹ˆλ‹€.
별도 λ°±μ—”λ“œ μ„œλ²„λ₯Ό κ΅¬μΆ•ν•˜μ§€ μ•Šκ³  λ…Έμ…˜ API와 Vercelλ§Œμ„ μ‚¬μš©ν•˜μ—¬ λ°°ν¬ν–ˆμœΌλ©°, 개인 λ…Έμ…˜ νŽ˜μ΄μ§€μ— μ•„λž˜μ™€ 같이 글을 μž‘μ„±ν•˜λ©΄ λ°”λ‘œ μ›Ήμ‚¬μ΄νŠΈμ— λ°˜μ˜λ˜λŠ” κ΅¬μ‘°μž…λ‹ˆλ‹€.
notion image
notion image
Β 
λ…Έμ…˜ DB둜 λΆ€ν„° 전체 νŽ˜μ΄μ§€ 리슀트 및 κ°œλ³„ νŽ˜μ΄μ§€ μ •λ³΄λŠ” 곡식 Notion API(developers.notion.com/)와 @notionhq/client λ…Έμ…˜ SDKλ₯Ό μ‚¬μš©ν•˜μ—¬ μ‘°νšŒκ°€ 이루어지도둝 κ΅¬ν˜„λ˜μ—ˆμœΌλ©°, μ„ΈλΆ€ νŽ˜μ΄μ§€ λ‚΄μš©μ€ notion-client 및 react-notion-x νŒ¨ν‚€μ§€λ₯Ό μ‚¬μš©ν•΄μ„œ λ…Έμ…˜κ³Ό λ™μΌν•œ λ””μžμΈ 및 λ§ˆν¬λ‹€μš΄ ꡬ쑰둜 ν‘œμ‹œλ˜λ„λ‘ ν–ˆμŠ΅λ‹ˆλ‹€.
notion image
notion image

μ°Έκ³  및 κ°œμ„ μ‚¬ν•­

λ…Έμ…˜μ„ μ‚¬μš©ν•œ μ›Ήμ‚¬μ΄νŠΈ κ΅¬ν˜„μ— λŒ€ν•œ μ•„μ΄λ””μ–΄λŠ” μ˜ˆμ „μ— λΈ”λ‘œκ·Έμš©μœΌλ‘œ μ‚¬μš©ν–ˆλ˜ morethan-log μ˜€ν”ˆμ†ŒμŠ€ νŒ¨ν‚€μ§€λ‘œλΆ€ν„° μ–»μ–΄μ™”μŠ΅λ‹ˆλ‹€. λ‹€λ§Œ, μ˜€ν”ˆμ†ŒμŠ€λ₯Ό κ·ΈλŒ€λ‘œ μ‚¬μš©ν•˜λ‹€ λ³΄λ‹ˆ λ…Έμ…˜ API에 변경사항이 생겼을 λ•Œ κ³§λ°”λ‘œ λŒ€μ‘μ΄ λ˜μ§€ μ•Šμ•„ 였λ₯˜κ°€ λ°œμƒν•˜κ±°λ‚˜ λΈ”λ‘œκ·Έ μ™Έ νŽ˜μ΄μ§€λ₯Ό μΆ”κ°€ν•˜κ±°λ‚˜ μ»€μŠ€ν„°λ§ˆμ΄μ§• ν•˜λŠ” 것에 μ œμ•½μ΄ μžˆμ–΄ 별도 μ œμž‘μ„ ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
특히, morethan-log λŠ” 비곡식 λ…Έμ…˜ νŒ¨ν‚€μ§€μΈ notion-client에 전체 κΈ°λŠ₯을 μ˜μ‘΄ν•˜κ³  μžˆμ–΄ 블둝 λ‹¨μœ„λ‘œ λ³΅μž‘ν•˜κ²Œ κ΅¬μ„±λ˜μ–΄ 있고 λ³€ν™” κ°€λŠ₯성이 높은 λ…Έμ…˜ 였브젝트 데이터λ₯Ό λ‹€λ€„μ•Όν•˜λŠ” λΆˆνŽΈν•¨μ΄ μžˆμ—ˆλŠ”λ°, notion-clientλŠ” νŽ˜μ΄μ§€ λ‚΄μš© λ Œλ”λ§μ—λ§Œ μ‚¬μš©ν•˜κ³  λ…Έμ…˜DB μ‘°μž‘μ€ 곡식 SDKλ₯Ό μ‚¬μš©ν•˜λ„λ‘ κ°œμ„ ν•˜μ—¬ μ‘°μž‘ 및 κΈ°λŠ₯ μΆ”κ°€κ°€ 더 κ°„νŽΈν•˜κ²Œ μ΄λ£¨μ–΄μ§ˆ 수 μžˆλ„λ‘ κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.

기술 μŠ€νƒ

  • Node.js 22+
  • TypeScript
  • Next.js
  • Tailwind.css
  • @notionhq/client, notion-client
  • react-notion-x
  • vercel
Β