바로바로 바이브 코딩 with 커서 AI

[01장] 바이브 코딩 시작하기
01.1 바이브 코딩을 하기 전에 꼭 알아두면 좋은 지식
__ IDE가 뭔가요?
__ 에이전트가 뭔가요?
__ 에이전틱한 커서의 특징 다섯 가지
01.2 커서 회원 가입, 구독, 구독 해지까지
__ 커서 회원 가입하고 결제 카드 등록하기
__ 커서 결제 카드 제거하기
__ 커서 프로 플랜 결제 후 대시보드 살펴보기
01.3 커서 설치하고 인터페이스 살펴보기
__ 커서 설치하고 기본 설정하기
__ 커서의 핵심 기능 하나, 대화 모드 설정
__ 커서의 핵심 기능 둘, 모델 설정
__ 커서의 핵심 기능 셋, 컨텍스트
01.4 바이브 코딩 시작하기
__ [바로 01] 애플 사이트 따라 만들기
__ [바로 02] 사과 게임 만들어보기
__ [바로 03] 커서 브라우저로 크롤링 쉽게 해보기
[총정리 퀴즈]

[02장] 터미널과 친해지기
02.1 터미널이 뭐지?
__ 터미널이라는 이름이 붙은 이유
__ 터미널에서 할 수 있는 일은 무엇일까?
02.2 터미널 사용해보기
__ [바로 04] 터미널 직접 조작해보기
__ [바로 05] 바탕화면 정리시켜보기
[총정리 퀴즈]

[03장] 커서로 문서, 프레젠테이션, 학습 자료 만들어보기
03.1 커서로 문서 작성해보기
__ 마크다운이란?
__ [바로 06] 커서로 마크다운 문서 작성해보기
__ [바로 07] 커서와 Marp로 프레젠테이션 작성해보기
__ [바로 08] 커서로 워드 문서 만들기
__ [바로 09] 커서로 마인드맵 그리기
03.2 커서로 시각화 문서 작업해보기
__ [바로 10] draw.io로 멋진 흐름도 그려보기
__ [바로 11] 수학 수식 쉽게 입력하기
[총정리 퀴즈]

[04장] 바이브 코딩의 핵심, 웹 기술
04.1 웹 기술의 기초, HTML, CSS, 자바스크립트 알아보기
__ 웹사이트의 뼈대를 담당하는 HTML
__ 웹사이트를 아름답게 하는 CSS
__ 웹사이트에 기능을 추가하는 자바스크립트
__ [바로 12] HTML만으로 구성된 웹사이트 만들어보기
__ [바로 13] CSS를 더해서 웹사이트에 옷 입히기
__ [바로 14] 자바스크립트를 더해서 기능 추가하기
04.2 웹 기술로 다양한 웹사이트 만들어보기
__ [바로 15] 입체 명함 효과가 있는 자기소개 페이지 만들기
__ [바로 16] 노션 스타일의 마크다운 글쓰기 도구 만들기
[총정리 퀴즈]

[05장] 바이브 코딩과 함께 프런트엔드 기술의 세계로
05.1 프런트엔드란 무엇일까?
__ 리액트가 뭔가요?
__ [바로 17] 리액트로 클리커 게임 만들어보기
__ 바이브 코딩을 하면 꼭 만나게 되는 npm run dev
05.2 Next.js로 바이브 코딩해보기
__ 리액트를 쓴다면서요! Next.js는 뭐예요?
__ [바로 18] Next.js로 간단한 웹사이트 만들어보기
__ [바로 19] 인스타그램과 비슷한 사이트 만들어보기
__ 로컬 스토리지가 뭔가요?
__ [바로 20] 새로고침해도 유지되는 뽀모도로 타이머 만들기
__ [바로 21] 메모 앱 만들어보기
[총정리 퀴즈]

[06장] 바이브 코딩과 함께 디자인 기술 사용해보기
06.1 라이브러리와 프레임워크 알아보기
__ 프레임워크가 뭔가요?
__ 웹사이트를 꾸며주는 CSS 도구
__ [바로 22] 메모 앱 디자인 변경해보기
06.2 디자인 도구로 아름다운 앱 만들어보기
__ [바로 23] v0 서비스로 더 쉽게 웹사이트 만들기
__ [바로 24] Tweakcn으로 아름다운 글쓰기 도구 만들어보기
[총정리 퀴즈]

