Claude Code로 리팩토링(비용 문제로 절반만..😅 )

소개

Claude code 로 리팩토링 및 에러 수정을 해보고 싶었습니다. 그런데 이렇게 비용이 많이 들 줄 몰랐습니다. 😅

진행 방법

작성한 코드에 리팩토링할 지점이 많아 Claude Code로 리팩토링을 해보기로 했습니다.

우선 설치 후 이런 것들을 설정합니다.

1. 환경변수 설정
echo 'export ANTHROPIC_API_KEY="your-actual-api-key"' >> ~/.bashrc
source ~/.bashrc

2. Alpine Linux에서 실행 문제로
node $(which claude) 로 실행

Claude Code도 md 파일의 내용을 컨텍스트로 사용합니다.

.claude 폴더에 넣거나 각 하위 디렉토리에 넣으면 됩니다.(하위 디렉토리의 경우 nested가 됩니다.)

프로젝트 폴더에 사진을 넣으면 그 사진의 내용도 컨텍스트로 입력이 됩니다.(이 경우 끌어다 놓으면 됩니다.)

Mac 사용자는 딕테이션 기능을 이용해서 말로 프롬프트를 전달도 됩니다.(딕테이션 버튼 두 번 누르면 됩니다.)

명령어로 tag할 수 있는 것은 폴더, 파일, md 파일 등입니다.

# 뒤에 입력하면 md 파일에 자동으로 들어가 컨텍스트에 포함됩니다.

세션을 이어갈 때는, --resume 입력하시면 됩니다.

코드를 인덱싱하거나 원격 서버에 업로드하지 않으며, 텍스트 검색을 사용합니다.

사용자 코드로 모델을 학습시키지 않아 보안성이 뛰어납니다.

MCP 도구 연동 가능하며, coderabbit처럼 github pull request에 대해서 @claude 할 수 있습니다.

Cursor만 써보다 Claude Code를 쓰니, 조금 더 프롬프트를 다듬을 필요를 느꼈습니다.

시험해 본 워크플로우는 분석 -> 계획 -> 코드 수정입니다.

프롬프트: Identify refactoring point of this code base and plan it.

결과:
Backend Refactoring Points

  1. Service Layer Decomposition (High Priority)

  ......
  2. Error Handling Standardization
...
  3. Module Structure Consistency

...
  4. Configuration Management

  ...

  Frontend Refactoring Points

  1. Context Decomposition (High Priority)
...

  2. Feature-Based Organization

  ...

  3. API Client Improvements

...
  4. State Management
...

  Cross-Cutting Refactoring Points

  1. Type Safety (Critical)
...

  2. Validation Layer
...

  3. Security Hardening
...

  4. Testing Infrastructure

...

  Recommended Refactoring Order

  1. Backend service decomposition - Split large service files
  2. Standardize error handling - Implement consistent error patterns
  3. Frontend context splitting - Break down massive auth context
  4. Type sharing - Generate shared types from schema
  5. Feature-based organization - Restructure frontend by features
  6. Complete incomplete modules - Finish materials, posts, schedules

  This refactoring would transform the codebase from a functional but monolithic structure into a scalable,
  maintainable architecture following modern best practices.

이 플랜대로 리팩토링을 하다 두 가지 문제에 부딪혔습니다.

비용 문제
- 25달러를 쓰고 결국 중간에 그만두었습니다.(절반도 못한 상황입니다.)
적절한 에러 수정 프롬프트를 찾는 문제

1. front-end error log:Chrome Developer mode
Attempting admin login... admin
auth.service.ts:80 
            
            
           POST https://localhost:3000/api/auth/admin/login 500 (Internal Server Error)
dispatchXhrRequest @ axios.js?v=2c29e190:1648
xhr @ axios.js?v=2c29e190:1528
dispatchRequest @ axios.js?v=2c29e190:2003
Promise.then
_request @ axios.js?v=2c29e190:2206
request @ axios.js?v=2c29e190:2115
httpMethod @ axios.js?v=2c29e190:2253
wrap @ axios.js?v=2c29e190:8
adminLogin @ auth.service.ts:80
onAdminSubmit @ Login.tsx:89
(anonymous) @ chunk-YABUFNLM.js?v=2c29e190:1675
await in (anonymous)
callCallback2 @ chunk-T2SWDQEL.js?v=2c29e190:3674
invokeGuardedCallbackDev @ chunk-T2SWDQEL.js?v=2c29e190:3699
invokeGuardedCallback @ chunk-T2SWDQEL.js?v=2c29e190:3733
invokeGuardedCallbackAndCatchFirstError @ chunk-T2SWDQEL.js?v=2c29e190:3736
executeDispatch @ chunk-T2SWDQEL.js?v=2c29e190:7014
processDispatchQueueItemsInOrder @ chunk-T2SWDQEL.js?v=2c29e190:7034
processDispatchQueue @ chunk-T2SWDQEL.js?v=2c29e190:7043
dispatchEventsForPlugins @ chunk-T2SWDQEL.js?v=2c29e190:7051
(anonymous) @ chunk-T2SWDQEL.js?v=2c29e190:7174
batchedUpdates$1 @ chunk-T2SWDQEL.js?v=2c29e190:18913
.....
Login.tsx:94 Admin login result: {success: false, message: 'An error occurred during admin login'}

2. Server log

[INFO] 22:00:23 ts-node-dev ver. 2.0.0 (using ts-node ver. 10.9.2, typescript ver. 5.8.3)
⚠️ RS256 keys in environment variables are invalid, falling back to file or generation
✅ RS256 keys loaded from file system
....
✅ HTTPS Server is running on port 3000
🌐 Environment: development
🔗 Test URL: https://localhost:3000/direct-server-test
🔧 Self-signed certificates enabled for development
⚠️  IMPORTANT: Visit https://localhost:3000/api/test in your browser and accept the certificate first!

3. Symtom: Still no error logs in backend console when 500 error occurs.
4. Analyze the root cause of this error.
5. Plan to fix this error
6. Fix this error.

프롬프트를 붙여넣어줍니다.