추천 오픈소스

AI가 가장 많이 학습한 웹 프레임워크라 요청 품질이 안정적입니다. 8강부터 끝까지 이걸로 갑니다.

npx create-next-app@latest my-service

CSS 파일을 따로 관리하지 않아도 되고, AI가 만든 코드에서 스타일을 눈으로 바로 읽을 수 있습니다. create-next-app에 포함.

AI가 저지르는 실수의 상당수를 실행 전에 빨간 줄로 잡아줍니다. 입문자에게 더 필요합니다. create-next-app에 포함.

라이브러리가 아니라 코드가 내 프로젝트에 들어오므로 AI가 자유롭게 고칠 수 있습니다. 18강 디자인 레벨업에 유용.

npx shadcn@latest init

이모지를 아이콘 대용으로 쓰는 'AI 티'를 벗기는 가장 빠른 방법입니다.

npm install lucide-react

글꼴 하나만 바꿔도 화면 인상이 달라집니다. 18강에서 추천하는 기본 글꼴.

테이블을 엑셀처럼 화면에서 만들고, 로그인까지 같은 곳에서 해결됩니다. 12·14강.

npm install @supabase/supabase-js @supabase/ssr

Supabase 대시보드 대신 코드로 테이블을 관리하고 싶어질 때(중급). 처음엔 필요 없습니다.

npm install drizzle-orm

API 라우트로 들어오는 값과 외부 API 응답을 검사하면 13강의 '응답 파싱 실패' 같은 문제가 줄어듭니다.

npm install zod

Claude가 만든 코드와 사람이 고친 코드의 모양을 통일해줍니다. 4강 확장 추천.

npm install -D prettier

커밋 전에 npm run check가 자동으로 돌게 만듭니다. 19강 자동화.

npm install -D husky && npx husky init

'로그인 → 저장 → 목록 확인' 흐름을 매번 손으로 누르는 대신 AI에게 테스트를 쓰게 할 수 있습니다(중급).

npm init playwright@latest

'새 가입자가 생기면 슬랙으로 알림' 같은 서비스 바깥의 자동화에. 19강.

3~5강이 부족하게 느껴졌다면 다음 단계로. 한국어 번역본도 있습니다.

AI 코드를 '읽는' 수준에서 '고치는' 수준으로 올라가고 싶을 때. 20강 마지막 조언의 다음 단계.