Web front-end blog and portfolio (2025-2026)
βββ 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βββ / # 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] # κ΄λ¦¬ > ν¬μ€νΈ > κ°λ³ 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- Next.js
v14.2.5- for building user interfaces, which based on React. - React Hook Form
v7.53.1- for efficient form handling. - zod
v3.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/date
v1.2.0. - Tailwind CSS
v3.4.11- for styling, which based on utility-first approach. - tRPC
v11.0.0-rc.528- for building remote procedures.- consider to switch to Next.js server actions
- prisma
v5.21.1- for database ORM. - @tanstack/react-query
v5.59.16- for data fetching and caching. - @shadcn/ui - for UI components.
- @uiw/react-codemirror
v4.23.6- for code editor component.
Note
currently running on Vercel, But considering building a self-hosted environment based on Amazon AWS.
λ λλ§/λΌμ°ν λ° μΊμ± μ λ΅μ λν μ΄ν΄λ₯Ό κ°ννκ³ , κΈ°μ‘΄μ μΉ μ΄λ ₯μλ₯Ό λΈλ‘κ·Έ κΈ°λ₯μΌλ‘ νμ₯νλ νλ‘μ νΈμ λλ€.
- 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μ μ°Έκ³ ν΄μ£ΌμΈμ.
ν΄λΉ νλ‘μ νΈλ₯Ό μ§ννλ©° κ°μΈμ μΌλ‘ λλ λ°λ‘λ, Next.js νλ μμν¬κ° λ€μν λ λλ§ μ λ΅ κ΅¬νμ μμ΄ λμ νΈμμ±μ μ 곡νλ λ°λ©΄, Edge Runtimeμμμ μ μ½μ΄λ
cache opt-in/outμ΄ μμ λ‘μ§ μμ μ (v15μμ ν΄κ²°λμλ€κ³ λ€μμ§λ§, κΈ°λ³Έ opt-outμΌλ‘ λ³κ²½λμ΄ λͺ¨λ νμ΄μ§μ λν΄ λͺ
μμ μΌλ‘ opt-inμ ν΄μΌ νλ μ ) λ±μ΄ μμ΄,
μΆν Remix(SSR), Gatsby(SSG)μ κ°μ νλ μμν¬ μ¬μ©κ³Ό ν¨κ» λ³λμ BFFλ₯Ό ꡬννλ κ²λ μ’μ κ² κ°λ€κ³ μκ°ν©λλ€.