■ 기본
이전 다운로드 : https://naver.me/5u9fTi37
바이브 수업자료 페이지 : http://211.189.207.75:3020/setup
○ 필요 준비물
claude 회원 가입 pro 이상
Claude Pro - 월 $20 (연간 결제 시 $17/월)
무료 대비 5배 더 많은 사용량
5시간마다 최소 45개 메시지
최신 모델 우선 접근
빠른 응답 속도
Claude Max
Expanded Usage (5배) - 월 $100
Pro 대비 5배 사용량
5시간당 최소 225개 메시지
Maximum Flexibility (20배) - 월 $200
Pro 대비 20배 사용량
5시간당 최소 900개 메시지
최신 기능 우선 접근
Visual Studio code 설치 : 페이지
Git 설치 : 페이지
winget install Git.Git
Node Js 설치 : 페이지
winget install OpenJS.Node.JS
설치 확인
git -v
node -v
npm -vnpm(Node Package Manager)
Node.js에서 사용하는 패키지(라이브러리) 관리 도구
비주얼 스튜디오 코드 실행시
관리자 모드로 실행해야 함
비주얼 스튜디오 코드 실행정책 변경
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
클로드 CLI(Command Line Interface) 설치
개발 도구를 전역(global)으로 설치하는 명령
npm install -g @anthropic-ai/claude-code
클로드 실행
claude -v
claude
클로드 관련 화면 모드 설정후
클로드 로그인
비주얼 스튜디오 코드에서
폴더 링크 후 트러스트 한다음 터미널 실행
claude
폴더를 trust 하는지 물어봄 Yes
/exit
종료후
클로드를 다시 실행 아래처럼 작성하면
claude --dangerously-skip-permissions
명령수행
### 🎯 Claude Code 완전 자동 세팅 (권한설정 + React환경 + CLAUDE.md시스템)
다음 작업을 **정확한 순서대로** 모두 자동으로 진행해주세요. 각 단계가 완료되면 "✅ [단계명] 완료"라고 알려주세요.
---
## 🔧 1단계: Claude 권한 설정 최적화
### 1-1. 현재 디렉토리에 .claude 폴더 확인 및 생성
- `.claude` 디렉토리가 없으면 생성
- 이미 있으면 다음 단계 진행
### 1-2. 권한 설정 파일 생성
`.claude/settings.local.json` 파일을 다음 내용으로 생성하거나 수정:
```json
{
"permissions": {
"allow": [
"*"
],
"deny": []
},
"BASH_DEFAULT_TIMEOUT_MS": "600000",
"BASH_MAX_TIMEOUT_MS": "600000"
}
```
### 1-3. 전역 설정 파일에도 타임아웃 설정 적용
`C:\Users\[사용자명]\.claude\settings.json` 파일을 열어서 다음 내용을 추가:
```json
{
"env": {
"BASH_DEFAULT_TIMEOUT_MS": "600000",
"BASH_MAX_TIMEOUT_MS": "600000"
}
}
```
※ 기존 설정이 있다면 env 섹션에 위 두 줄만 추가
※ [사용자명]은 현재 Windows 사용자 이름으로 변경
### 1-4. 권한 설정 완료 확인
- 로컬 및 전역 JSON 형식이 올바른지 확인
- 권한 설정 및 CLI 타임아웃 설정(10분) 적용 확인
- 파일 생성 완료 메시지 출력
---
## 🚀 2단계: React 개발환경 완전 구축
### 2-1. 프로젝트 디렉토리 구조 생성
```bash
# 루트 디렉토리에 lecture1 생성
mkdir lecture1
cd lecture1
```
### 2-2. Vite React 프로젝트 생성
```bash
# my-react-app 프로젝트 생성 (y 자동 응답)
echo 'y' | npm create vite@latest my-react-app -- --template react
# 생성 완료 확인
ls -la | grep my-react-app
```
### 2-3. 프로젝트 디렉토리 이동 및 기본 의존성 설치
```bash
cd my-react-app
npm install
```
### 2-4. 필수 패키지 설치 (MUI 완전 생태계)
다음 패키지들을 **정확한 순서로** 설치:
```bash
# React Router 설치
npm install react-router-dom@latest
# Material-UI 핵심 패키지
npm install @mui/material @emotion/react @emotion/styled
# Material-UI 아이콘 패키지
npm install @mui/icons-material
# Roboto 폰트 패키지
npm install @fontsource/roboto
# Vite React 플러그인 업데이트
npm install --save-dev @vitejs/plugin-react@latest
```
### 2-5. 개발 서버 테스트 및 자동 종료
```bash
# 10초 타임아웃으로 개발 서버 테스트
timeout 10 npm run dev
# 서버 로그에서 "Local: http://localhost:xxxx/" 확인
# 포트 충돌 시 vite.config.js에서 다른 포트 설정
# 개발 서버 프로세스 정리 (중요: Claude Code는 건드리지 않음)
# 개발 서버 확인: netstat -ano | findstr LISTENING | findstr 517
# 개발 서버만 종료: cmd //c "taskkill /PID [개발서버PID] /F"
# 종료 확인: tasklist | findstr node.exe
```
### 2-6. 설치된 패키지 버전 확인
```bash
npm ls
npm outdated
```
---
## 📁 3단계: 문서 시스템 다운로드 및 구조 생성
### 3-1. docs 디렉토리 생성
```bash
# lecture1 디렉토리에 docs 폴더 생성
cd ../ # my-react-app에서 lecture1로 이동
mkdir docs
```
### 3-2. 필수 문서 파일 다운로드
다음 URL에서 문서 파일들을 `lecture1/docs/`에 다운로드:
```bash
# 각 파일을 정확한 경로에 다운로드
curl -o docs/design-system.md http://211.189.207.75:3020/docs/design-system.md
curl -o docs/code-convention.md http://211.189.207.75:3020/docs/code-convention.md
curl -o docs/new_project.md http://211.189.207.75:3020/docs/new_project.md
```
### 3-3. 다운로드 완료 확인
```bash
# 파일 존재 및 크기 확인
ls -la docs/
wc -l docs/*.md
```
---
## 📝 4단계: CLAUDE.md 시스템 구축
### 4-1. 루트 디렉토리 CLAUDE.md 생성
**프로젝트 최상위 루트**에 다음 내용으로 CLAUDE.md 생성:
```markdown
# 기본 응답 설정
## 언어 설정
- 모든 답변은 한국어로 작성
- 정중하고 친근한 말투 사용
- 기술적 내용을 쉽게 설명
## 개발 원칙
- 코드 품질과 가독성 우선
- 사용자 요청사항에 정확히 응답
- 단계별 상세한 설명 제공
```
### 4-2. lecture1 디렉토리 CLAUDE.md 다운로드 및 저장
```bash
# lecture1 디렉토리에서 CLAUDE.md 파일 다운로드
curl -o CLAUDE.md http://211.189.207.75:3020/docs/CLAUDE.md
```
### 4-3. @ 연결자 문서 임포트 확인
- `@docs/design-system.md` 연결 확인
- `@docs/code-convention.md` 연결 확인
- `@docs/new_project.md` 연결 확인
- 각 문서의 내용이 정상적으로 로드되는지 확인
---
## 🎨 5단계: MUI 테마프로바이더 적용 (수업 1-3)
### 5-1. my-react-app 디렉토리로 이동
```bash
cd my-react-app
```
### 5-2. src/theme.js 파일 생성
다음 내용으로 MUI 테마 설정 파일을 생성:
```javascript
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
secondary: {
main: '#dc004e',
},
},
typography: {
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
h1: {
fontSize: '2.125rem',
fontWeight: 500,
},
},
spacing: 8,
});
export default theme;
```
### 5-3. src/main.jsx 파일 수정
ThemeProvider와 CssBaseline을 적용하여 다음과 같이 수정:
```javascript
import React from 'react'
import ReactDOM from 'react-dom/client'
import { ThemeProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'
import App from './App.jsx'
import theme from './theme.js'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
</React.StrictMode>,
)
```
### 5-4. 테마 적용 확인을 위한 개발 서버 테스트
```bash
# 10초 타임아웃으로 테마 적용 테스트
timeout 10 npm run dev
# 서버 로그에서 "Local: http://localhost:xxxx/" 확인
# CssBaseline이 적용된 깔끔한 페이지 확인
# 개발 서버 프로세스 정리 (중요: Claude Code는 건드리지 않음)
# 개발 서버 확인: netstat -ano | findstr LISTENING | findstr 517
# 개발 서버만 종료: cmd //c "taskkill /PID [개발서버PID] /F"
# 종료 확인: tasklist | findstr node.exe
```
### 5-5. 템플릿 디렉토리 생성 (향후 빠른 프로젝트 생성용)
```bash
# 완성된 my-react-app을 템플릿 이름으로 변경
cd ../ # lecture1 디렉토리로 이동
mv my-react-app _template_settings
# 템플릿 디렉토리 생성 완료 확인
ls -la | grep _template_settings
```
### 5-6. 테마 적용 결과 확인
- src/theme.js 파일 내용이 정상적으로 생성되었는지 확인
- main.jsx 파일에 ThemeProvider와 CssBaseline이 적용되었는지 확인
- 개발 서버 실행 시 콘솔 오류가 없는지 확인
- CssBaseline으로 브라우저 기본 스타일이 초기화되었는지 확인
---
## ✅ 6단계: 최종 확인 및 완료
### 6-1. 프로젝트 구조 확인
최종 디렉토리 구조가 다음과 같은지 확인:
```
프로젝트 루트/
├── CLAUDE.md (기본 한국어 설정)
└── lecture1/
├── CLAUDE.md (로키 역할, @ 연결자)
├── docs/
│ ├── design-system.md
│ ├── code-convention.md
│ └── new_project.md
└── _template_settings/ (완성된 템플릿)
├── package.json (MUI 포함)
├── vite.config.js
├── src/
│ ├── theme.js (새로 생성)
│ ├── main.jsx (ThemeProvider 적용)
│ └── App.jsx
└── node_modules/
```
### 6-2. 설치된 패키지 최종 확인
`_template_settings/package.json`에서 다음 패키지들이 설치되었는지 확인:
- react
- react-dom
- react-router-dom
- @mui/material
- @emotion/react
- @emotion/styled
- @mui/icons-material
- @fontsource/roboto
### 6-3. CLAUDE.md 연결 테스트 및 테마 적용 확인
lecture1 디렉토리에서 다음을 확인:
- 디자인 시스템 문서 인식 여부
- 코드 컨벤션 문서 인식 여부
- 프로젝트 준비 시스템 문서 인식 여부
- theme.js 파일이 정상적으로 생성되었는지 확인
- main.jsx에 ThemeProvider와 CssBaseline이 적용되었는지 확인
- my-react-app이 _template_settings로 이름이 변경되었는지 확인
---
## 🎉 완료 확인 메시지
모든 작업이 완료되면 다음과 같이 응답해주세요:
```
🎉 Claude Code 완전 자동 세팅 + 첫 3개 수업 완료!
✅ 권한 설정: .claude/settings.local.json 생성 완료
✅ React 환경: my-react-app 프로젝트 + MUI 완전 설치 완료
✅ 문서 시스템: 3개 문서 다운로드 및 @ 연결자 설정 완료
✅ CLAUDE.md: 루트 + lecture1 이중 구조 완료
✅ MUI 테마: theme.js + ThemeProvider + CssBaseline 적용 완료
✅ 템플릿 디렉토리: my-react-app을 _template_settings로 이름 변경하여 향후 빠른 프로젝트 생성 가능
수업 1-1 (React 환경구축) ✅
수업 1-2 (CLAUDE.md 시스템) ✅
수업 1-3 (MUI 테마프로바이더) ✅
개발준비완료 🚀
```
### ⚠️ 중요 주의사항
1. **프로세스 관리**: 개발 서버 종료 시 Claude Code는 절대 건드리지 않기
2. **파일 권한**: Windows 환경에서 권한 문제 발생 시 관리자 권한으로 실행
3. **포트 충돌**: 개발 서버 포트 충돌 시 vite.config.js에서 다른 포트 설정
4. **패키지 버전**: MUI는 최신 버전 사용, 호환성 문제 시 알려주기
5. **경로 확인**: 모든 파일 경로가 정확한지 각 단계마다 확인하기
터미널 한개 더 실행한 후 lecture1 로 이동
cd lecture1
넷트리파이 Netlify 배포
회원 가입 후 왼쪽 아래 아이디 클릭
User settings 클릭
OAuth 클릭
Personal access tokens에서 New access token 클릭
토큰 이름은 아무거나 claude_token 등등
토큰 복사하기
메모장 열어서
엑세스 토큰은 아래 토근 사용 토큰 넣고 설치 프롬프트 복사
Windows 환경에서 Netlify MCP 서버를 npx 방식으로 설정해줘. 다음과 같이 진행해줘:
1. 프로젝트 루트에 .mcp.json 파일을 생성하고 다음 내용을 작성해줘(이미 .mcp.json파일이 존재할경우 mcpServers에 추가하기):
{
"mcpServers": {
"netlify": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@netlify/mcp"
],
"env": {
"NETLIFY_PERSONAL_ACCESS_TOKEN": "[여기에PersonalAccessToken입력]"
}
}
}
}
** 장점:
- npx를 사용하면 전역 설치가 필요 없음
- 자동으로 최신 버전을 찾아서 실행
- 시스템 환경이나 npm 패키지 업데이트 시에도 안정적으로 작동
- github, supabase와 동일한 방식으로 일관성 유지
2. .claude/settings.local.json 파일에서 MCP 서버 활성화:
- "enabledMcpjsonServers" 배열에 "netlify" 추가
- 기존: []
- 수정: ["netlify"]
- ⚠️ **중요**: 이 단계를 빼먹으면 MCP 서버가 연결되지 않음
3. 설치 후 다음 명령어로 MCP 서버가 정상적으로 인식되는지 확인해줘:
/mcp
4. 만약 MCP 서버가 인식되지 않으면 다음 방법으로 Claude Code를 재시작하라고 유저에게 안내해줘:
가이드:
1) /exit 로 Claude Code 종료
2) 터미널에서 claude --mcp-config .mcp.json 로 실행 (PowerShell 환경)
3) 실행시 enable 설정 허용
4) /mcp로 "✔ connected" 상태 확인
중요사항:
- Windows 환경에서는 반드시 --mcp-config .mcp.json 플래그 필요
- PowerShell 환경에서 실행하면 권한 문제 없이 정상 작동
- npx 방식으로 자동으로 패키지를 찾아 실행하므로 경로 문제 없음
netlify Mcp 설치
이것은 my-web폴더에서 실행
/exit로 종료 후
실행
--mcp-config .mcp.json
claude --dangerously-skip-permissions --mcp-config .mcp.json
mcp 확인
잘못되었으면 수정 요청
/mcp
클로드 코딩 시간 추가
console.anthropic.com
왼쪽 settings - Billing에서 넣을 수 있음
lecture1에서 실행할때는 mcp를 이전것에서 확인해야함
claude --dangerously-skip-permissions --mcp-config ../.mcp.json
해당 폴더에서 실행 package.json 있는 곳에서
npm run dev
비트 설치 및 실행
npm create vite@latest
비트 빌더
npm run build
'Web 수업자료 > UIUX 국비' 카테고리의 다른 글
| UIUX(계) 25-03 (2) | 2025.03.11 |
|---|