홈앤서비스 SK BROADBAND

[파트 01] 코딩의 첫걸음 : 도구와 기술 익히기 _챕터 01 바이브 코딩의 첫걸음 __커서와 친해지기 __커서와 의사소통 방법 __커서의 유료 플랜과 무료 플랜, 어떤 차이가 있을까? __구독을 해지하려면? _챕터 02 개발 도구 준비하기 __커서 설치하기 __Node.js 설치 및 터미널 옵션 변경하기 __간단한 프로젝트 생성하기 __Shadcn UI 설치하기 _챕터 03 메모 앱 만들며 프롬프트 작성 기술 익히기 __프롬프트 작성 팁 4가지 알아보기 __보강된 프롬프트 예 확인하기 __메모 앱 만들며 프롬프트 작성 연습해보기 [파트 02] 스티커 메모 앱 만들며 커서와 협업하는 방법 알아보기 _챕터 04 스티커 메모 앱의 기본 구조 만들기 __프로젝트 열고 작업 시작하기 _챕터 05 스티커 메모 앱을 더 멋지게 만들기 __Shadcn UI로 더 멋지게 꾸며보기 _챕터 06 스티커 메모 앱에 기능 추가하기 __메모 삭제, 수정 기능 추가하기 _챕터 07 커서와 함께 디버깅 실습하기 __오류 일부러 만들어보기 _챕터 08 아이디어를 바로 화면으로,v0로 시작하기 __v0 사용해보기 __v0 + 커서 워크플로 살펴보기 [파트 03] v0로 로또 6/45 앱 만들고 배포하기 _챕터 09 프로젝트 소개 및 앱 기본 구조 만들기 __v0에서 로또 6/45 생성기 인터페이스 구성하기 _챕터 10 로또 번호 저장, 삭제 기능 추가하기 __로또 번호 저장, 삭제 기능 추가하기 _챕터 11 v0에서 배포해서 다른 사람과 앱 공유하기 __임시 URL 생성 및 공유 절차 알아보기 [파트 04] AI 챗봇 만들기 _챕터 12 AI 챗봇 제작을 위한 준비하기 __[바이브 코딩 01] Next.js 프로젝트 생성하고 shadcn/ui 설정 및 초기화하기 __[바이브 코딩 02] v0로 챗봇 UI 만들고 테마 토글 기능 추가하기 __[바이브 코딩 03] v0에서 만든 UI 코드를 커서로 가져오기 __[바이브 코딩 04] 챗봇을 위한 API 키 준비하고 연결하기 __[바이브 코딩 05] 필요한 도구 설치하기 _챕터 13 단계별 프롬프트로 스트리밍 챗봇 만들기 __[바이브 코딩 06] 백엔드 통신 담당 API Route 만들기 __[바이브 코딩 07] 사용자와 대화하는 창 만들기 _챕터 14 대화 저장을 위한 수파베이스 준비하기 __[바이브 코딩 08] 수파베이스 프로젝트 생성하기 __[바이브 코딩 09] SQL Editor로 수파베이스에 테이블 생성하기 _챕터 15 수파베이스를 이용하여 대화 생성하고 저장하기 __[바이브 코딩 10] 수파베이스 클라이언트 설정하기 __[바이브 코딩 11] 새 대화 시작 기능 구현하기 __[바이브 코딩 12] 메시지 내용 저장 및 불러오기 기능 구현하기 __[바이브 코딩 13] 이전 대화 내용 불러오기 기능 구현하기 [파트 05] AI 챗봇에 인증 페이지 만들기 _챕터 16 챗봇이 나를 알아보게 만드는 인증 시스템 준비하기 __인증과 인가, 뭐가 다른 걸까? __로그인 확인 방식, 세션과 토큰 __클릭 한 번으로 로그인! OAuth 2.0의 마법 __[바이브 코딩 14] 구글 클라우드 API 키로 외부 서비스 연동 준비하기 __[바이브 코딩 15] .env.local 파일에 사용자 인증 설정 추가하기 __[바이브 코딩 16] 폼 관리/검증 도구 준비하기 _챕터 17 챗봇의 ‘얼굴’, 로그인과 회원가입 페이지 만들기 __말보다 그림! AI에게 ‘보여주며’ 직관적으로 요청하기 __[바이브 코딩 17] v0에서 디자인한 UI, 내 프로젝트로 이동시키기 __[바이브 코딩 18] 인증 기능으로 들어가는 ‘문’ 만들기 __[바이브 코딩 19] 인증 시스템 핵심 설정하기 _챕터 18 로그인과 회원가입 기능 구현하기 __[바이브 코딩 20] 유효성 검사 스키마 정의하기 __[바이브 코딩 21] 회원가입 폼 로직 구현하기 __[바이브 코딩 22] 로그인 폼 로직 구현하기 _챕터 19 데이터베이스 연동 강화하기 __[바이브 코딩 23] ‘나’를 알아보는 챗봇 만들기 __[바이브 코딩 24] 챗봇이 회원을 제대로 알아볼까요? __[바이브 코딩 25] 구글 로그인 구현하기 __[바이브 코딩 26] 구글 로그인, 완벽하게 작동할까? [파트 06] PRD 문서 기반으로 할 일 목록 앱 만들기 _챕터 20 체계적인 개발의 시작, 제품 요구사항 문서 준비하기 __개발의 설계도, ‘PRD’가 왜 중요한지 이해하기 __[바이브 코딩 27] 챗GPT와 함께 설계도 만들기 2 __[바이브 코딩 28] 공식 설계도 정하고 v0에게 작업 지시하기 __[바이브 코딩 29] v0 함께 디자인 다듬기 _챕터 21 v0 결과물을 프로젝트에 통합하기 __[바이브 코딩 30] v0에서 디자인한 UI, 이번엔 ‘직접’ 가져오기 _챕터 22 데이터에 기억력 부여하기 __MCP란? __[바이브 코딩 31] 커서에 Supabase MCP 연결하기 __[바이브 코딩 32] 커서로 코드 분석 후 데이터베이스 설계하기 __[바이브 코딩 33] 수파베이스 클라이언트 만들기 __[바이브 코딩 34] 수파베이스에 기능 연결하기 __[바이브 코딩 35] 새로운 할 일에 ‘영구 기억력’ 부여하기 _챕터 23 완료 및 삭제 기능으로 생명력 완성하기 __[바이브 코딩 36] 할 일 상태를 수정하는 완료 표시 기능 추가하기 __[바이브 코딩 37] 삭제 기능 추가로 CRUD 완성하기 [파트 07] 이미지 갤러리 앱 만들기 _챕터 24 프로젝트 기획 및 설계와 UI 디자인 및 기능 구현하기 __이미지 갤러리 앱 핵심 설계도 만들기 __UI 디자인 및 기능 계획하기 __[바이브 코딩 38] 메인 피드와 게시물 관리 UI 만들기 __[바이브 코딩 39] 댓글 및 태그 기능 UI 만들기 __[바이브 코딩 40] 사진 업로드 및 검색 UI 만들기 _챕터 25 데이터베이스 및 API 연동하기 __[바이브 코딩 41] 수파베이스 연동 설정으로 백엔드와 연결하기 __[바이브 코딩 42] 수파베이스 테이블 생성하기 __[바이브 코딩 43] API 라우트 생성 및 연결하기 __[바이브 코딩 44] 댓글 기능 개선하기 _챕터 26 앱 고도화 및 최종 테스트하기 __[바이브 코딩 45] 새 프로젝트 생성 및 코드 통합하기 __[바이브 코딩 46] 이미지 피드 고도화하기 [파트 08] QR/바코드 앱 만들기 _챕터 27 QR 코드 앱 만들기 __[바이브 코딩 47] QR 코드 생성기 구현하기 __[바이브 코딩 48] QR 코드 인식 기능 구현하기 __[바이브 코딩 49] 앱 배포 후 모바일 테스트하기 _챕터 28 바코드 앱 만들기 __[바이브 코딩 50] 바코드 생성기 구현하기 __[바이브 코딩 51] 바코드 인식 기능 구현하기 __[바이브 코딩 52] 바코드 앱 테스트하기 [파트 09] DeepL 클론 앱 완성하기 _챕터 29 DeepL 기획 및 v0로 UI 설계하기 __DeepL 핵심 기능 분해하기 __[바이브 코딩 53] v0와 함께 UI 설계하기 _챕터 30 백엔드 API 구축 및 연결하기 __[바이브 코딩 54] API 준비하기 __[바이브 코딩 55] 핵심 기능에 생명 불어넣기