<순서>
1. 상황 설명 : 기존에 fastapi + streamlit 으로 만들어둔 "PPT 생성기"가 있다. (fsl6) 이것을 클로드 바이브코딩을 이용해 리액트로 바꿔보려 한다.
2. 클로드에 정보 제공
- 클로드에 백엔드 폴더 구조 제공
- 클로드에 백엔드 코드 제공
- 클로드에 기능 및 구조 이해시키기
3. 클로드에 리액트 프론트엔드 코드 짜달라고 하기
4. 코드 다운로드
5. 프론트엔드 실행하기
(1) 새 React 프로젝트 생성 : npx create-react-app ppt-generator-frontend
(2) 파일 교체 및 설정 : 기존 src, public 등 폴더 내용 삭제 후 제공된 파일들로 교체, .env 파일 생성 및 설정
(3) 개발 서버 실행(자동으로 웹 페이지 실행됨) : npm start
(4) FastAPI 백엔드도 함께 실행 : uvicorn main:app --reload --port 8000
<정리 및 요약>
해당 방법은 클로드에 백엔드 코드를 제공하고 리액트 프론트엔드 코드를 짜달라고 요청한 방법이다.
이 방법의 장점은 직관적이고, 백엔드 코드를 짠 이후에 프론트엔드 코드를 짜는 것이므로 백엔드 구조를 유지한 채 껍데기인 프론트엔드 UI만 바이브코딩으로 작성했다는 점이다.
단점은 일일히 코드를 입력하고, 코드를 다운받는 작업이 수작업이라는 점이다. 바이브코딩이긴 하지만 노가다 바이브코딩이라고 볼 수 있다.
--------------------------------------------------------------------------------------------------------
@ 상황 설명 :
기존에 fastapi + streamlit 으로 만들어둔 "PPT 생성기"가 있다. (fsl6) 이것을 클로드 바이브코딩을 이용해 리액트로 바꿔보려 한다.
먼저 바이브코딩 리액트 결과부터 공유하면, 다음과 같이 바뀌었다.
클로드 바이브코딩 실행 과정에 대해 공유하고자 한다.
@ 클로드에 백엔드 폴더 구조 제공
먼저 클로드에 백엔드 폴더 구조와 코드들을 제공한다.
@ 클로드에 백엔드 코드 제공
@ 클로드에 기능 및 구조 이해시키기
기능 및 구조에 대해 다시 한번 이해시킨다.
@ 클로드에 리액트 프론트엔드 코드 짜달라고 하기
리액트 프론트엔드 코드가 쭉 생성되고, 목록을 정리해준다.
@ 코드 다운로드 및 디렉토리 구성하기
@ 프론트엔드 실행하기
(1) 새 React 프로젝트 생성
npx create-react-app ppt-generator-frontend
cd ppt-generator-frontend
(2) 파일 교체 및 설정
# 기존 src, public 등 폴더 내용 삭제 후 제공된 파일들로 교체
# .env 파일 생성 및 설정
(3) 개발 서버 실행(자동으로 웹 페이지 실행됨)
npm start # http://localhost:3000에서 확인
(4) FastAPI 백엔드도 함께 실행
cd ../pptgen_fe_vivecoding
uvicorn main:app --reload --port 8000