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 지침 파일이다. 한 번만 … 더 읽기
