docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
2026-07-05 00:44:01 +09:00
parent e9cbf23ab5
commit 9a135bd19d
6127 changed files with 0 additions and 0 deletions
@@ -0,0 +1,168 @@
+---
+id: wiki-2026-0508-automated-refactoring-tools
+title: Automated Refactoring Tools
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Refactoring Tools, IDE Refactoring, Codemod Tools]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [refactoring, tooling, ast, codemod]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: typescript
+  framework: ts-morph,jscodeshift,comby,ast-grep
+---
+
+# Automated Refactoring Tools
+
+## 매 한 줄
+> **"매 AST-level 의 transform — 매 sed 의 X, 매 syntax-aware 의 mass-edit"**. 매 IDE refactor (Rename · Extract) 의 80년대 Smalltalk 의 root, 2026 의 LLM-augmented codemod (Claude Opus 4.7 + ast-grep) 의 mainstream.
+
+## 매 핵심
+
+### 매 3 tier 의 tool
+- **IDE-builtin**: IntelliJ · VS Code · Rider — 매 single-file 의 dominant.
+- **Codemod**: jscodeshift · ts-morph · comby · ast-grep — 매 cross-cutting mass change.
+- **LLM-driven**: Claude Code · Cursor · GitHub Copilot Workspace — 매 semantic-aware 의 modernization.
+
+### 매 refactor 종류
+- Rename (symbol-aware).
+- Extract function/variable/component.
+- Inline.
+- Move (file/module).
+- Change signature.
+- Convert (e.g. `var → const`, `function → arrow`).
+
+### 매 응용
+1. 매 framework migration (Vue 2 → Vue 3, React class → hook).
+2. API breaking change 의 fan-out fix.
+3. Code style 의 mechanical enforcement.
+
+## 💻 패턴
+
+### ts-morph: rename + add property
+```typescript
+import { Project } from "ts-morph";
+
+const project = new Project({ tsConfigFilePath: "tsconfig.json" });
+
+for (const sf of project.getSourceFiles()) {
+  for (const cls of sf.getClasses()) {
+    if (cls.getName()?.endsWith("Service")) {
+      cls.rename(cls.getName()!.replace(/Service$/, "Manager"));
+      cls.addProperty({ name: "createdAt", type: "Date", initializer: "new Date()" });
+    }
+  }
+}
+
+await project.save();
+```
+
+### ast-grep: pattern → rewrite (yaml rule)
+```yaml
+id: useEffect-cleanup
+language: tsx
+rule:
+  pattern: useEffect(() => { $$$BODY }, $DEPS)
+fix: |
+  useEffect(() => {
+    $$$BODY
+    return () => { /* cleanup */ };
+  }, $DEPS)
+```
+```bash
+ast-grep scan -r useEffect-cleanup.yml --update-all
+```
+
+### jscodeshift: Vue Options → Composition API
+```javascript
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  root.find(j.ObjectExpression)
+    .filter(p => p.node.properties.some(pr => pr.key?.name === "data"))
+    .forEach(path => {
+      // emit setup() function with refs
+      // ...
+    });
+
+  return root.toSource();
+}
+```
+```bash
+jscodeshift -t vue-comp-api.js src/
+```
+
+### comby (language-agnostic structural search)
+```bash
+comby 'console.log(:[args])' 'logger.debug(:[args])' .ts -i
+```
+
+### LLM codemod (Claude Opus 4.7) — semantic-aware
+```python
+import anthropic
+
+client = anthropic.Anthropic()
+SYSTEM = "You convert React class components to functional + hooks. Preserve behavior."
+
+with open("UserCard.tsx") as f:
+    src = f.read()
+
+resp = client.messages.create(
+    model="claude-opus-4-7",
+    max_tokens=4096,
+    system=SYSTEM,
+    messages=[{"role": "user", "content": src}],
+)
+print(resp.content[0].text)
+```
+
+### IDE script: IntelliJ structural search
+```text
+$method$($args$) { $body$ }
+→ Constraints: method matches ".*Async$"
+→ Replace with: async $method$($args$) { $body$ }
+```
+
+## 매 결정 기준
+| 상황 | Tool |
+|---|---|
+| 매 single-file rename in IDE | IDE builtin |
+| TS-only · type-aware | ts-morph |
+| TS/JS · less type-aware · faster | jscodeshift |
+| Multi-language · structural | comby · ast-grep |
+| 매 semantic refactor · framework migration | LLM codemod |
+| Mass mechanical regex-safe | sed/perl (드물게) |
+
+**기본값**: TypeScript 의 ts-morph, polyglot 의 ast-grep, 매 semantic 의 LLM.
+
+## 🔗 Graph
+- 부모: [[Refactoring_Best_Practices|Refactoring]] · [[AST_Traversal|Abstract-Syntax-Tree-Traversal]]
+- 응용: [[Architecture_Refactor]]
+- Adjacent: [[AI-Assisted Refactoring (AI 기반 리팩토링)]] · [[AST_Traversal]]
+
+## 🤖 LLM 활용
+**언제**: 매 semantic refactor (class→hook, callback→async/await), 매 deterministic rule 의 hard 의 case.
+**언제 X**: 매 mechanical rename 의 case — IDE 가 cheaper · safer. LLM 의 hallucination risk 의 require code review.
+
+## ❌ 안티패턴
+- **Regex-only refactor**: 매 string match 의 false positive (comment · string literal).
+- **Test 없음 refactor**: 매 mass codemod 의 test suite 의 gate 의 require.
+- **PR 의 single huge codemod**: 매 review 의 X — file-by-file commit 의 split.
+- **LLM output 의 blind merge**: 매 type-check + test 의 gate 의 mandatory.
+
+## 🧪 검증 / 중복
+- Verified (ts-morph docs, Meta jscodeshift, comby.dev, ast-grep.github.io, Anthropic Claude API docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — 3-tier taxonomy + ts-morph/ast-grep/comby/LLM examples |