데브허브 | DEVHUB | AI 코딩할 때 이렇게 따라해보세요(Next.js app router 예제 코드 포함)AI 코딩할 때 이렇게 따라해보세요(Next.js app router 예제 코드 포함)
- AI 코딩의 본질은 사람이 설계하고 AI가 코딩(타이핑)하는 것이며, 구체적인 설계와 정밀한 프롬프트가 결과물의 품질을 결정합니다. 🧠
- 설계는 문제 정의, 프롬프트는 설계를 AI가 이해할 수 있는 형태로 번역한 것이며, AI는 구현 코딩을 담당합니다. ✍️
- AI 코딩 과정은 문제 정의 → 설계 → 프롬프트 명세 → AI 코딩 → 검증/리뷰 단계로 진행되며, 프롬프트 명세는 AI와 협력하여 반복적으로 개선합니다. 🔄
- 좋은 설계는 변화에 유연하게 대응하며, Next.js App Router에서는 '서버 우선(Server-first)' 원칙과 '도메인 단위 응집도'를 강조합니다. 🏗️
- '도메인 단위 응집도'는 함께 변하는 데이터 패칭 로직과 UI 컴포넌트를 하나의 맥락(폴더)으로 묶어 관리하는 것을 의미합니다. 📦
- Next.js App Router에서 서버 컴포넌트를 활용하여 데이터 패칭과 UI 렌더링을 서버에서 수행함으로써 JS 번들을 최소화하고 SEO 및 초기 렌더링 속도를 최적화합니다. 🚀
- 프롬프트 작성 시, 반복되는 기술 철학이나 품질 기준은 '룰(Rules)'로 고정하고, 기능별 상세 요구사항은 '프롬프트'로 구체적으로 작성하여 효율성을 높입니다. 📜
- 클라이언트 사이드 렌더링(CSR)은 인터랙티비티가 많은 경우에 유리하지만, SEO나 초기 로딩 속도가 중요한 경우 서버 컴포넌트 기반의 SSR이 더 적합합니다. ⚖️
- AI 코딩 결과물은 우리가 설계한 내용을 AI가 구현한 것이므로, 엔지니어는 코드를 이해하고 검증/리뷰하는 역할을 수행해야 합니다. ✅
- Next.js App Router 설계 시 데이터와 UI가 도메인 단위로 묶였는지, 서버 컴포넌트가 주로 활용되었는지, 클라이언트 JS 번들이 최소화되었는지 등을 점검해야 합니다. 💡