🐨CoalaCoding
DocsExamplesTry itBoardB반B반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • GOFLIX 프로젝트 소개와 개발환경 설정
  • React 진입점과 라우팅 설정
  • Axios로 TMDB API 연결하기
  • 공통 UI 컴포넌트 만들기 (UI.jsx)
  • App.jsx — 레이아웃 구성과 데이터 가져오기
  • Header와 Footer 만들기
  • Home.jsx — 메인 페이지 완성하기
  • Section과 Card — 영화 카드 목록 만들기
  • MovieDetail — 영화 상세 페이지 만들기
  • Category, ErrorPage 완성하기
  • AI 챗봇 연동하기
  • Swiper_캐러셀_적용과_프로젝트_마무리
  • GOFLEX Gemini CLI 바이브코딩 프롬프트 템플릿
  • 무비앱-완료본
  1. 홈
  2. 문서
  3. React
  4. 프로젝트: 영화앱

프로젝트: 영화앱

제목설명
GOFLIX 프로젝트 소개와 개발환경 설정React + Vite + Tailwind CSS로 영화 웹앱 만들기 - 환경 구축편
React 진입점과 라우팅 설정main.jsx에서 앱을 시작하고 React Router로 페이지를 나누는 방법
Axios로 TMDB API 연결하기axios.js 설정 파일을 작성하고 영화 데이터를 가져오는 기반을 만든다
공통 UI 컴포넌트 만들기 (UI.jsx)Button, Spinner, Modal, Container — 프로젝트 전체에서 재사용할 공통 컴포넌트를 만든다
App.jsx — 레이아웃 구성과 데이터 가져오기헤더, 푸터, 데이터 로딩, Outlet을 활용한 전체 레이아웃을 만든다
Header와 Footer 만들기고정 헤더와 푸터를 구현한다
Home.jsx — 메인 페이지 완성하기히어로 영상, 인기영화 하이라이트, 영화 목록 섹션으로 메인 화면을 만든다
Section과 Card — 영화 카드 목록 만들기더보기 링크가 있는 섹션, 호버 오버레이 카드 컴포넌트를 만든다
MovieDetail — 영화 상세 페이지 만들기예고편 팝업, 장르 태그, 뒤로가기를 포함한 영화 상세 페이지를 구현한다
Category, ErrorPage 완성하기카테고리 페이지네이션, 에러 페이지를 완성하고 프로젝트를 점검한다
AI 챗봇 연동하기플로팅 버튼과 채팅 팝업을 하나의 컴포넌트로 만들고, 백엔드 서버와 메시지를 주고받는다
Swiper_캐러셀_적용과_프로젝트_마무리Swiper 라이브러리로 터치 슬라이드를 추가하고, 프로젝트를 최종 점검한다
GOFLEX Gemini CLI 바이브코딩 프롬프트 템플릿GOFLEX 영화 앱을 Gemini CLI로 개선할 때 사용하는 프롬프트 모음이다.
무비앱-완료본