Skip to content

πŸ’Ό ν”„λ‘ νŠΈμ—”λ“œ 개발자의 λΈ”λ‘œκ·Έ & μ›Ή 이λ ₯μ„œ (https://ato-m-a.me)

Notifications You must be signed in to change notification settings

ato-m-a/mdx-blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

93 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

MDX Blog

Web front-end blog and portfolio (2025-2026)

Deployed URL

Index

Project Structure

β”œβ”€β”€ app
β”‚   β”œβ”€β”€ api             # API routes for tRPC and serving dynamic opengraph images.
β”‚   └── ...             # routes and feature-based codes (components, etc...)
β”œβ”€β”€ assets              # static assets (fonts, images)
β”œβ”€β”€ common              # global shared codes
β”‚   β”œβ”€β”€ context         # global shared context (React.context)
β”‚   β”œβ”€β”€ events          # global shared events object (using rxjs)
β”‚   β”œβ”€β”€ ...
β”‚   β”œβ”€β”€ trpc            # tRPC server and client side implementation
β”‚   └── utils           # global shared utility functions
β”œβ”€β”€ components          # global shared components
β”‚   β”œβ”€β”€ ...
β”‚   β”œβ”€β”€ MDXRenderer     # MDX-like renderer component
β”‚   β”‚   β”œβ”€β”€ client.tsx  # client side implementation (using @mdx-js/mdx)
β”‚   β”‚   └── server.tsx  # server side implementation (using next-mdx-remote)
β”‚   β”œβ”€β”€ ui              # UI components (@shadcn/ui)
β”‚   └── MarkdownEditor  # Markdown editor component (using codemirror)
β”œβ”€β”€ config              # Webpack config
β”œβ”€β”€ ...
β”œβ”€β”€ schema              # zod schemas
β”‚   └── ...             # domain specific schemas
└── server              # server side codes using tRPC

Page Routes

└── / # root page
    β”œβ”€β”€ /posts # 포슀트
    β”‚   └── /posts/[:slug] # 포슀트 > 포슀트 상세
    └── /manage # 관리
            β”œβ”€β”€ /manage/career # 관리 > 이λ ₯
            β”‚   β”œβ”€β”€ /manage/career/create # 관리 > 이λ ₯ > μ‹ κ·œ 이λ ₯ μž‘μ„±
            β”‚   └── /manage/career/[:id]  # 관리 > 이λ ₯ > κ°œλ³„ 이λ ₯ 관리
            └── /manage/post # 관리 > 포슀트 관리
                β”œβ”€β”€ /manage/post/create # 관리 > 포슀트 > μ‹ κ·œ 포슀트 μž‘μ„±
                └── /manage/post/update
                    └── /manage/post/update/[:id] # 관리 > 포슀트 > κ°œλ³„ 

Run Project

Note

You can use nvm to manage node versions.

# use node version manager.
nvm use

# install dependencies.
npm install
npm i

# clean install
npm ci

# run project with hot-reloading.
npm run dev

# build project and run with production mode.
npm run build && npm run start

# build project and export bundle analysis.
npm run analyze:html
npm run analyze:json

# prisma migration
npm run prisma:migrate:draft
npm run prisma:migrate:deploy

# after prisma migration, run this command to generate prisma client.
npm run prisma:generate

# run prisma studio (GUI)
npm run prisma:studio

Colophon

Language

Engines

Framework & Library

  • Next.jsv14.2.5 - for building user interfaces, which based on React.
  • React Hook Formv7.53.1 - for efficient form handling.
  • zodv3.23.8 - for data validation at runtime. it helps enforce consistency in the implementation of validation logic.
  • date-fns - for date formatting and parsing, whcih is using with @toss/datev1.2.0.
  • Tailwind CSSv3.4.11 - for styling, which based on utility-first approach.
  • tRPCv11.0.0-rc.528 - for building remote procedures.
  • prismav5.21.1 - for database ORM.
  • @tanstack/react-queryv5.59.16 - for data fetching and caching.
  • @shadcn/ui - for UI components.
  • @uiw/react-codemirrorv4.23.6 - for code editor component.

Deployment

Note

currently running on Vercel, But considering building a self-hosted environment based on Amazon AWS.

About Project

λ Œλ”λ§/λΌμš°νŒ… 및 캐싱 μ „λž΅μ— λŒ€ν•œ 이해λ₯Ό κ°•ν™”ν•˜κ³ , 기쑴의 μ›Ή 이λ ₯μ„œλ₯Ό λΈ”λ‘œκ·Έ κΈ°λŠ₯으둜 ν™•μž₯ν•˜λŠ” ν”„λ‘œμ νŠΈμž…λ‹ˆλ‹€.

개발 κΈ°κ°„

  • 2024.10.21 ~ 2024.12.19 Released v1.0.0

κ΅¬ν˜„ λ‚΄μš©

  • /manage 경둜λ₯Ό μ œμ™Έν•˜κ³  ISR μ‚¬μš©ν•œ Full Route Cacheλ₯Ό μ μš©ν•˜κ³ , useSearchParams ν›… 및 SearchParamsContext, SearchParamsProvider μ‚¬μš©ν•΄ URLSearchParams둜 fetch에 ν•„μš”ν•œ μ „μ—­ μƒνƒœλ₯Ό κ΄€λ¦¬ν•©λ‹ˆλ‹€.
  • /manage 경둜 λ˜ν•œ Static Page둜 κ΅¬ν˜„ν•΄ middlewareλ₯Ό 톡해 μ ‘κ·Ό μ œμ–΄λ₯Ό μˆ˜ν–‰ν•˜κ³ μž ν•˜μ˜€μœΌλ‚˜, Edge Runtimeμ—μ„œμ˜ Redis Client μ‚¬μš© λΆˆκ°€ λ“±μ˜ 이유둜 Layoutμ—μ„œ μˆ˜ν–‰ν•˜λŠ” SSR(Dynamic Rendering) μ „λž΅μ„ νƒν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • κ·Έμ™Έ Next Themesλ₯Ό μ‚¬μš©ν•΄ 닀크λͺ¨λ“œ κ΅¬ν˜„, shadcn/ui 및 Radix UI 기반의 Headless UIλ₯Ό 적극 ν™œμš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€.
  • 인증/인가에 Redis Cloud 및 Http-Only cookie 기반의 μ„Έμ…˜ 방식을 νƒν•˜μ˜€μœΌλ‚˜, 아직 개발 μ€‘μœΌλ‘œ jwt λ°©μ‹μœΌλ‘œ μ „ν™˜ν•œλ‹€λ©΄ Edge Runtimeμ—μ„œμ˜ jwt μ‚¬μš©μ„ μœ„ν•œ jose 등도 고렀해보고 μžˆμŠ΅λ‹ˆλ‹€. ν˜„μž¬μ˜ κ΅¬ν˜„μ€ session.ts을 μ°Έκ³ ν•΄μ£Όμ„Έμš”.

What I Learned

ν•΄λ‹Ή ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•˜λ©° 개인적으둜 λŠλ‚€ λ°”λ‘œλŠ”, Next.js ν”„λ ˆμž„μ›Œν¬κ°€ λ‹€μ–‘ν•œ λ Œλ”λ§ μ „λž΅ κ΅¬ν˜„μ— μžˆμ–΄ 높은 νŽΈμ˜μ„±μ„ μ œκ³΅ν•˜λŠ” 반면, Edge Runtimeμ—μ„œμ˜ μ œμ•½μ΄λ‚˜ cache opt-in/out이 μžμœ λ‘­μ§€ μ•Šμ€ 점(v15μ—μ„œ ν•΄κ²°λ˜μ—ˆλ‹€κ³  λ“€μ—ˆμ§€λ§Œ, κΈ°λ³Έ opt-out으둜 λ³€κ²½λ˜μ–΄ λͺ¨λ“  νŽ˜μ΄μ§€μ— λŒ€ν•΄ λͺ…μ‹œμ μœΌλ‘œ opt-in을 ν•΄μ•Ό ν•˜λŠ” 점) 등이 μžˆμ–΄, μΆ”ν›„ Remix(SSR), Gatsby(SSG)와 같은 ν”„λ ˆμž„μ›Œν¬ μ‚¬μš©κ³Ό ν•¨κ»˜ λ³„λ„μ˜ BFFλ₯Ό κ΅¬ν˜„ν•˜λŠ” 것도 쒋을 것 κ°™λ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€.

개발 ν™˜κ²½

About

πŸ’Ό ν”„λ‘ νŠΈμ—”λ“œ 개발자의 λΈ”λ‘œκ·Έ & μ›Ή 이λ ₯μ„œ (https://ato-m-a.me)

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published