AI 코딩
완전 가이드

# Windows + X → "터미널(관리자)" 선택

# 1. Node.js LTS 설치 (npm 자동 포함)
winget install OpenJS.NodeJS.LTS

# 2. Python 3.12+ 설치
winget install Python.Python.3.12

# 3. Git 설치
winget install Git.Git

# 4. VS Code (선택)
winget install Microsoft.VisualStudioCode

# ── 설치 확인 (터미널을 닫았다가 다시 열고) ──
node --version    # v20.x 이상이면 OK
npm --version     # 10.x 이상이면 OK
python --version  # 3.12 이상이면 OK
git --version     # 출력되면 OK

# 방법 1: 글로벌 설치 (한번 설치하면 어디서든 gemini 명령 사용)
npm install -g @google/gemini-cli

# 방법 2: 설치 없이 즉시 실행 (일회성)
npx @google/gemini-cli

# 설치 확인
gemini --version

# 프로젝트 폴더로 이동
cd C:\Users\사용자명\projects\my-app

# Gemini CLI 대화형 모드 시작
gemini

# 자연어로 무엇이든 질문/요청
> 이 프로젝트의 폴더 구조와 주요 파일을 분석해줘
> src/App.tsx에 있는 버그를 찾아서 수정해줘
> FastAPI로 사용자 관리 API를 api/ 폴더에 만들어줘
> README.md를 한국어로 작성해줘

# 종료
> /quit

# 간단한 질문
gemini -p "Python에서 리스트를 딕셔너리로 변환하는 방법"

# 파일 참조하며 코드 리뷰 (@로 파일 지정)
gemini "이 코드의 성능을 개선해줘" @src/main.py

# 여러 파일 동시 분석
gemini "두 파일의 차이점을 설명해줘" @old.py @new.py

# CI/CD 스크립트용 JSON 출력
gemini -p "테스트 결과 분석" --output-format json

# 프로젝트: 인천 물류 허브 최적화 시뮬레이터

## 기술 스택
- 프론트엔드: React 18 + TypeScript + Recharts + Leaflet
- 백엔드: FastAPI + SQLite + gurobipy
- 빌드: Vite

## 프로젝트 구조
- /src    → React 프론트엔드
- /api    → FastAPI 백엔드
- /data   → SQLite DB 및 시드 데이터

## 코딩 컨벤션
- camelCase (TS), snake_case (Python)
- 함수형 컴포넌트 + React hooks
- API 응답: { status, data, message }
- 한국어 UI, 영문 코드

# Plan 모드 — 큰 기능 개발
React + FastAPI로 회원가입/로그인 기능을 만들어줘.
- JWT 토큰 인증, SQLite DB, bcrypt 해싱
- 프론트엔드 폼 검증과 에러 메시지 표시
- 로그인 후 대시보드로 리다이렉트

# Fast 모드 — 빠른 수정
헤더 배경색을 #1a1a28로 변경하고,
모바일에서 햄버거 메뉴가 나오도록 반응형 처리해줘.

# 브라우저 테스트 요청
로그인 페이지에서 잘못된 비밀번호 입력 시
에러 메시지가 정상 표시되는지 확인해줘.

React + TypeScript로 물류 대시보드를 만들어줘.

## 화면 구성
1. 상단: 4개 KPI 카드 (배송건수, 평균 배송시간, 성공률, 비용)
2. 중앙: 최근 7일 배송 추이 라인 차트 (Recharts)
3. 하단: 배송 목록 테이블 (10행, 상태 뱃지)

## 디자인
- 다크 테마 (배경: #0f172a), 블루 악센트 (#3b82f6)
- 카드: border-radius 12px, 미세한 글로우
- 샘플 데이터 하드코딩 포함
- 하나의 파일로 출력

FastAPI + SQLite로 상품 관리 REST API를 만들어줘.

- 상품 CRUD, Pydantic 모델, CORS 설정
- 페이지네이션 (?page=1&size=20)
- 검색 기능 (?search=키워드)
- 에러 핸들링 (404, 422)
- requirements.txt, 실행 명령어 포함

이 스크린샷과 동일한 UI를 React + Tailwind CSS로 구현해줘.
레이아웃, 색상, 여백을 최대한 비슷하게. 반응형. 샘플 데이터 포함.

아래 디자인 시스템을 적용해 대시보드를 만들어줘.

## Color
Background: #F2F4F6 / Card: #FFFFFF / Primary: #3182F6
Text: #191F28 / Text-Secondary: #8B95A1

## Typography
Font: 'Pretendard', sans-serif
Sizes: 13/15/17/22/28/34px / Weight: 400/600/700

## Spacing (8px grid)
xs:8 / sm:16 / md:24 / lg:32 / xl:48px

## Components
Card: radius 16px, shadow 0 2px 8px rgba(0,0,0,0.04)
Button: radius 12px, padding 12px 24px
아이콘: lucide-react, 20px

:root {
  --color-primary: #3182F6;
  --color-bg: #F2F4F6;
  --color-card: #FFFFFF;
  --color-text: #191F28;
  --radius: 16px;
  --shadow: 0 2px 8px rgba(0,0,0,0.04);
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
}

/* 다크 테마 전환 — 변수만 바꾸면 됨 */
[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-card: #1e293b;
  --color-text: #e2e8f0;
}

cd my-react-app
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/내아이디/my-react-app.git
git push -u origin main

FROM python:3.12-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 8080
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8080"]

gcloud init
gcloud config set project MY_PROJECT_ID

# 소스에서 직접 배포 (Docker 빌드 자동)
gcloud run deploy my-api ^
  --source . ^
  --region asia-northeast3 ^
  --allow-unauthenticated

# 결과: https://my-api-abc123-du.a.run.app

VITE_API_URL=https://my-api-abc123-du.a.run.app

const API = import.meta.env.VITE_API_URL;
const res = await fetch(`${API}/api/items`);

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "http://localhost:5173",
        "https://my-app.vercel.app",
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)