DevSkills

AI 웹개발자 로드맵

AI 시대 풀스택 웹개발자로 성장하기 위한 핵심 기술 로드맵

마지막 업데이트 · 2026.04
Ctrl + 스크롤로 확대 · 드래그로 이동
언어 & 프레임워크JS 동작 원리 (클로저, 비동기)컴포넌트 설계 (React)타입 시스템 (TypeScript)상태 & 데이터 페칭서버 상태 (TanStack)클라이언트 상태 (Zustand)Server Actions & HooksUI & 스타일링모던 CSS (Nesting 등)유틸리티 (Tailwind)컴포넌트 (shadcn/ui)빌드 · 성능 · a11y번들러 (Vite, Turbopack)렌더링 전략 (SSR/CSR/SSG)성능 측정 (Lighthouse)접근성 (WCAG, ARIA)런타임 & 프레임워크이벤트 루프 / 비동기JS 런타임 (Node, Bun, Deno)HTTP & REST API경량 프레임워크 (Hono)DB & ORMSQL 쿼리 (PostgreSQL)스키마 설계ORM (Drizzle)서버리스 DB (Neon, Supabase)인증 & 보안인증/인가 (Auth.js)웹 보안 (OWASP, 패스키)배포 & 운영클라우드 배포 (Vercel, Railway)CI/CD (GitHub Actions)요구사항 분석요구사항 분해 & Spec 작성유저 스토리 & 이슈 설계기술 선택 (트레이드오프)아키텍처 패턴레이어 아키텍처컴포넌트 기반 설계클린 아키텍처 원칙API 설계REST 설계 원칙API 명세 (OpenAPI)Server Actions & RPCAI 코딩 도구AI IDE (Cursor, Copilot)Agent IDE (Claude Code)도구 통합 (MCP)Context Engineering프롬프트 디자인Rules 파일 설계메모리 & Skill 시스템AI 개발 프로세스작업 분할 & SpecTDD WorkflowHook 설계AI 코드 검증품질·보안·성능·UX 검증AI 기반 코드 리뷰테스트테스트 작성 사고법단위 테스트 (Vitest)E2E 테스트 (Playwright)코드 품질가독성 & 리팩토링린트 (ESLint)포맷팅 (Prettier)올인원 (Biome)Git & 릴리즈브랜치 전략Conventional CommitsGit 훅 (Husky)관측 & 보안에러 추적 (Sentry)사용자 분석 (PostHog)로그/메트릭/트레이스공급망 보안 (npm audit)브라우저 & 클라이언트“RSC가 렌더링 표준이 되고 있어요”서버 & 데이터“서버리스 DB가 확산되고 있어요”설계 & 아키텍처“AI 시대에 설계 역량이 더 중요해지고 있어요”AI Workflow“AI와 협업하는 자신만의 프로세스가 필요해요”Engineering Practice“로그/메트릭/트레이스가 관측의 기본이에요”devskills.net@프롱트AI 풀스택 웹개발자마지막 업데이트 · 2026.04