[목 차]
Part 1 AI 개발 준비와 연습 프로젝트
1장 AI와 함께 개발하기
1.1 AI 시대, 개발 패러다임의 변화
__1.1.1 AI 모델
__1.1.2 개발 특화 도구
__1.1.3 AI 도구 사용 시 주의사항
1.2 실습 프로젝트 개요
__1.2.1 학습 목표
__1.2.2 주요 기능
__1.2.3 사용 기술
__1.2.4 서비스 작동 구조
1.3 실습 프로젝트를 위한 기초 지식 빠르게 훑기
__1.3.1 웹을 구성하는 세 가지 기술
__1.3.2 클라이언트와 서버 그리고 프런트엔드와 백엔드
__1.3.3 API
__1.3.4 JSON
__1.3.5 웹 브라우저
__1.3.6 데이터베이스
__1.3.7 기타 용어
2장 개발 환경 설정하기
2.1 Node.js 설치하기
__2.1.1 Node.js란
__2.1.2 Node.js 설치
__2.1.3 npm 설치 확인
2.2 Git 설치하기
__2.2.1 Git이란
__2.2.2 Git 설치
__2.2.3 Git 기본 설정
3장 커서 설치 및 기본 사용법 익히기
3.1 커서란
__3.1.1 AI와 함께하는 새로운 개발 방식
__3.1.2 커서의 핵심 기능
3.2 커서 설치 및 기본 설정하기
__3.2.1 커서 설치
__3.2.2 기본 설정
3.3 커서 기본 사용법 익히기
__3.3.1 인터페이스 살펴보기
__3.3.2 AI와 함께 첫 프로젝트 실행하기
__3.3.3 컨텍스트 참조 활용하기
4장 프로젝트의 핵심 기술 스택 이해하기
4.1 Next.js - 웹 애플리케이션의 뼈대
__4.1.1 Next.js의 핵심 기능
__4.1.2 왜 Next.js인가
4.2 Tailwind CSS - 빠르고 일관된 스타일링
__4.2.1 Tailwind CSS의 주요 클래스
__4.2.2 왜 Tailwind CSS인가
4.3 Shadcn/ui - 완성도 높은 UI 컴포넌트
__4.3.1 Shadcn/ui 주요 컴포넌트
__4.3.2 왜 Shadcn/ui인가
4.4 Supabase - 데이터 저장과 인증 기능
__4.4.1 Supabase 핵심 기능
__4.4.2 왜 Supabase인가
4.5 AI SDK - 애플리케이션에 AI 기능 연결
__4.5.1 AI SDK 핵심 기능
__4.5.2 왜 AI SDK인가
__4.5.3 Gemini API 살펴보기
5장 연습 프로젝트: AI 감성 분석 웹 서비스 만들기
5.1 프로젝트 개요
__5.1.1 이 프로젝트에서 배우는 내용
__5.1.2 사용할 기술 스택
5.2 프로젝트 환경 설정하기
__5.2.1 프로젝트 폴더 생성하기
__5.2.2 Next.js 프로젝트 생성하기
__5.2.3 Shadcn/ui 설정 및 컴포넌트 추가하기
__5.2.4 AI SDK 설치하기
__5.2.5 프로젝트 폴더 구조 이해하기
__5.2.6 개발 서버 실행하고 결과 확인하기
5.3 감성 분석 화면 만들기
__5.3.1 감성 분석 화면 구성하기
__5.3.2 화면 구성 결과 확인하기
5.4 감성 분석 기능 구현하기
__5.4.1 Gemini API 연동하기
__5.4.2 감성 분석 기능 구현하기
__5.4.3 감성 분석 기능 확인하기
Part 2 실습 프로젝트: AI 할 일 관리 웹 서비스 만들기
6장 프로젝트 시작하기: 환경 설정 및 규칙 정의
6.1 프로젝트 개요
__6.1.1 프로젝트 정의와 핵심 기능
__6.1.2 실제 사용 시나리오
__6.1.3 프로젝트에서 배우는 내용
__6.1.4 프로젝트 진행 계획
6.2 프로젝트 환경 설정하기
__6.2.1 프로젝트 폴더 생성하기
__6.2.2 Next.js 프로젝트 생성하기
__6.2.3 Shadcn/ui 설정 및 컴포넌트 추가하기
__6.2.4 AI SDK 설치하기
__6.2.5 프로젝트 폴더 구조 살펴보기
__6.2.6 개발 서버 실행하고 결과 확인하기
6.3 프로젝트 규칙 설정하기
__6.3.1 규칙의 유형
__6.3.2 프로젝트 규칙의 구조와 작성 방식
__6.3.3 규칙 생성하기
7장 프로젝트 기획하기: PRD 작성
7.1 PRD 개요
__7.1.1 PRD 개념과 필요성
__7.1.2 프로젝트의 PRD 구성 요소
7.2 AI와 함께 PRD 작성하기
__7.2.1 PRD 작성 요청하기
__7.2.2 결과 검토하기
7.3 PRD와 커서 연동하기
__7.3.1 PRD 저장하기
__7.3.2 PRD 참조하기
8장 화면 구성하기: 디자인 시스템과 로그인/메인 페이지
8.1 디자인 시스템 이해와 활용하기
__8.1.1 브랜드 컬러 정의하기
__8.1.2 할 일 관리 컴포넌트 생성하기
8.2 로그인과 회원가입 화면 구성하기
__8.2.1 로그인 화면 구성하기
__8.2.2 회원가입 화면 구성하기
8.3 할 일 관리 메인 화면 구성하기
9장 백엔드 구축하기: 데이터베이스, 인증, CRUD
9.1 Supabase 프로젝트 생성
__9.1.1 Supabase 프로젝트 생성하기
__9.1.2 환경 변수 설정하기
__9.1.3 프로젝트에 Supabase 연결하기
9.2 데이터베이스 테이블 생성하기
__9.2.1 SQL 쿼리 생성하기
__9.2.2 SQL 실행하기
9.3 회원가입과 로그인/로그아웃 기능 구현하기
__9.3.1 회원가입 기능 구현하기
__9.3.2 로그인/로그아웃 기능 구현하기
__9.3.3 사용자 인증 상태 관리 기능 구현하기
9.4 할 일 관리 기능 구현하기
__9.4.1 코드 작성하기
__9.4.2 기능 확인하기
__9.4.3 기능 개선하기
10장 AI 기능 구현하기: 자연어 처리 및 분석
10.1 AI 할 일 생성 기능 구현하기
__10.1.1 자연어 입력을 구조화 데이터로 변환하기
__10.1.2 시스템 프롬프트 개선하기
__10.1.3 사용자 입력 검증하기
10.2 AI 요약 및 분석 기능 구현하기
__10.2.1 AI 분석 기능 구현하기
__10.2.2 분석 로직 최적화하기
__10.2.3 분석 결과 UI 개선하기
11장 서비스 배포하기: 실제 서비스 공개
11.1 배포 준비하기
__11.1.1 환경 변수 점검하기
__11.1.2 로컬 빌드 테스트하기
__11.1.3 기능 점검하기
__11.1.4 메타 태그 설정하기
__11.1.5 파비콘 추가하기
11.2 Github에 코드 업로드하기
__11.2.1 원격 저장소 생성하기
__11.2.2 원격 저장소 연결하기
__11.2.3 원격 저장소에 코드 업로드하기
11.3 Vercel로 자동 배포하기
__11.3.1 프로젝트 생성하기
__11.3.2 자동 배포 테스트하기
12장 프로젝트 마무리와 이후 학습
12.1 전체 과정 되돌아보기
__12.1.1 개발 과정의 변화
__12.1.2 AI 협업 능력 경험
__12.1.3 완성된 결과물
12.2 이후 학습 방향
__12.2.1 현재 서비스 개선하기
__12.2.2 새로운 프로젝트 도전하기
__12.2.3 기술 스택 확장하기
__12.2.4 실무 경험 쌓기
