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를 활용해줘." [열 수]를 원하는 그리드 열 개수(기본: 4)로 바꾼다. 카드에 기능을 추가하려면 프롬프트 끝에 요구사항을 덧붙인다. 1. 이번 편에서 … 더 읽기
React(리액트) 학습 전 필수 JavaScript(자바스크립트) 문법 1. 변수 선언 var 대신 let과 const를 사용합니다. React에서는 주로 const를 사용합니다. // let: 재할당 가능한 변수 let age = 20; age = 21; // 값 변경 가능 console.log(age); // 21 출력 // const: 재할당 불가능한 상수 const name = '철수'; // name = '영희'; // 오류 발생! const는 … 더 읽기
gemini "src/components/MovieDetail.jsx를 작성해줘. useParams로 영화 ID를 받아서 TMDB API movie/[id]?append_to_response=videos로 상세정보와 예고편을 한 번에 가져와야 해. 포스터, 원제, 개봉일, 러닝타임, 장르 배지, 줄거리를 표시하고, YouTube Trailer가 있으면 Modal 팝업으로 재생해줘. useNavigate로 뒤로가기 버튼도 만들어줘. axios 인스턴스는 [axios 경로]에서 가져와줘." [axios 경로]를 ../api/axios로 바꾼다. 예고편 자동 재생을 원하지 않으면 프롬프트에 "autoplay 없이"를 추가한다. 1. 상세 페이지의 … 더 읽기
1. JSX 문법과 컴포넌트 React의 핵심인 컴포넌트를 만드는 법과, 이를 위해 사용하는 JSX 문법을 완벽히 익힌다. 1.1. 컴포넌트와 JSX의 관계 1.1.1. 컴포넌트란? 컴포넌트(Component)는 React에서 UI를 만드는 기본 단위다. 레고 블록처럼 작은 부품들을 조립해서 전체 화면을 만든다고 생각하면 된다. 자바스크립트 함수: React 컴포넌트는 그냥 자바스크립트 함수다 UI 반환: 이 함수는 화면에 그릴 내용을 반환한다 재사용 가능: … 더 읽기
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)로 바꾼다. 카테고리 한글 이름이 필요하면 프롬프트에 "카테고리 키를 한글로 변환하는 매핑 객체도 추가해줘"를 덧붙인다. 1. 이번 편에서 만들 … 더 읽기
