1. React 소스 코드 수정, 배포 및 렌더링 React 앱이 어떻게 화면에 그려지는지 이해하고, 코드를 직접 수정하며 배포까지 경험한다. 1.1. App 컴포넌트 렌더링 과정 React 앱이 브라우저에 표시되기까지의 흐름을 정확히 이해해야 한다. 흐름은 index.html에서 시작된다. 1.1.1. 1단계: index.html 진입 브라우저는 가장 먼저 index.html을 읽는다. 이 파일에는 <div id="root"></div>라는 텅 빈 공간이 있다. 1.1.2. 2단계: main.jsx … 더 읽기
Tip: Gemini CLI로 구현하기 — Header & Footer 컴포넌트 프롬프트: gemini "src/components/Header.jsx와 Footer.jsx를 작성해줘. Header는 fixed로 상단에 고정되고, [로고명] 텍스트 클릭 시 홈(/)으로 이동해야 해. Container 컴포넌트(./UI에서 import)를 사용해서 내용을 가운데 정렬해줘. Footer는 하단에 로고와 저작권 문구를 표시해줘. Tailwind CSS를 사용해줘." 사용 가이드: [로고명]을 서비스 이름(예: GOFLEX)으로 바꾼다. 네비게이션 메뉴가 필요하면 프롬프트 마지막에 "헤더에 [메뉴 … 더 읽기
1. JSX 문법과 컴포넌트 React의 핵심인 컴포넌트를 만드는 법과, 이를 위해 사용하는 JSX 문법을 완벽히 익힌다. 1.1. 컴포넌트와 JSX의 관계 1.1.1. 컴포넌트란? 컴포넌트(Component)는 React에서 UI를 만드는 기본 단위다. 레고 블록처럼 작은 부품들을 조립해서 전체 화면을 만든다고 생각하면 된다. 자바스크립트 함수: React 컴포넌트는 그냥 자바스크립트 함수다 UI 반환: 이 함수는 화면에 그릴 내용을 반환한다 재사용 가능: … 더 읽기
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로 바꾼다. 예고편 … 더 읽기
1. useContext로 전역 상태 관리 1.1. Context가 필요한 이유 리액트에서 데이터는 보통 부모 → 자식 방향으로 Props를 통해 전달한다. 그런데 컴포넌트가 깊게 중첩되어 있으면, 중간에 있는 컴포넌트들이 직접 쓰지도 않는 데이터를 계속 받아서 아래로 넘겨줘야 한다. 이 문제를 Prop Drilling(프롭 드릴링) 이라고 한다. Context를 사용하면 중간 컴포넌트를 거치지 않고, 필요한 컴포넌트가 직접 데이터를 꺼내 쓸 … 더 읽기
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)로 바꾼다. 카테고리 한글 이름이 필요하면 프롬프트에 … 더 읽기