1. 시작하기 전에 완성코드 완성화면 1.1. 이 교안으로 만들 것 피그마 디자인을 보고 포트폴리오 웹사이트를 React로 직접 만들어봅니다. ┌──────────────────────────────────────────────┐ │ [로고] Home AboutMe Projects │ ← 네비게이션 ├──────────────────────────────────────────────┤ │ │ │ Title │ ← 히어로 │ Subtitle │ │ [Github] [Resume] │ │ │ ├──────────────────────────────────────────────┤ │ ABOUT ME │ ← 소개 │ 학력 / 자격사항 … 더 읽기
gemini "React 19 + Vite 프로젝트에서 main.jsx와 App.jsx를 작성해줘. main.jsx에는 createBrowserRouter와 RouterProvider로 라우터를 구성하고, App.jsx에는 Outlet을 구성해줘. 페이지 컴포넌트는 Home, MovieDetail, Category, ErrorPage이고, 경로는 각각 /, /movie/:id, /category/:type, * 야. [파일 경로: src/]" [파일 경로]를 실제 src 폴더 경로로 바꾼다. 생성된 파일을 src/ 폴더에 저장한다. 1. React 앱은 어디서 시작될까? 브라우저가 웹사이트를 열면, 가장 먼저 … 더 읽기
gemini "src/api/axios.js 파일을 작성해줘. axios.create()로 TMDB API 전용 인스턴스를 만들어야 해. baseURL은 https://api.themoviedb.org/3/, api_key는 import.meta.env.[API 키 환경변수명], language는 ko-KR, region은 KR로 설정해줘." .env 파일에 VITE_TMDB_API_KEY=본인의키를 저장한다. [API 키 환경변수명]을 VITE_TMDB_API_KEY로 바꾼다. 1. API란 무엇인가? API(Application Programming Interface, 에이피아이)는 프로그램끼리 데이터를 주고받는 약속된 통로이다. 레스토랑에 비유하면 이렇다. 손님(우리 앱)이 웨이터(API)에게 주문서(요청)를 전달하면, 주방(서버)이 음식(데이터)을 만들어서 웨이터가 … 더 읽기
gemini "src/components/UI.jsx 파일을 작성해줘. Button(variant, className, children, …props), Spinner(message, full, className), Modal(onClose, children), Container(className, children) 4개의 공통 컴포넌트가 필요해. Tailwind CSS를 사용하고, Button의 variant별 스타일은 src/index.css에 @layer components로 정의해줘. [추가 요구사항]" [추가 요구사항]에 필요한 변형이 있으면 추가하고, 없으면 삭제한다. CSS 부분은 src/index.css에 붙여넣는다. 1. 왜 공통 UI 컴포넌트를 먼저 만들까? 이 프로젝트에서는 버튼, 로딩 표시, … 더 읽기
gemini "src/App.jsx를 작성해줘. TMDB API에서 movie/now_playing, tv/airing_today, movie/top_rated 데이터를 Promise.all로 동시에 가져와야 해. useState로 3개의 상태를 관리하고, useEffect로 앱 시작 시 한 번만 호출해줘. 가져온 데이터는 Outlet의 context로 하위 페이지에 전달하고, Header와 Footer도 포함해줘. axios 인스턴스는 [axios 인스턴스 경로]에서 가져와줘." [axios 인스턴스 경로]를 ./api/axios로 바꾼다. API 엔드포인트가 다르면 tv/airing_today 부분을 수정한다. 1. App.jsx의 역할 App.jsx는 … 더 읽기
1. 클로드 Docs 1.1. 클로드 모델 비교 1.1.1. 주요 모델 모델 특징 속도 용도 Claude Sonnet 5 최신 모델 빠름 코딩, 분석 Claude Opus 4.8 가장 강력 느림 복잡한 작업 Claude Fable 5 최상위 성능 보통 고난도 창작·추론 Claude Haiku 4.5 가벼움 매우 빠름 간단한 작업 1.1.2. 선택 가이드 코딩: Claude Sonnet 5 복잡한 분석: … 더 읽기
바이브코딩(Vibe Coding)은 자연어로 요구사항을 설명하고 AI 코딩 에이전트가 코드를 생성·수정·실행·검증하도록 협업하는 개발 방식이다. 개발자는 목표와 제약 조건을 명확히 전달하고, 생성된 결과를 확인하면서 반복 수정한다. AI가 코드를 생성하더라도 요구사항 누락, 잘못된 라이브러리 선택, 접근성 문제, 보안 문제가 생길 수 있으므로 최종 검토는 개발자가 수행한다. 1.1. 좋은 프롬프트의 구성 바이브코딩용 프롬프트에는 다음 항목을 포함한다. 구체적인 실습용 프롬프트는 … 더 읽기
1. Figma MCP 가이드 Figma MCP(Model Context Protocol)를 활용하면 피그마 디자인 파일을 AI가 직접 분석하여 HTML/CSS 코드로 변환할 수 있다. 공식문서 프롬프트안내 1.1. GeminiCli 로 연결하기 1.1.1. Gemini CLI 실행 gemini 1.1.2. 익스텐션 설치 명령 실행 터미널에서 Gemini CLI 세션을 종료한 상태에서 아래 명령을 실행한다. gemini extensions install https://github.com/figma/figma-gemini-cli-extension 코드 설명 gemini extensions install Gemini … 더 읽기
Tailwind CSS 보통 웹사이트를 꾸밀 때는 별도의 CSS 파일에 코드를 길게 작성해야 한다. 하지만 Tailwind는 “이미 만들어진 태그(Class)”를 HTML에 바로 붙여서 디자인하는 방식이다. 테일윈드 공식 테일윈드 치트시트 공식테일윈드 피그마 스타일파일 테일윈드 디자인토큰 생성기 피그마 플러그인 1. Basics — 설치 NPM 설치 (Vite 기준) 터미널에 아래 명령어 입력 npm install tailwindcss @tailwindcss/vite vite.config.js 파일에 아래 코드 … 더 읽기
