AI 요약관련 정보

• 개발자들은 직접 만들면서 배우기 때문에, 기존 플랫폼의 정적 한계를 넘어 상호작용적이고 실험 가능한 환경을 제공하기 위해 맞춤형 코스 플랫폼을 구축했습니다. 🛠️
• Next.js, React, TypeScript를 기반으로 Neon DB, ZOD, MDX, StackBlitz, Tailwind CSS/Shadcn UI, Sentry, Vercel 등 현대적인 기술 스택을 활용하여 견고하고 확장 가능한 플랫폼을 만들었습니다. 🚀
• 성능을 최우선 가치(Northstar)로 삼아 CLS, LCP, INP, TFB와 같은 핵심 웹 바이탈 지표를 모든 아키텍처 및 개발 결정의 기준으로 삼아 사용자 신뢰를 구축했습니다. ⚡
• React Server Components와 Server Actions를 활용하여 데이터를 서버에서 가깝게 가져오고 변형하며, 클라이언트 측 JavaScript를 최소화하는 서버 우선, 캐시 우선 아키텍처를 채택했습니다. ☁️
• 레이아웃을 단순한 시각적 래퍼가 아닌 데이터 경계로 활용하여, 공유 데이터를 레이아웃에서 미리 로드함으로써 중복 네트워크 호출을 줄이고 TFB를 크게 개선했습니다. 🖼️
• 정적 콘텐츠에는 SSG를, 동적 콘텐츠에는 SSR/Server Actions를 사용하고, 부분 사전 렌더링(Partial Pre-rendering)을 통해 즉각적인 정적 셸과 동적 섹션 스트리밍을 결합하여 속도와 최신성을 동시에 확보했습니다. 🧩
• Next.js의 generateMetadata와 React cache 함수를 활용하여 메타데이터와 페이지 데이터를 한 번만 가져오고 재사용하며, 비용이 많이 드는 함수에만 의도적으로 캐싱을 적용하여 효율성을 높였습니다. 💾
• 전역 캐시 무효화(revalidatePath) 대신 revalidateTag를 사용하여 특정 태그가 지정된 캐시만 무효화함으로써, '완료' 버튼 클릭 시 발생하는 백엔드 업데이트 및 캐시 무효화의 효율성을 극대화했습니다. 🏷️
• 사용자 경험을 저해하는 백그라운드 작업(예: 경험치 부여)을 Next.js의 after 함수로 분리하여 응답을 즉시 반환하고, UI가 더 빠르게 반응하도록 하여 체감 성능을 향상시켰습니다. ⏳
• 사용자 액션의 99%가 성공한다는 가정하에, 서버 응답을 기다리지 않고 UI를 즉시 업데이트하는 낙관적 UI(Optimistic UI)를 적용하여 사용자에게 즉각적인 피드백을 제공하고 체감 속도를 극대화했습니다. ✨