본문 바로가기

전체 글

비개발자가 바이브 코딩할 때 쓰는 도구 총정리 비개발자가 바이브 코딩할 때 쓰는 도구 총정리 | 클로드, VSCode, GitHub, Vercel📌 들어가며바이브 코딩을 시작하려고 하면 제일 먼저 드는 생각이"뭐가 필요하지?" 일 거예요.저도 처음에 강의 들으면서 이것저것 설치하다 보니어느새 여러 개의 도구를 쓰고 있더라고요.오늘은 KDT 강의를 들으면서 실제로 사용하게 된 도구들을비개발자 시각에서 정리해볼게요! 😊 🤖 1. Claude (클로드) - AI 코딩 파트너용도 : 코드 생성, 에러 해결, 개념 질문무료 / 유료 : 둘 다 가능 (강의에서는 유료 권장)👉 https://claude.ai바이브 코딩의 핵심 도구예요."이렇게 만들어줘"라고 말하면 코드를 만들어주고,에러가 나면 원인과 해결 방법도 알려줘요.저는 클로드 유료 버전을 사용.. 더보기
비개발자가 바이브 코딩을 배우면 생기는 일 KDT 유비온 코딩 강의 중간 회고 | 비개발자가 바이브 코딩을 배우면 생기는 일KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다! 📌 들어가며어느덧 강의를 들은 지 2주가 지났어요.매일 새로운 것을 배우면서 기록하다 보니 벌써 14일차까지 왔는데요.중간 점검 겸, 지금까지 배운 내용을 한 번 정리해보려고 해요.처음에 커리큘럼 보고 겁먹었던 그 날이 엊그제 같은데 말이죠.. 🥹 📋 1~14일차 배운 것 한 줄 요약1일차 - 바이브 코딩이 뭔지 처음 알게 된 날2일차 - 동기가 없으면 바이브 코딩도 없다는 걸 배운 날3일차 - AI가 확률로 답한다는 걸 알고 살짝 충격받은 날4일차 - 깃허브, VSCode, 커서... 준비물이 이렇게 많다고?5일차 - VSCode 이것저것 눌러보며 .. 더보기
KDT 유비온 코딩 강의 14일차 [버셀로 배포하] KDT 유비온 코딩 강의 14일차 | 깃허브 푸시하기KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다! 📌 도입오늘은 드디어 만든 웹 명함을 실제 웹에 배포하는 작업을 진행했어요!버셀(Vercel)이라는 플랫폼을 활용해서 깃허브와 연동하고 자동 배포 환경을 구성하는 과정이었는데요.오늘 다룬 핵심 내용은 세 가지였어요.• GitHub 계정과 Vercel 플랫폼 연동 및 자동 배포 환경 구성• 수정된 코드 푸시 및 GitHub 배포 결과 확인 절차• 초기 배포 과정과 동작 테스트 시 유의사항 학습 💡 버셀(Vercel)이란?버셀을 통해서 배포하는 방법을 배웠는데요!간단히 말하면 깃허브에 코드를 올리면 버셀이 자동으로 웹사이트를 만들어주는 플랫폼이에요.무료로 웹 주소까지 제공해줘서 개인 .. 더보기
KDT 유비온 코딩 강의 13일차 [깃허브 푸시하기] KDT 유비온 코딩 강의 13일차 | 깃허브 푸시하기KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다!지난 글은 아래 링크에서 확인 가능합니다!👉 https://ganzhotpot.tistory.com/29 📌 도입오늘은 로컬에서 만든 웹 명함을 실제로 GitHub에 올려서다른 사람도 볼 수 있도록 서버에 업로드하는 작업을 진행했어요!오늘 다룬 주요 내용은 세 가지였어요.• 로컬에서 만든 웹 명함을 GitHub에 업로드(Push) 하는 절차• 서버에 업로드해야 하는 이유 이해• 클라이언트-서버 모델 복습 및 적용 ⚙️ STEP 1. GitHub 업로드 전 기본 설정웹 프로필 코드를 깃허브에 업로드하려면, 로컬 저장소를 깃허브 원격 저장소에 연결하고 푸시하는 과정이 필요하다고 합니다... 더보기
KDT 유비온 코딩 강의 12일차 [Git 실습 깃으로 코드 버전 관리] KDT 유비온 코딩 강의 12일차 | Git 실습 깃으로 코드 버전 관리KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다! 지난 글은 아래 링크에서 확인 가능합니다!https://ganzhotpot.tistory.com/28 📌 도입오늘 드디어 Git을 실제로 활용해 보았는데요!말로만 듣던 버전 관리를 직접 손으로 해보니 감이 오기 시작했습니다 😊오늘 다룬 주요 내용은 세 가지였어요.• Git의 역할과 기본 개념 소개• 코드 저장 및 히스토리 관리의 중요성• 잘못된 코드 복구를 위한 Git의 장점 💡 왜 Git이 필요한가요?지난 강의 초반에 Git과 GitHub를 준비했었는데요.웹 명함 만들기 과정에서는 단순한 작업이라 코드 복원이 쉬웠지만, 복잡한 과정에서는 훨씬 어렵다고 합니.. 더보기
KDT 유비온 코딩 강의 11일차 [Git 실습 로컬 서버 활용 확장 프로그램과 CS모델 설명] KDT 유비온 코딩 강의 11일차 | Git 실습 로컬 서버 활용 확장 프로그램과 CS모델 설명KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다! 📌 도입오늘은 로컬 서버 활용과 확장 프로그램 등 다양한 경험과 지식을 배웠는데요!점점 실제 개발 환경에 가까워지는 느낌이 들어서 흥미로웠습니다 😊오늘 다룬 주요 내용은 세 가지였어요.• HTML 변경사항 실시간 반영을 위한 Live Server 확장 설치• 수정 내용을 자동으로 웹에 반영하는 방법• 클라이언트-서버 구조의 개념 연결 🔌 STEP 1. Live Preview 확장 프로그램 설치하기지난 시간까지는 VSCode에서 수정하고 파일을 저장한 뒤 브라우저에서 새로고침을 해야 변경된 내용을 확인할 수 있었는데요. 오늘은 이 불편함을.. 더보기
KDT 유비온 코딩 강의 10일차 [HTML 웹 명함 구조 변경 및 기능 추가] KDT 유비온 코딩 강의 10일차 | HTML 웹 명함 구조 변경 및 기능 추가 KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다! 📌 도입지난번 웹 명함에 이어서 업그레이드 하는 과정을 담았습니다!슬슬 난이도가 올라가지만 열심히 따라가 봤어요 😅오늘 다룬 주요 내용은 세 가지였어요.• HTML, CSS, JS 분리 방식 이해• 단일 파일로 구현된 구조의 문제와 대안• 구조 변경을 통한 명확한 역할 분리 실습지난번에는 하나의 단일 파일로 만들었었는데, 오늘은 파일을 분리해서 진행하는 강의가 진행됐어요. ⚙️ STEP 1. HTML, CSS, JS 파일 분리하기우선 AI 프로젝트로 들어가서 명령어를 전달했는데요. "내가 작성한 HTML 코드가 있는데 이 코드 데이터를 CSS와 JS로 .. 더보기
KDT 유비온 코딩 강의 9일차 [HTML 웹 명함 만들기] KDT 유비온 코딩 강의 9일차 | HTML 웹 명함 만들기KDT 국비 강의 재직자 전형으로 신청 후 작성하는 기록지입니다! 📌 도입이번에는 HTML로 실제 작업물을 만들어보는 학습 과정을 거쳤는데요!드디어 실제 바이브 코딩 첫 수업이 진행되었습니다! 😊오늘 다룬 주요 내용은 세 가지였어요.• 실습용 HTML 프로젝트 생성• VSCode에서 기본 웹 구조 작성• ChatGPT를 활용한 HTML 코딩 시작이번에는 AI도 같이 활용해서 바이브 코딩 작업이 진행됐는데요.저는 클로드를 활용해서 진행할 예정이라서, 이 글을 보시는 분은 클로드 AI를 활용한 점 참고하시면 좋을 것 같습니다! ⚙️ STEP 1. 클로드 프로젝트 세팅하기지침을 지정해서 프로젝트를 만드는 것을 먼저 보여주셨는데요.강의 내용을 참고.. 더보기

티스토리툴바