Tip: Gemini CLI로 구현하기 — Category 페이지네이션 & ErrorPage 프롬프트: gemini "src/components/Category.jsx와 ErrorPage.jsx를 작성해줘. Category는 useParams로 type(now_playing, popular, top_rated)을 받아서 TMDB API movie/[type]?page=[page]를 호출하고, 이전/다음 버튼으로 페이지네이션을 구현해줘. 최대 페이지는 [최대 페이지 수]으로 제한해줘. ErrorPage는 404 메시지와 홈으로 돌아가기 Link를 포함해줘." 사용 가이드: [최대 페이지 수]를 원하는 숫자(기본: 20)로 바꾼다. 카테고리 한글 이름이 필요하면 프롬프트에 … 더 읽기
Tip: Gemini CLI로 구현하기 — AI 챗봇 컴포넌트 프롬프트: gemini "src/components/Chatbot.jsx를 작성해줘. 화면 우하단에 고정된 플로팅 버튼을 클릭하면 채팅창이 열리는 컴포넌트야. useState로 열림/닫힘, 메시지 목록, 입력값, 로딩 상태를 관리하고, useRef로 새 메시지가 오면 자동 스크롤해줘. 메시지 전송 시 [백엔드 URL]/chat 엔드포인트에 fetch로 POST 요청을 보내줘. Tailwind CSS를 사용해줘." 사용 가이드: [백엔드 URL]을 배포된 서버 주소로 … 더 읽기
GOFLEX Gemini CLI 바이브코딩 프롬프트 템플릿 프로젝트 루트(최상위 폴더)에서 gemini 명령을 실행한 후 아래 프롬프트를 사용한다. @파일경로 문법으로 파일을 명시적으로 주입(직접 지정)하면 AI의 정확도가 높아진다. Tip: –approval-mode=default 옵션을 사용하면 파일을 변경하기 전에 항상 확인을 요청한다. 처음 작업하는 기능에는 이 옵션을 사용하는 것을 권장한다. 1. 프로젝트 최초 세팅 GEMINI.md는 프로젝트 전체에 적용되는 AI 지침 파일이다. 한 … 더 읽기
1. Swiper란? Swiper(스와이퍼)는 터치 슬라이드/캐러셀(Carousel, 회전목마형 슬라이드)을 쉽게 만들어주는 라이브러리이다. 넷플릭스, 유튜브, 쿠팡 같은 서비스에서 콘텐츠를 좌우로 넘기는 UI가 바로 이것이다. 이번 편에서는 6편에서 만든 Section.jsx의 그리드 레이아웃을 Swiper 캐러셀로 업그레이드한다. 순서 만들 기능 핵심 개념 1단계 Swiper 기본 적용 Swiper, SwiperSlide, 모듈 import 2단계 반응형 설정 breakpoints 3단계 자동 재생 Autoplay 모듈 2. Swiper … 더 읽기
Tip: Gemini CLI로 구현하기 — 프로젝트 생성 & 패키지 설치 프롬프트: gemini "React 19 + Vite + Tailwind CSS 4 프로젝트를 생성해줘. 프로젝트 이름은 [프로젝트명]이야. react-router, axios, @fortawesome/react-fontawesome, @fortawesome/free-solid-svg-icons, swiper 패키지도 함께 설치해줘. .env 파일 예시와 vite.config.js도 작성해줘." 사용 가이드: 터미널을 열고 프로젝트를 생성할 폴더로 이동한다. [프로젝트명]을 원하는 이름으로 바꾼 뒤 실행한다. 1. GOFLIX 프로젝트 … 더 읽기
Tip: Gemini CLI로 구현하기 — 진입점 & 라우팅 설정 프롬프트: gemini "React 19 + Vite 프로젝트에서 main.jsx와 App.jsx를 작성해줘. main.jsx에는 BrowserRouter로 앱을 감싸고, App.jsx에는 Routes를 구성해줘. 페이지 컴포넌트는 Home, MovieDetail, Category, ErrorPage이고, 경로는 각각 /, /movie/:id, /category/:type, * 야. [파일 경로: src/]" 사용 가이드: [파일 경로]를 실제 src 폴더 경로로 바꾼다. 생성된 파일을 src/ 폴더에 … 더 읽기
Tip: Gemini CLI로 구현하기 — Axios 인스턴스 & API 연결 프롬프트: gemini "src/api/axios.js 파일을 작성해줘. axios.create()로 TMDB API 전용 인스턴스를 만들어야 해. baseURL은 https://api.themoviedb.org/3/, api_key는 import.meta.env.[API 키 환경변수명], language는 ko-KR, region은 KR로 설정해줘." 사용 가이드: .env 파일에 VITE_TMDB_API_KEY=본인의키를 저장한다. [API 키 환경변수명]을 VITE_TMDB_API_KEY로 바꾼다. 1. API란 무엇인가? API(Application Programming Interface, 에이피아이)는 프로그램끼리 데이터를 주고받는 약속된 … 더 읽기
Tip: Gemini CLI로 구현하기 — 공통 UI 컴포넌트 프롬프트: gemini "src/components/UI.jsx 파일을 작성해줘. Button(variant, className, children, …props), Spinner(message, full, className), Modal(onClose, children), Container(className, children) 4개의 공통 컴포넌트가 필요해. Tailwind CSS를 사용하고, Button의 variant별 스타일은 src/index.css에 @layer components로 정의해줘. [추가 요구사항]" 사용 가이드: [추가 요구사항]에 필요한 변형이 있으면 추가하고, 없으면 삭제한다. CSS 부분은 src/index.css에 붙여넣는다. 1. … 더 읽기
Tip: Gemini CLI로 구현하기 — App.jsx 레이아웃 & 데이터 로딩 프롬프트: gemini "src/App.jsx를 작성해줘. TMDB API에서 movie/now_playing, tv/airing_today, movie/top_rated 데이터를 Promise.all로 동시에 가져와야 해. useState로 3개의 상태를 관리하고, useEffect로 앱 시작 시 한 번만 호출해줘. 가져온 데이터는 Outlet의 context로 하위 페이지에 전달하고, Header와 Footer도 포함해줘. axios 인스턴스는 [axios 인스턴스 경로]에서 가져와줘." 사용 가이드: [axios 인스턴스 … 더 읽기
Tip: Gemini CLI로 구현하기 — Header & Footer 컴포넌트 프롬프트: gemini "src/components/Header.jsx와 Footer.jsx를 작성해줘. Header는 fixed로 상단에 고정되고, [로고명] 텍스트 클릭 시 홈(/)으로 이동해야 해. Container 컴포넌트(./UI에서 import)를 사용해서 내용을 가운데 정렬해줘. Footer는 하단에 로고와 저작권 문구를 표시해줘. Tailwind CSS를 사용해줘." 사용 가이드: [로고명]을 서비스 이름(예: GOFLEX)으로 바꾼다. 네비게이션 메뉴가 필요하면 프롬프트 마지막에 "헤더에 [메뉴 … 더 읽기