[07장] 에이전트를 보완하는 기술 알아보기
07.1 에이전트에게 지침 미리 내려두기 AGENTS.md
__ 커서가 한글로 대답하는 이유는?
__ [바로 25] AGENTS.md로 지침 등록하기
__ AGENTS.md의 적용 범위 알아보기
__ AGENTS.md는 만능? 주의할 점도 있어요
07.2 에이전트가 알아서 꺼내 쓰는 스킬
__ 스킬의 구성 알아보기
__ 스킬과 AGENT.md 비교하기
__ [바로 26] 나만의 스킬 직접 만들어보기
__ [바로 27] 잘 만들어놓은 스킬 가져다 사용하기
07.3 특정 작업을 사용하기, 서브에이전트
__ 언제 서브에이전트를 쓰면 좋을까?
__ [바로 28] 서브에이전트 만들어보기
[총정리 퀴즈]

[08장] 내가 만든 사이트 서비스를 세상에 배포해보기
08.1 배포? 서비스? 그게 뭐죠?
__ 24시간 사용자 요청을 기다리는 컴퓨터, 서버
__ localhost와 포트 번호가 뭐예요?
__ 친구가 내가 만든 웹 서비스를 보려면?
08.2 내가 만든 사이트 배포해보기
__ 버셀이 뭐죠?
__ [바로 29] 깃허브 페이지에 간단한 사이트 배포해보기
__ [바로 30] 깃허브 페이지에 배포한 사이트 수정하기
__ [바로 31] 버셀 서비스에 일정 공지 사이트 배포해보기
[총정리 퀴즈]

[09장] 데이터베이스로 웹사이트 주요 기능 구현하기
09.1 데이터베이스 이해하고 사용해보기
__ 데이터베이스에도 종류가 있어요
__ [바로 32] 로컬 데이터베이스로 회원 가입이 되는 게시판 만들기
09.2 수파베이스로 데이터베이스 배포하기
__ 수파베이스와 파이어베이스 알아보기
__ [바로 33] 로컬 기반 데이터베이스로 노션 클론 사이트 시작하기
__ [바로 34] 수파베이스 도입하기
__ 구글 로그인의 원리를 이해해봅시다
09.3 구글 로그인 도입하기
__ [바로 35] 구글 개발자 콘솔에 정보 등록하기
__ [바로 36] 구글 Provider 설정하기
09.4 버셀로 서비스 런칭하기
__ [바로 37] 깃허브에 푸시하기
__ [바로 38] 깃허브 리포지터리를 버셀에 연결하고 배포하기
__ [바로 39] 버셀 배포 후 수파베이스에 돌아갈 주소 입력해주기
[총정리 퀴즈]

[10장] 크롤링 프로그램 만들기
10.1 크롤링의 기초 공부하기
__ [바로 39] 크롤링 핵심, 태그와 속성 이해하기
__ [바로 40] 내가 원하는 데이터는 어떻게 가져올 수 있을까?
__ 크롤링, 막 해도 되는 것일까?
10.2 다양한 방법으로 크롤링해보기
__ [바로 41] 크롬 브라우저의 개발자 도구로 1년 치 금 시세 크롤링하기
__ [바로 42] 데이터도 꿰어야 보배, 통계 처리하고 시각화하기
__ [바로 43] 해외 주식 크롤링 프로그램 만들기
__ [바로 44] 알리 익스프레스 사이트 크롤링하기
[총정리 퀴즈]

[11장] 제대로 바이브 코딩하는 법 배워보기
11.1 에이전트가 다 만들어주는 시대, 진짜 필요한 지식은?
__ 프로그램의 3요소 이해하기 : 입력, 처리, 출력
__ 문제에 따라 활용하기 쉬운 데이터 만들기
__ 바꾸기 전에 저장하는 습관, 깃을 사용해보기
__ 바이브 코딩의 한계를 극복하는 노하우, 클린 아키텍처
__ [바로 45] 깃으로 세이브 포인트 만들고 사용해보기
11.2 프로그램 만들면서 배운 내용 적용해보기
__ [바로 46] GUI 애플리케이션으로 쓸 수 있는 파일 이름 변환기 만들기
__ [바로 47] 클린 아키텍처로 마음 한 줄 일기장 만들어보기
[총정리 퀴즈]

[12장] 내 프로그램을 더 풍부하게, API 사용해보기
12.1 API의 개념 알아보기
__ API가 뭐예요?
__ [바로 48] 랜덤 이미지를 주는 API로 미술관 사이트 만들기
12.2 내 프로그램에 API 적용해보기
__ [바로 49] 한국거래소 주식 데이터 API로 나만의 대시보드 만들기
__ [바로 50] 공공 API로 식당 추천 사이트 만들기
[총정리 퀴즈]