Choorai
| 문서

60분 완주 챌린지

Step 2/6

17%
사전 준비
2
프론트엔드
3
백엔드
4
연결
5
배포
6
완료
15분
React

프론트엔드: React + Vite

React와 Vite를 사용해 프론트엔드를 만듭니다. AI의 도움을 받아 복잡한 코드도 쉽게 생성할 수 있어요.

TL;DR (3줄 요약)

  • npm create vite@latest로 프로젝트 생성
  • Tailwind CSS 설치로 스타일링 준비
  • AI에게 "프로젝트 목록 UI 만들어줘" 요청

1 프로젝트 생성

터미널을 열고 원하는 폴더로 이동한 뒤, 아래 명령어를 실행하세요.

터미널
# 프로젝트 생성
npm create vite@latest my-admin -- --template react-ts

# 폴더로 이동
cd my-admin

# 의존성 설치
npm install

옵션 설명

  • my-admin: 프로젝트 이름 (원하는 이름으로 변경 가능)
  • react-ts: React + TypeScript 템플릿

2 Tailwind CSS 설치

Tailwind CSS를 설치하면 클래스만으로 예쁜 UI를 만들 수 있습니다.

터미널
# Tailwind 설치
npm install -D tailwindcss postcss autoprefixer

# 설정 파일 생성
npx tailwindcss init -p

tailwind.config.js 파일을 열고 아래처럼 수정하세요:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/index.css를 열고 맨 위에 추가하세요:

src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

3 개발 서버 실행

터미널
npm run dev

브라우저에서 http://localhost:5173을 열면 Vite 기본 페이지가 보입니다.

성공!

Vite 로고가 보이면 프론트엔드 기본 설정이 완료된 것입니다.

4 AI로 UI 만들기

이제 AI에게 프로젝트 관리 UI를 만들어달라고 요청합니다. 아래 프롬프트를 복사해서 Antigravity 또는 ChatGPT에 붙여넣으세요.

AI 프롬프트

작업 필요

"React + TypeScript + Tailwind로 프로젝트 관리 앱을 만들어줘. 요구사항: 1. src/App.tsx에 메인 레이아웃 (헤더 + 콘텐츠) 2. 프로젝트 목록을 보여주는 카드 UI 3. 새 프로젝트 생성 폼 (이름, 설명 입력) 4. 프로젝트 삭제 버튼 5. 지금은 로컬 state로 데이터 관리 (나중에 API 연결할 거야) 스타일: - 다크 모드 배경 (bg-gray-900) - 카드는 bg-gray-800에 hover 효과 - 파란색 계열 액센트 (blue-500) 파일 구조: - src/App.tsx - src/components/ProjectCard.tsx - src/components/ProjectForm.tsx - src/types/index.ts"

위 프롬프트를 AI에게 전달하세요. Antigravity를 사용한다면 Cmd+L로 에이전트 패널을 열 수 있습니다.

AI 응답 활용 팁

  • AI가 생성한 코드를 그대로 파일에 붙여넣기
  • 에러가 나면 에러 메시지를 AI에게 보여주기
  • "이 에러 어떻게 해결해?" 라고 물어보기

5 예상 결과물

AI가 만들어준 코드를 적용하면 이런 화면이 나옵니다:

프로젝트 관리

새 프로젝트

프로젝트 이름
설명
생성

내 첫 프로젝트

AI로 만든 웹서비스

두 번째 프로젝트

완성된 예제 코드는 GitHub 저장소 에서 확인할 수 있습니다.

React 프론트엔드 완료 체크리스트

0/4 완료