GOFLIX 프로젝트 소개와 개발환경 설정

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 프로젝트 … 더 읽기

React 진입점과 라우팅 설정

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/ 폴더에 … 더 읽기

Axios로 TMDB API 연결하기

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, 에이피아이)는 프로그램끼리 데이터를 주고받는 약속된 … 더 읽기