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)으로 바꾼다. 네비게이션 메뉴가 필요하면 프롬프트 마지막에 "헤더에 [메뉴 … 더 읽기
Tip: Gemini CLI로 구현하기 — Home 메인 페이지 프롬프트: gemini "src/components/Home.jsx를 작성해줘. useOutletContext로 now, popular, topRated, loading 데이터를 받아야 해. 상단에는 배경 영상([영상 파일명])과 인기영화 첫 번째 항목을 히어로로 표시하고, 하단에는 현재 상영작/인기 영화/최고 평점 3개의 Section 컴포넌트를 보여줘. 로딩 중에는 Spinner를 표시해줘." 사용 가이드: [영상 파일명]을 public 폴더에 넣은 동영상 파일 이름으로 바꾼다(예: video.mp4). … 더 읽기
Tip: Gemini CLI로 구현하기 — Section & Card 컴포넌트 프롬프트: gemini "src/components/Section.jsx와 Card.jsx를 작성해줘. Section은 title, items, category props를 받아서 제목, 더보기 링크(/category/[category]), [열 수]열 그리드 카드 목록을 렌더링해줘. Card는 item prop을 받아서 TMDB 포스터 이미지(https://image.tmdb.org/t/p/w500/), 호버 시 줄거리+평점 오버레이, 하단에 제목+평점+개봉일을 표시해줘. Tailwind CSS group-hover를 활용해줘." 사용 가이드: [열 수]를 원하는 그리드 열 개수(기본: … 더 읽기
Tip: Gemini CLI로 구현하기 — 영화 상세 페이지 프롬프트: gemini "src/components/MovieDetail.jsx를 작성해줘. useParams로 영화 ID를 받아서 TMDB API movie/[id]?append_to_response=videos로 상세정보와 예고편을 한 번에 가져와야 해. 포스터, 원제, 개봉일, 러닝타임, 장르 배지, 줄거리를 표시하고, YouTube Trailer가 있으면 Modal 팝업으로 재생해줘. useNavigate로 뒤로가기 버튼도 만들어줘. axios 인스턴스는 [axios 경로]에서 가져와줘." 사용 가이드: [axios 경로]를 ../api/axios로 바꾼다. 예고편 … 더 읽기
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 프로젝트 … 더 읽기