search

shongs27 / notion-blog

CMSλ₯Ό λ…Έμ…˜μœΌλ‘œ ν™œμš©ν•œ λΈ”λ‘œκ·Έ
notion-blog-shongs27.vercel.app
2 stars 0 forks source link

readme

Notion Blog

πŸš€ 배포

배포 μ•±

폴더 ꡬ쑰

src
β”‚
β”œβ”€ assets  # 이미지 파일(svg)을 μ»΄ν¬λ„ŒνŠΈλ‘œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄ λͺ¨μ•„놓은 폴더
β”œβ”€ hooks # μ—¬λŸ¬ custom hook이 λͺ¨μ—¬μžˆλŠ” 폴더
β”œβ”€ components  # μ»΄ν¬λ„ŒνŠΈλ₯Ό λͺ¨μ•„놓은 폴더
β”‚     β”œβ”€ layout  # layoutꡬ성을 μœ„ν•œ μ»΄ν¬λ„ŒνŠΈκ°€ μžˆλŠ” 폴더
β”‚     β”œβ”€ MainDoor # Homeν™”λ©΄ μ ‘μ†μ‹œ ν™˜μ˜ν•˜λ©° λΈ”λ‘œκ·Έλ₯Ό μ†Œκ°œν•˜λŠ” μ»΄ν¬λ„ŒνŠΈ
β”‚     β”œβ”€ Loading # 검색 μ‹œ λ‘œλ”©λ°”λ₯Ό μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ
β”‚     β”œβ”€ Posts # ν¬μŠ€νŠΈλ“€μ„ Grid ν˜•νƒœλ‘œ λ³΄μ—¬μ£ΌλŠ” μ»΄ν¬λ„ŒνŠΈ
β”‚     β”œβ”€ Tags # PostList에 νƒœκ·Έλ“€
β”‚     β”œβ”€ PageNationContainer # Post에 νŽ˜μ΄μ§€λ„€μ΄μ…˜μ„ μœ„ν•œ μ»΄ν¬λ„ŒνŠΈ
β”‚     β”œβ”€ PageNation # νŽ˜μ΄μ§€λ„€μ΄μ…˜ μ»΄ν¬λ„ŒνŠΈ
β”‚     β”œβ”€ PostDetail # 포슀트 λ‚΄μš© νŽ˜μ΄μ§€λ₯Ό λ³΄μ—¬μ£ΌλŠ” 상세 μ»΄ν¬λ„ŒνŠΈ
β”‚     β”œβ”€ MappedNotion # mapImageUrl이 override된 notionRenderer
β”‚     β”œβ”€ TableofContents # 포슀트 λ‚΄μš© νŽ˜μ΄μ§€μ˜ λͺ©λ‘μ„ λ³΄μ—¬μ£ΌλŠ” μ»΄ν¬λ„ŒνŠΈ
β”‚     └─ PostNav # 포슀트 μƒμ„Έν™”λ©΄μ—μ„œ λ‹€λ₯Έ 포슀트둜 λ„˜μ–΄κ°€λŠ” 링크
β”‚
β”œβ”€ pages # λΌμš°νŒ… λ³„λ‘œ 이동가λŠ₯ν•œ νŽ˜μ΄μ§€
β”‚     β”œβ”€ _app  # 곡톡 νŽ˜μ΄μ§€
β”‚     β”œβ”€ about  # 이λ ₯μ„œ νŽ˜μ΄μ§€
β”‚     β”œβ”€ contact  # λ°©λͺ…둝 κΈ°λŠ₯의 νŽ˜μ΄μ§€
β”‚     β”œβ”€ index  # Home ν™”λ©΄ νŽ˜μ΄μ§€
β”‚     β”œβ”€ search  # 검색 νŽ˜μ΄μ§€
β”‚     └─ works  # ν”„λ‘œμ νŠΈ λͺ¨μ•„놓은 νŽ˜μ΄μ§€
β”‚
β”œβ”€ stores  # λ¦¬λ•μŠ€ 섀정을 μœ„ν•œ slice, storeκ°€ μžˆλŠ” 폴더
β”œβ”€ styles  # CSS κΈ€λ‘œλ²Œ μŠ€νƒ€μΌμ„ μœ„ν•œ 폴더
└─ types  # Typescript μ •μ˜ 파일

πŸ“ 기술 μŠ€νƒ

πŸ“Œ κ΅¬ν˜„ λ‚΄μš©

1. Notion API

Notion을 CMS둜 μ΄μš©ν•¨μœΌλ‘œμ„œ λΈ”λ‘œκ·Έ 포슀트λ₯Ό 관리

image

2. λ Œλ”λ§ μ΅œμ ν™”

λ‹€μ–‘ν•œ λ Œλ”λ§ 방식을 μ‚¬μš©ν•˜μ—¬ μ΅œμ ν™”λœ λΈ”λ‘œκ·Έλ₯Ό μ„€κ³„ν–ˆμŠ΅λ‹ˆλ‹€

SSR

검색 μ‹œ SSR을 톡해 μ„œλ²„μ—μ„œ 검색 데이터λ₯Ό 받아와 동적인 νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€μ–΄μ„œ 제곡

SSG

