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