IDE 통합

// .vscode/settings.json
{
  // Claude Code 터미널 설정
  "terminal.integrated.defaultProfile.osx": "bash",
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.defaultProfile.windows": "PowerShell",

  // 자동 저장 (Claude Code가 변경사항 즉시 감지)
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // Git 통합
  "git.enableSmartCommit": true,
  "git.autofetch": true,

  // 코드 포매팅 (Claude Code 생성 코드 자동 정리)
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,

  // TypeScript 설정
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.suggest.autoImports": true,

  // ESLint 자동 수정
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },

  // 파일 감시 제외 (성능 향상)
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/.claude/**": true
  }
}

// .vscode/tasks.json - Claude Code 작업 단축키
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Claude Code: Start",
      "type": "shell",
      "command": "claude",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Claude Code: Commit",
      "type": "shell",
      "command": "claude /commit",
      "problemMatcher": []
    },
    {
      "label": "Claude Code: Run Tests",
      "type": "shell",
      "command": "npm test",
      "group": "test",
      "problemMatcher": ["$tsc"]
    }
  ]
}

# 추천 VS Code 확장 프로그램

## 필수 확장
- **ESLint**: 코드 린팅
- **Prettier**: 코드 포매팅
- **GitLens**: Git 히스토리 시각화

## TypeScript/JavaScript
- **Error Lens**: 인라인 에러 표시
- **Import Cost**: Import 크기 표시
- **Path Intellisense**: 경로 자동완성

## 유틸리티
- **Terminal**: 강화된 터미널 기능
- **Todo Tree**: TODO 주석 추적
- **Better Comments**: 주석 하이라이팅

# 설치 명령어
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension eamodio.gitlens
code --install-extension usernamehw.errorlens

# IntelliJ IDEA 터미널에서 Claude Code 사용

## 1. 터미널 열기
# macOS/Linux: Option + F12
# Windows: Alt + F12

## 2. Claude Code 실행
claude

## 3. 작업 공간 설정
cd /path/to/your/project
claude

## 4. 특정 명령 실행
claude /commit
claude /test

# IntelliJ 외부 도구 설정
# Settings > Tools > External Tools

## Claude Code 실행 도구 추가

**Name:** Claude Code
**Program:** claude
**Arguments:** (비워둠)
**Working directory:** $ProjectFileDir$

## 커밋 도구 추가

**Name:** Claude Commit
**Program:** claude
**Arguments:** /commit
**Working directory:** $ProjectFileDir$

## 단축키 설정
# Settings > Keymap > External Tools
# - Claude Code: Ctrl+Alt+C
# - Claude Commit: Ctrl+Alt+G

# .idea/codeStyles/Project.xml - 코드 스타일 통일
<?xml version="1.0" encoding="UTF-8"?>
<component name="ProjectCodeStyleConfiguration">
  <code_scheme name="Project" version="173">
    <option name="LINE_SEPARATOR" value="&#10;" />

    <!-- TypeScript -->
    <TypeScriptCodeStyleSettings>
      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="true" />
      <option name="FORCE_SEMICOLON_STYLE" value="true" />
      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
    </TypeScriptCodeStyleSettings>

    <!-- Java -->
    <JavaCodeStyleSettings>
      <option name="CLASS_COUNT_TO_USE_IMPORT_ON_DEMAND" value="999" />
      <option name="NAMES_COUNT_TO_USE_IMPORT_ON_DEMAND" value="999" />
    </JavaCodeStyleSettings>
  </code_scheme>
</component>

# IntelliJ 플러그인 추천

## 필수 플러그인
- **Prettier**: 코드 포매팅
- **.ignore**: .gitignore 지원
- **Rainbow Brackets**: 괄호 매칭 시각화

## 개발 생산성
- **Key Promoter X**: 단축키 학습
- **String Manipulation**: 문자열 변환
- **GitToolBox**: Git 정보 표시

## 프레임워크별
- **Spring Boot**: Spring 프로젝트
- **Node.js**: Node.js 개발 지원
- **Database Tools**: DB 연결 및 쿼리

" ~/.vimrc 또는 ~/.config/nvim/init.vim

" Claude Code 터미널 토글
nnoremap <leader>c :terminal claude<CR>

" 새 분할 창에서 Claude Code 실행
nnoremap <leader>cc :split | terminal claude<CR>
nnoremap <leader>cv :vsplit | terminal claude<CR>

" Claude Code 명령어 단축키
nnoremap <leader>cm :!claude /commit<CR>
nnoremap <leader>ct :!npm test<CR>

" 터미널 모드에서 빠져나오기
tnoremap <Esc> <C-\><C-n>

" 파일 저장 시 자동 포맷 (Prettier)
autocmd BufWritePre *.js,*.jsx,*.ts,*.tsx :!prettier --write %

" Git 상태 표시 (vim-fugitive 플러그인)
nnoremap <leader>gs :Git<CR>
nnoremap <leader>gc :Git commit<CR>
nnoremap <leader>gp :Git push<CR>

-- ~/.config/nvim/init.lua (Neovim Lua 설정)

-- Claude Code 터미널 토글
vim.keymap.set('n', '<leader>c', ':terminal claude<CR>', { desc = 'Claude Code' })

-- 분할 창으로 Claude Code
vim.keymap.set('n', '<leader>cc', ':split | terminal claude<CR>', { desc = 'Claude Split' })
vim.keymap.set('n', '<leader>cv', ':vsplit | terminal claude<CR>', { desc = 'Claude VSplit' })

-- Claude 명령어
vim.keymap.set('n', '<leader>cm', ':!claude /commit<CR>', { desc = 'Claude Commit' })

-- 터미널 모드 설정
vim.keymap.set('t', '<Esc>', '<C-\><C-n>', { desc = 'Exit Terminal Mode' })

-- 자동 포맷팅
vim.api.nvim_create_autocmd('BufWritePre', {
  pattern = { '*.js', '*.jsx', '*.ts', '*.tsx' },
  callback = function()
    vim.cmd('silent !prettier --write %')
    vim.cmd('edit')
  end,
})

-- LSP 설정 (TypeScript)
require('lspconfig').tsserver.setup{
  on_attach = function(client, bufnr)
    -- LSP 키 바인딩
    local opts = { buffer = bufnr }
    vim.keymap.set('n', 'gd', vim.lsp.buf.definition, opts)
    vim.keymap.set('n', 'K', vim.lsp.buf.hover, opts)
    vim.keymap.set('n', '<leader>rn', vim.lsp.buf.rename, opts)
  end
}

# Neovim 플러그인 추천 (lazy.nvim)

return {
  -- Claude Code 통합
  {
    'akinsho/toggleterm.nvim',
    config = function()
      require('toggleterm').setup{
        open_mapping = [[<c->]],
        direction = 'float',
        shell = 'bash -c "claude"'
      }
    end
  },

  -- Git 통합
  {
    'lewis6991/gitsigns.nvim',
    config = function()
      require('gitsigns').setup()
    end
  },

  -- 파일 탐색
  {
    'nvim-telescope/telescope.nvim',
    dependencies = { 'nvim-lua/plenary.nvim' },
    config = function()
      require('telescope').setup{}
    end
  },

  -- LSP
  {
    'neovim/nvim-lspconfig',
    dependencies = {
      'williamboman/mason.nvim',
      'williamboman/mason-lspconfig.nvim',
    }
  },

  -- 자동완성
  {
    'hrsh7th/nvim-cmp',
    dependencies = {
      'hrsh7th/cmp-nvim-lsp',
      'L3MON4D3/LuaSnip',
    }
  }
}

# Vim에서 Claude Code 워크플로우 예제

## 1. Vim 실행
nvim

## 2. 프로젝트 디렉토리로 이동
:cd /path/to/project

## 3. 파일 열기
:e src/index.ts

## 4. Claude Code 터미널 열기 (수직 분할)
<leader>cv

## 5. Claude에게 요청
"이 파일에 타입 체크를 추가해주세요"

## 6. 변경사항 확인 (터미널 종료 후)
:e src/index.ts

## 7. Git 커밋 (Claude Code 사용)
<leader>cm

## 8. 테스트 실행
<leader>ct

# ~/.bashrc 또는 ~/.zshrc

# Claude Code 별칭
alias cc='claude'
alias ccc='claude /commit'
alias cct='claude /test'
alias ccr='claude /review'

# 프로젝트별 Claude Code 시작
alias ccstart='cd ~/projects/my-app && claude'

# Claude Code + 자동 테스트
alias cctest='claude && npm test'

# Git + Claude Code 통합
alias gccm='git add . && claude /commit && git push'

# Claude Code 로그 확인
alias cclogs='tail -f ~/.claude/logs/claude.log'

# 환경 변수
export CLAUDE_API_KEY="your-api-key"
export CLAUDE_MODEL="claude-sonnet-4"
export EDITOR="code --wait"  # 또는 "vim", "nano"

# Oh My Zsh 설정 (~/.zshrc)

# 테마 설정 (Git 정보 포함)
ZSH_THEME="agnoster"

# 플러그인
plugins=(
  git
  zsh-autosuggestions
  zsh-syntax-highlighting
  docker
  npm
)

# Claude Code 자동완성
autoload -U compinit && compinit

# 커스텀 프롬프트 (Claude Code 버전 표시)
CLAUDE_VERSION=$(claude --version 2>/dev/null || echo "not installed")
PROMPT='%{$fg[cyan]%}[Claude: $CLAUDE_VERSION]%{$reset_color%} '$PROMPT

# 디렉토리 변경 시 자동으로 Claude Code 정보 표시
chpwd() {
  if [ -f .claude/config.yaml ]; then
    echo "📦 Claude Code project detected"
    echo "Settings: .claude/config.yaml"
  fi
}

# fzf 통합 (히스토리 검색)
[ -f ~/.fzf.zsh ] && source ~/.fzf.zsh

# Claude Code 히스토리 검색
bindkey '^r' fzf-history-widget

# tmux 설정 (~/.tmux.conf)

# 마우스 지원
set -g mouse on

# 256 색상
set -g default-terminal "screen-256color"

# Claude Code 세션 레이아웃
bind-key C-c split-window -h "claude"
bind-key C-v split-window -v "claude"

# 상태바 설정
set -g status-right '#[fg=green]Claude Code #[fg=white]| %H:%M'

# 세션 저장 및 복원
set -g @plugin 'tmux-plugins/tpm'
set -g @plugin 'tmux-plugins/tmux-resurrect'
set -g @plugin 'tmux-plugins/tmux-continuum'

# Claude Code 자동 시작 스크립트
# tmux 세션 생성 예제
# tmux new-session -s dev \
#   -n editor "vim" \; \
#   split-window -h "claude" \; \
#   select-pane -t 0

# Starship 프롬프트 설정 (~/.config/starship.toml)

# Claude Code 프로젝트 감지
[custom.claude]
command = "echo 🤖"
when = "test -f .claude/config.yaml"
style = "bold purple"
format = "[$output]($style) "

# Git 상태
[git_branch]
symbol = "🌱 "
format = "[$symbol$branch]($style) "

[git_status]
ahead = "⇡${count}"
diverged = "⇕⇡${ahead_count}⇣${behind_count}"
behind = "⇣${count}"

# Node.js 버전
[nodejs]
symbol = "⬢ "
format = "[$symbol($version )]($style)"

# 디렉토리
[directory]
truncation_length = 3
format = "[$path]($style)[$read_only]($read_only_style) "

# 명령어 실행 시간
[cmd_duration]
min_time = 500
format = "took [$duration]($style) "

# VS Code 키보드 단축키 (keybindings.json)
[
  // Claude Code 터미널 토글
  {
    "key": "ctrl+alt+c",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  // 새 터미널에서 Claude Code 실행
  {
    "key": "ctrl+alt+n",
    "command": "workbench.action.terminal.new",
    "args": {
      "cwd": "${workspaceFolder}",
      "name": "Claude Code"
    }
  },
  // Claude Commit 실행
  {
    "key": "ctrl+alt+g",
    "command": "workbench.action.terminal.sendSequence",
    "args": {
      "text": "claude /commit\u000D"
    }
  },
  // Claude Test 실행
  {
    "key": "ctrl+alt+t",
    "command": "workbench.action.terminal.sendSequence",
    "args": {
      "text": "npm test\u000D"
    }
  },
  // 파일 저장 + 포맷
  {
    "key": "ctrl+s",
    "command": "editor.action.formatDocument",
    "when": "editorTextFocus"
  }
]

# macOS 키보드 단축키 (Karabiner-Elements)
# ~/.config/karabiner/karabiner.json

{
  "rules": [
    {
      "description": "Hyper + C = Claude Code",
      "manipulators": [
        {
          "from": {
            "key_code": "c",
            "modifiers": {
              "mandatory": ["command", "option", "control"]
            }
          },
          "to": [
            {
              "shell_command": "open -a iTerm && osascript -e 'tell application \"iTerm\" to tell current session of current window to write text \"claude\"'"
            }
          ],
          "type": "basic"
        }
      ]
    },
    {
      "description": "Hyper + G = Claude Commit",
      "manipulators": [
        {
          "from": {
            "key_code": "g",
            "modifiers": {
              "mandatory": ["command", "option", "control"]
            }
          },
          "to": [
            {
              "shell_command": "osascript -e 'tell application \"iTerm\" to tell current session of current window to write text \"claude /commit\"'"
            }
          ],
          "type": "basic"
        }
      ]
    }
  ]
}

# Bash/Zsh 키 바인딩
# ~/.inputrc (Bash) 또는 ~/.zshrc (Zsh)

## Bash용
# Ctrl+Alt+C: Claude Code 실행
"\e\C-c": "claude\n"

# Ctrl+Alt+G: Claude Commit
"\e\C-g": "claude /commit\n"

# Ctrl+Alt+T: 테스트 실행
"\e\C-t": "npm test\n"

## Zsh용 (in ~/.zshrc)
# Claude Code 단축키
bindkey -s '^[^C' 'claude\n'
bindkey -s '^[^G' 'claude /commit\n'
bindkey -s '^[^T' 'npm test\n'

# fzf로 Claude 히스토리 검색
bindkey '^R' fzf-history-widget

# Windows AutoHotkey 스크립트
# claude-shortcuts.ahk

; Ctrl+Alt+C: Claude Code 실행
^!c::
    Run, wt.exe -p "Windows PowerShell" cmd /k "claude"
return

; Ctrl+Alt+G: Claude Commit
^!g::
    Run, wt.exe -p "Windows PowerShell" cmd /k "claude /commit"
return

; Ctrl+Alt+T: 테스트 실행
^!t::
    Run, wt.exe -p "Windows PowerShell" cmd /k "npm test"
return

; Win+C: VS Code에서 현재 프로젝트로 Claude Code 실행
#c::
    Send, ^+{p}  ; Command Palette
    Sleep, 100
    Send, Terminal: Create New Terminal
    Sleep, 500
    Send, claude{Enter}
return

# 단축키 참조표

## VS Code
- Ctrl+Alt+C: Claude Code 터미널 토글
- Ctrl+Alt+N: 새 터미널에서 Claude Code
- Ctrl+Alt+G: Claude Commit
- Ctrl+Alt+T: 테스트 실행
- Ctrl+`: 터미널 포커스

## IntelliJ
- Ctrl+Alt+C: Claude Code 실행
- Ctrl+Alt+G: Git 커밋 (Claude)
- Alt+F12: 터미널 토글
- Ctrl+Shift+A: Action 검색

## Vim/Neovim
- <leader>c: Claude Code 터미널
- <leader>cc: 수평 분할로 Claude
- <leader>cv: 수직 분할로 Claude
- <leader>cm: Claude Commit
- <Esc>: 터미널 모드 종료

## 터미널 (Bash/Zsh)
- cc: claude 별칭
- ccc: claude /commit 별칭
- Ctrl+R: 명령어 히스토리 검색
- Ctrl+Alt+C: Claude Code 실행

# 워크플로우 1: TDD (Test-Driven Development)

## 1단계: 테스트 작성
# VS Code에서 테스트 파일 생성
# src/utils/calculator.test.ts

describe('Calculator', () => {
  it('should add two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });
});

## 2단계: Claude Code에게 구현 요청
# 터미널 (Ctrl+`)
claude

"calculator.test.ts에 정의된 add 함수를 구현해주세요.
TypeScript로 작성하고, 엣지 케이스도 처리해주세요."

## 3단계: 테스트 실행
npm test

## 4단계: 리팩토링 (필요시)
"add 함수를 더 간결하게 리팩토링해주세요"

## 5단계: 커밋
claude /commit

# 워크플로우 2: 기능 개발 (Feature Development)

## 시나리오: 사용자 프로필 페이지 구현

### 1단계: 브랜치 생성 및 계획
git checkout -b feature/user-profile
claude

"사용자 프로필 페이지를 구현하려고 합니다.
다음 요구사항을 단계별로 나눠주세요:
- 프로필 정보 표시
- 프로필 수정 기능
- 아바타 업로드
- 반응형 디자인"

### 2단계: 컴포넌트 구조 생성
"앞서 계획한 단계 중 1단계부터 시작하겠습니다.
components/UserProfile/ 디렉토리 구조를 만들어주세요."

### 3단계: 점진적 구현
"UserProfile.tsx 메인 컴포넌트를 구현해주세요"
→ 코드 확인 → 테스트

"ProfileInfo.tsx 서브 컴포넌트를 구현해주세요"
→ 코드 확인 → 테스트

"ProfileEdit.tsx 구현해주세요"
→ 코드 확인 → 테스트

### 4단계: 통합 및 테스트
npm test
npm run build

### 5단계: 코드 리뷰 (자동)
claude /review

### 6단계: 커밋 및 푸시
claude /commit
git push origin feature/user-profile

### 7단계: PR 생성
gh pr create --title "Add user profile page" --body "Implemented user profile with edit and avatar upload"

# 워크플로우 3: 버그 수정 (Bug Fix)

## 1단계: 이슈 확인 및 재현
# GitHub Issue #123: "Login form doesn't submit"

## 2단계: 디버깅
# VS Code에서 문제 파일 열기
# components/LoginForm.tsx

## 3단계: Claude Code에 문제 설명
claude

"LoginForm.tsx에서 버튼 클릭 시 폼이 제출되지 않는 버그가 있습니다.

**증상:**
- 로그인 버튼 클릭
- 페이지 새로고침
- 데이터 제출 안 됨

**코드:**
<form onSubmit={handleSubmit}>
  <button type='submit'>Login</button>
</form>

원인을 찾고 수정해주세요."

## 4단계: 수정사항 확인
# Claude가 제안한 수정사항 검토
# e.preventDefault() 추가 확인

## 5단계: 로컬 테스트
npm run dev
# 브라우저에서 수동 테스트

## 6단계: 자동 테스트 작성
"이 버그를 방지하는 테스트를 작성해주세요"

## 7단계: 커밋 (이슈 번호 포함)
claude /commit
# 커밋 메시지: "fix: prevent form reload on submit (#123)"

## 8단계: 푸시 및 PR
git push
gh pr create --title "Fix login form submission" --body "Fixes #123"

# 워크플로우 4: 코드 리뷰 및 리팩토링

## 시나리오: PR 리뷰 중 개선점 발견

### 1단계: PR 체크아웃
gh pr checkout 456

### 2단계: 코드 검토
# VS Code에서 변경 파일 확인
git diff main...feature-branch

### 3단계: Claude에게 리뷰 요청
claude

"다음 PR의 변경사항을 리뷰해주세요:
- 코드 품질
- 성능
- 보안
- 베스트 프랙티스

특히 다음 파일에 집중해주세요:
- src/api/auth.ts
- src/components/Dashboard.tsx"

### 4단계: 리팩토링 제안 적용
"auth.ts의 중복 코드를 제거하고 함수로 추출해주세요"

### 5단계: 테스트 확인
npm test
npm run lint

### 6단계: 변경사항 커밋
git add .
git commit -m "refactor: extract duplicate auth logic"
git push

### 7단계: 리뷰 코멘트
# GitHub에서 리뷰 제출
"LGTM! Suggested refactoring applied."

# Makefile 예제 - 일반적인 워크플로우 자동화

.PHONY: dev test commit review deploy

# 개발 시작
dev:
	@echo "🚀 Starting development server..."
	npm run dev & claude

# 테스트 및 린트
test:
	@echo "🧪 Running tests..."
	npm run lint
	npm test
	npm run type-check

# Claude Commit
commit:
	@echo "📝 Creating commit with Claude..."
	claude /commit

# 코드 리뷰
review:
	@echo "🔍 Reviewing code with Claude..."
	claude /review

# 빌드 및 배포
deploy: test
	@echo "📦 Building..."
	npm run build
	@echo "🚀 Deploying..."
	npm run deploy

# 새 기능 브랜치
feature:
	@read -p "Feature name: " name; \
	git checkout -b feature/$$name; \
	echo "✨ Created feature/$$name"

# 사용 예:
# make dev      - 개발 서버 + Claude 시작
# make test     - 전체 테스트 실행
# make commit   - Claude로 커밋
# make deploy   - 테스트 → 빌드 → 배포