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. 이번 편에서 만들 … 더 읽기
1. 이벤트 처리 사용자의 행동(클릭, 입력, 마우스 이동 등)에 반응하는 인터랙티브한 웹사이트를 만들기 위해 React의 이벤트 시스템을 깊이 있게 학습한다. 1.1. React 이벤트 시스템 이해하기 1.1.1. 이벤트란? 이벤트(Event)는 사용자가 웹페이지에서 취하는 행동을 의미한다. 버튼 클릭, 키보드 입력, 마우스 이동 등 모든 상호작용이 이벤트다. • → 초인종이 울린다(반응) • → TV 채널이 바뀐다(반응) • → 무언가 … 더 읽기
gemini "src/components/Chatbot.jsx를 작성해줘. 화면 우하단에 고정된 플로팅 버튼을 클릭하면 채팅창이 열리는 컴포넌트야. useState로 열림/닫힘, 메시지 목록, 입력값, 로딩 상태를 관리하고, useRef로 새 메시지가 오면 자동 스크롤해줘. 메시지 전송 시 [백엔드 URL]/chat 엔드포인트에 fetch로 POST 요청을 보내줘. Tailwind CSS를 사용해줘." [백엔드 URL]을 배포된 서버 주소로 바꾼다(예: https://my-api.onrender.com). 로컬 테스트 시에는 http://localhost:8000으로 바꾼다. 1. 챗봇 연동 개요 … 더 읽기
1. useContext로 전역 상태 관리 1.1. Context가 필요한 이유 리액트에서 데이터는 보통 부모 → 자식 방향으로 Props를 통해 전달한다. 그런데 컴포넌트가 깊게 중첩되어 있으면, 중간에 있는 컴포넌트들이 직접 쓰지도 않는 데이터를 계속 받아서 아래로 넘겨줘야 한다. 이 문제를 Prop Drilling(프롭 드릴링) 이라고 한다. Context를 사용하면 중간 컴포넌트를 거치지 않고, 필요한 컴포넌트가 직접 데이터를 꺼내 쓸 … 더 읽기
GOFLEX Gemini CLI 바이브코딩 프롬프트 템플릿 프로젝트 루트(최상위 폴더)에서 gemini 명령을 실행한 후 아래 프롬프트를 사용한다. @파일경로 문법으로 파일을 명시적으로 주입(직접 지정)하면 AI의 정확도가 높아진다. –approval-mode=default 옵션을 사용하면 파일을 변경하기 전에 항상 확인을 요청한다. 처음 작업하는 기능에는 이 옵션을 사용하는 것을 권장한다. 1. 프로젝트 최초 세팅 GEMINI.md는 프로젝트 전체에 적용되는 AI 지침 파일이다. 한 번만 … 더 읽기
1. Inline Style — 태그 안에 직접 쓰기 1.1 개념 HTML에서 style=”color:red” 처럼 태그 안에 스타일을 직접 쓰는 방식이다. 리액트에서는 문자열이 아닌 객체 형태로 작성한다. 왜 객체로 써야 하나요? 리액트는 JavaScript를 기반으로 동작한다. JSX 안에서 스타일을 표현할 때는 JS 문법을 따르기 때문에, background-color 처럼 하이픈(-)이 들어간 속성은 backgroundColor 처럼 카멜케이스 로 바꿔서 써야 한다. 1.2 … 더 읽기
1. Props (속성) 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법. 1.1. Props의 개념 Props는 Properties(속성)의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 방법이다. None: 컴포넌트를 함수라고 생각하면, Props는 그 함수에 전달하는 매개변수(파라미터)다. // 일반 자바스크립트 함수 function greet(name) { // name은 매개변수 return `안녕, ${name}!`; } greet(“철수”); // “철수”는 인자 // React 컴포넌트 … 더 읽기
