클로드AI로 로또 6/45 번호 생성기 만들기
강의에서 배운 내용을 복습하는 겸, 로또 6/45 번호 생성기를 하나 제작해서 배포해보려고 합니다.예전에 파이썬으로 번호만 뽑아내는 코드를 작성한 적이 있는데, 앱으로 만들면 성취감이 더 클 것 같아요. 클로드AI 에 첫번째 프롬프트를 입력하고 PRD를 작성해 달라고 요청했습니다. 단계별 프롬프트를 요청해서 각 단계의 프롬프트를 순차적으로 터미널으로 연 클로드에 입력해 줄 겁니다.전 웹…
태그 바이브코딩
[혼공바이브코딩] 4주차 -2_게임 제작으로 배우는 체계적인 개발과 관리
할루시네이션 없는 AI 콘텐츠 상식 퀴즈 게임 구현하기 프롬프트를 차례로 입력하는 중에 그만 토큰이 바닥이 나 버렸습니다.너무 오래걸려서 이상하게 생각하던중에 제가 바닐라 JS랑 리액트 중에서 선택을 리액트로 했다는 사실이 떠올랐습니다.클로드의 추천은 바닐라 JS였는데 뭔가 생소하기도 하고 어디선가 리액트를 들어본 것 같아서 그냥 리액트를 선택했거든요.다음날 토큰이 다시 차서 오랜 기다림 끝에…
추가로 새 앱을 GitHub에 푸시해서 배포하는 방법
추가로 다른 앱을 깃허브에 푸시해서 웹에 배포하려고 합니다.리포지토리부터 새로 만들어서 진행해야할 것 같은데, 조금만 달라져도 응용이 힘드네요.자주 반복하면 어떻게 몸에 익혀지지 않을까 해서 새로 할때마다 이렇게 포스팅으로 정리해가며 반복하고 있습니다. GitHub에 새 저장소 만들기 GitHub 접속 → New repository 생성 후 나오는 repo 주소 복사 로컬 프로젝트 폴더로 이동 Git…
[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱
단계별 프롬프트 전략 바이브코딩의 핵심은 ‘생각의 설계’와 ‘실제 구현’을 분리하는 것입니다. 무작정 코드를 짜달라고 하기보다, 잘 짜인 기획서를 바탕으로 단계를 나누어 접근할 때 프로젝트의 완성도가 결정됩니다. 처음 시작하는 분들을 위해 효율적인 4단계 워크플로를 정리했습니다. 1. PRD 작성: 프로젝트의 지도 그리기 먼저 클로드 웹(Claude.ai)에서 PRD(제품 요구사항 정의서)를 작성하며 프로젝트의 밑그림을 그립니다.…
Claude AI로 30분 만에 퀴즈 앱 만들기 – 바이브 코딩 실전 프로젝트
코딩을 한 번도 해본 적 없어도 웹 앱을 만들 수 있다면 믿으시겠어요? 저는 Claude AI의 바이브 코딩 기능을 활용해서 단 30분 만에 완성도 높은 퀴즈 게임 앱을 만들었습니다. 별도의 개발 환경 설정 없이, 그저 대화하듯 원하는 기능을 설명하기만 하면 됩니다. 🎮 퀴즈 앱 직접 체험하기 1. 프로젝트 개요 왜 이…
클로드로 만든 앱 워드프레스에 게시하기
혼공학습단 강의의 진도에는 포함되지 않지만 클로드로 만든 앱을 블로그에 게시하고 싶었습니다.워드프레스 자체에 올릴려고 해보니 제가 만든 앱 형식이 HTML이 아니라서 불가능했습니다.dist 폴더를 FileXilla로 직접 업로드를 하니 빈 화면만 뜨더군요.순수 프론트엔드(HTML/CSS/JS) 이면서 서버 API 호출이 없을 때만 직접 업로드 방식이 괜찮다고 하네요. 또한 수익형 블로그의 관점에서 보자면 검색은 워드프레스 글에서 일어나야…
[혼공바이브코딩] 3주차_클로드 코드 시작하기
클로드 코드 설치하기 : 개발 환경 구축부터 첫 실행까지 실습 환경 준비를 위해 두 가지 필수 도구가 필요합니다. 첫째, 노드JS(Node.js)입니다. 노드JS는 자바스크립트 실행 환경으로, 클로드 코드가 실제로 동작할 수 있는 기반을 제공합니다. 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 핵심 엔진 역할을 합니다. 둘째, 깃(Git)입니다. 깃은 버전 관리 도구로, 소스…
[혼공바이브코딩] 2주차_마케팅 포트폴리오 제작
클로드로 마케팅 포트폴리오 제작하기 포트폴리오 웹페이지를 만들려고 해. 주요 기능은 채용 담당자가 30초 안에 내 역량을 파악할 수 있는 임팩트 있는 구성이야. 프리랜서 전환을 준비하는 마케터를 위한 것이고, 경쟁력 있는 지원자로 보이기 위해 필요해. 어떻게 구현하면 좋을 지 기술적인 방향과 함께 구체적인 PRD를 작성해줘. 이 PRD대로 진행할 거야. 먼저 PRD를…
[혼공바이브코딩] 1주차_나의 첫 바이브코딩
방학에는 뭐다? 혼공학습단이다!이번에도 모집공고 뜨자마자 신청했습니다.다만 이번에는 바이브코딩만 단독 진행한다고 하네요.고민할 필요가 없어서 오히려 좋아! 바이브 코딩(Vibe Coding)이란? 바이브 코딩(Vibe Coding)은 AI와 대화를 주고받으며 프로그램을 만드는 개발 방식입니다.이 개념은 2025년 2월, 오픈AI 공동 창업자 안드레이 카파시(Andrej Karpathy)가 제안하며 주목받기 시작했습니다. 기존 코딩 방식과의 차이 기존 개발 방식에서는 HTML, CSS,…