동적인 λ³€ν™”κ°€ ν•„μš”μ—†λŠ” 정적인 포슀트 νŽ˜μ΄μ§€λ“€μ€ SSGλ₯Ό 톡해 pre-renderingν•œ νŽ˜μ΄μ§€λ₯Ό μ œκ³΅λ°›μ•„ UX ν–₯상을 κΎ€ν•©λ‹ˆλ‹€

CSR

redux/toolkit을 μ΄μš©ν•œ flux ꡬ쑰의 μƒνƒœκ΄€λ¦¬λ₯Ό 톡해 CSR을 μ‚¬μš©ν•©λ‹ˆλ‹€


3. UX ν–₯상

μ΅œμ ν™”λœ λ Œλ”λ§ 방식

λ‹€μ–‘ν•œ λ Œλ”λ§ 방식 쀑, ν•„μš”ν•œ κΈ°λŠ₯에 μ΅œμ ν™”λœ λ Œλ”λ§ 방식을 μ μš©ν•˜μ—¬ UXλ₯Ό ν–₯상 ν–ˆμŠ΅λ‹ˆλ‹€

λ°˜μ‘ν˜• μ›Ή λ””μžμΈ

νƒœλΈ”λ¦Ώ, λͺ¨λ°”μΌμ—μ„œλ„ μ΄μš©ν•  수 있게 λ””μžμΈν–ˆμœΌλ©°, responsiveν•œ μ›€μ§μž„μ— 따라 UI의 ꡬ성을 λ³€κ²½ν•˜λŠ” 효과λ₯Ό μ μš©ν–ˆμŠ΅λ‹ˆλ‹€.

관심사별 νƒœκ·Έ

λΈ”λ‘œκ·Έ UXμ—μ„œ μ€‘μš”ν•œ 것은 κ΄€μ‹¬μ‚¬λ³„λ‘œ 포슀트λ₯Ό 확인할 수 μžˆλŠ” κ²½ν—˜μ΄λΌκ³  νŒλ‹¨ν•˜μ—¬ νƒœκ·Έλ₯Ό 톡해 κ΄€λ ¨μžˆλŠ” 포슀트λ₯Ό μ†μ‰½κ²Œ 확인할 수 μžˆλŠ” 것을 μ€‘μš”μ‹œν•˜λŠ” UIμž…λ‹ˆλ‹€

Table of contents, 검색기λŠ₯, λ‘œλ”©λ°” λ“±..

table of contents, 검색기λŠ₯ 등을 μ‚¬μš©ν•˜μ—¬ 포슀트 μΉœν™”μ μΈ λΈ”λ‘œκ·Έμ˜ νŠΉμ„±μ„ κ³ λ €ν–ˆμŠ΅λ‹ˆλ‹€


4. μ΅œμ ν™”λ₯Ό μœ„ν•œ λ…Έλ ₯

ν…ŒμŠ€νŒ… μ½”λ“œ 적용

κ°€μž₯ ν•„μš”ν•œ κΈ°λ³Έ μ»΄ν¬λ„ŒνŠΈμ— ν…ŒμŠ€νŒ… μ½”λ“œλ₯Ό μ μš©ν•˜μ—¬ 단일 μ±…μž„μ„ 지ν–₯ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈλ₯Ό κ΅¬μ„±ν•˜λ € λ…Έλ ₯ν–ˆκ³ , 지속적인 관리가 κ°€λŠ₯ν•©λ‹ˆλ‹€.

Next/imageκ°€ μ•„λ‹Œ svg μ»΄ν¬λ„ŒνŠΈ

public을 ν†΅ν•œ next/image의 정적인 이미지 νŒŒμΌμ„ μ‚¬μš©ν•˜μ§€ μ•Šκ³ , svg의 경우 μ»΄ν¬λ„ŒνŠΈλ‘œ κ΅¬μ„±ν•˜μ—¬ css fill μ†μ„±λ“±μœΌλ‘œ 자유둭게 μˆ˜μ •ν•  수 μžˆλ„λ‘ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. μ°Έμ‘°

μ†ŒμŠ€μ½”λ“œ μš©λŸ‰

  1. ν¬μŠ€νŠΈμ™€ ν”„λ‘œμ νŠΈμ˜ λͺ©λ‘μ„ λ³΄μ—¬μ£ΌλŠ” ν•­λͺ©μ„ κ³΅ν†΅ν™”ν•œ PostList μ»΄ν¬λ„ŒνŠΈλ‘œ 톡일 μ‹œμΌœ μž¬ν™œμš©μ„± μžˆλŠ” μ»΄ν¬λ„ŒνŠΈ μ‚¬μš©μ„ κ³ λ―Όν–ˆκ³ ,

  2. lib 라이브러리λ₯Ό 톡해 μ„œλ²„μ‚¬μ΄λ“œμ—μ„œλ§Œ μ‚¬μš©λ˜λŠ” μ½”λ“œλ₯Ό λΆ„λ¦¬ν•˜μ—¬ μ„€κ³„ν•˜μ—¬ ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ λΆˆν•„μš”ν•œ JSμ½”λ“œλ₯Ό λ‘œλ“œν•˜μ§€ μ•Šκ²Œ ν–ˆμŠ΅λ‹ˆλ‹€.


πŸ“Έ κ΅¬ν˜„ κ²°κ³Ό

포슀트 ν”„λ‘œμ νŠΈ 검색 κΈ°λŠ₯