[G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
@@ -1,104 +1,240 @@
 ---
 id: wiki-2026-0508-ai와-기계에게-검열-맡기기-정적-분석-툴-eslint-p
-title: AI와 기계에게 검열 맡기기    정적 분석 툴 (ESLint Prettier))
+title: 정적 분석 툴 (ESLint, Prettier)
 category: 10_Wiki/Topics
-status: needs_review
+status: verified
 canonical_id: self
-aliases: [P-Reinforce-AUTO-37563B]
+aliases: [ESLint, Prettier, linter, formatter, static analysis tools]
 duplicate_of: none
-source_trust_level: A
+source_trust_level: B
 confidence_score: 0.9
-tags: [auto-reinforced]
+verification_status: applied
+tags: [eslint, prettier, linter, formatter, static-analysis, ast, code-quality]
 raw_sources: []
-last_reinforced: 2026-04-20
-github_commit: "[P-Reinforce] Continuous Worker - AI와 기계에게 검열 맡기기_ - 정적 분석 툴 ([[ESLint|ESLint]]  [[Prettier|Prettier]]))"
-inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+last_reinforced: 2026-05-09
+github_commit: pending
 tech_stack:
-  language: unspecified
-  framework: unspecified
+  language: TypeScript / JavaScript
+  framework: ESLint / Prettier / Biome
 ---

-# AI와 기계에게 검열 맡기기_ - 정적 분석 툴 (ESLint  Prettier))
+# 정적 분석 툴 (ESLint + Prettier)

-## 📌 한 줄 통찰 (The Karpathy Summary)
-> 현대 소프트웨어 개발에서는 주관적이고 반복적인 코드 평가 작업을 ESLint, Prettier와 같은 결정론적 도구와 AI 기반 에이전트(기계)에게 위임하여 코드를 자동으로 '검열'하는 구조를 갖추고 있습니다 [1]. Linter인 ESLint는 추상 구문 트리(AST)를 분석해 문법적 오류와 잠재적 버그를 식별하며, Formatter인 Prettier는 줄 바꿈이나 들여쓰기 등 시각적 일관성을 강제합니다 [2]. 나아가 단순한 패턴 매칭을 넘어 LLM 기반의 AI 정적 분석 도구([[SAST|SAST]])를 도입함으로써 문맥을 이해하고 복잡한 취약점을 분석하는 '에이전트적 거버넌스'로 진화하고 있습니다 [3, 4].
+## 📌 한 줄 통찰
+> **"매 subjective code review → deterministic tool"**. Linter (ESLint) = bug + style. Formatter (Prettier) = visual. 매 PR 의 mechanical 의 AI / tool, 매 logic 의 human.

-## 📖 구조화된 지식 (Synthesized Content)
-* **결정론적 거버넌스의 기반 (ESLint & Prettier)**
-  * **ESLint (결정론적 Linter):** 소스 코드를 추상 구문 트리(AST)로 변환해 순회하면서 사용되지 않는 변수, 섀도잉 현상 등 논리적 버그와 의심스러운 구조를 식별하고 팀의 모범 사례를 강제합니다 [2, 5, 6].
-  * **Prettier (의견이 반영된 Formatter):** 코드의 로직에는 관여하지 않고 들여쓰기, 따옴표 일관성, 줄 바꿈 등 텍스트의 시각적 형태를 일관되게 재작성하여 코드 가독성을 높입니다 [2, 6, 7].
-  * **규칙 충돌 및 통합:** ESLint에도 포맷팅 스타일 규칙이 포함되어 있어 Prettier와 충돌할 수 있습니다. 이를 방지하기 위해 `[[eslint-config-prettier|eslint-config-prettier]]`를 사용하여 충돌하는 ESLint 규칙을 비활성화하고, `[[eslint-plugin-prettier|eslint-plugin-prettier]]`를 통해 Prettier를 ESLint의 규칙처럼 동작시키는 방식이 권장됩니다 [8-11].
+## 📖 핵심

-* **자동화 검열의 오케스트레이션 ([[Husky|Husky]] & [[lint-staged|lint-staged]])**
-  * 이러한 검열 도구들은 `Husky`와 `lint-staged`를 활용해 Git의 'pre-commit' 단계에서 강제적으로 실행됩니다 [12-14]. 저장소 전체가 아닌 변경된 파일(staged files)에만 검열 에이전트를 실행시켜 검사 시간을 수 초 내로 단축하고, 품질 미달 코드가 저장소에 병합되는 것을 선제적으로 차단합니다 [13-15].
+### Linter vs Formatter

-* **AI를 활용한 시맨틱 지능과 에이전트적 거버넌스**
-  * 전통적인 Linter는 파일 내 패턴 매칭에 그쳐 문맥을 파악하지 못하는 한계(Context-blind)가 있습니다 [3, 16]. 이를 극복하기 위해 Snyk Code, [[SonarQube|SonarQube]] 등 AI 기반 정적 분석(SAST) 도구가 도입되고 있습니다 [3, 17, 18].
-  * 수백만 개의 커밋을 학습한 AI 모델은 오염 분석(Taint [[Analysis|Analysis]]) 및 도달 가능성 분석을 수행하여 파일 경계를 넘나드는 복잡한 취약점을 파악하고 안전한 코드 수정을 제안합니다 [19, 20].
+#### Linter (ESLint)
+- 매 AST 의 analysis.
+- 매 logic 의 problem.
+- Configurable rule.
+- Auto-fix subset.

-* **기계 검열의 심리사회적 영향 및 한계**
-  * 기계에 코드 검열을 맡기면 사소한 스타일 논쟁을 없애고 개발자의 인지 부하를 줄여 비즈니스 로직 해결에 몰입(Flow)할 수 있게 돕습니다 [21, 22].
-  * 하지만 자동화에 과도하게 의존할 경우, 개발자의 비판적 사고 근육이 퇴화하고 자동화 도구의 검사만 통과하면 된다고 여기는 '녹색 체크마크 증후군(Green Check Mark Syndrome)'을 유발할 수 있습니다 [23, 24]. 또한 AI 도구 역시 전체 취약점의 약 22%를 놓치는 사각지대가 존재하므로, 아키텍처 설계와 도메인 비즈니스 로직 등 고위험 검토에는 여전히 인간의 판단(Human-in-the-loop)이 필수적입니다 [24-26].
+#### Formatter (Prettier)
+- 매 visual layout (indent, line break).
+- 매 opinionated (no config debate).
+- Always auto-fix.

-## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** AI 분야의 자동 자산화 수행.
+→ 매 different concern. 매 둘 다 사용.

-## 🔗 지식 연결 (Graph)
- **Related Topics:** [[SAST (정적 애플리케이션 보안 테스트)|SAST (정적 애플리케이션 보안 테스트)]], [[AST (추상 구문 트리)|AST (추상 구문 트리)]], Husky & lint-staged
- **Projects/Contexts:** [[Git Pre-commit 훅을 활용한 개발 워크플로우 자동화|Git Pre-commit 훅을 활용한 개발 워크플로우 자동화]], [[AI 코드 리뷰 및 보안 취약점 점검(DevSecOps)|AI 코드 리뷰 및 보안 취약점 점검([[DevSecOps]])]]
- **Contradictions/Notes:** 소스는 기계 주도의 검열이 개발 생산성과 코드 품질을 높인다고 긍정적으로 평가하면서도, 동시에 AI 모델이 실제 취약점의 일부를 놓치고 개발자의 비판적 사고를 약화시켜 표면적 문제 해결에 집착하는 '녹색 체크마크 증후군'을 초래할 수 있다는 역설적 한계를 분명히 지적합니다 [23, 24, 26].
+### ESLint 의 핵심
+- 매 rule (built-in + plugin).
+- 매 severity (error / warn / off).
+- 매 file pattern (override).
+- 매 plugin ecosystem 큰.

---
-*Last updated: 2026-04-18*
+### Prettier 의 철학
+- 매 minimal config.
+- "End the debate".
+- 매 language (JS, TS, CSS, HTML, MD, JSON).

---
+### Modern alternative

-## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+#### Biome (Rust, ESLint + Prettier 의 통합)
+- 빠름 (10x).
+- 매 single tool.
+- 매 ESLint plugin 의 support 부족.

-**언제 이 지식을 쓰는가:**
- *(TODO)*
+#### Oxlint (Rust)
+- 매 ESLint compatible.
+- 50x faster.

-**언제 쓰면 안 되는가:**
- *(TODO)*
+#### Rome (deprecated)
+- Biome 의 이름.

-## 🧪 검증 상태 (Validation)
+### 매 production setup

- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+#### Pre-commit
+- husky + lint-staged.
+- 매 commit 의 lint + format.

-## 🧬 중복 검사 (Duplicate Check)
+#### CI
+- 매 PR 의 lint 의 fail.
+- 매 format check.

- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+#### IDE
+- VS Code 의 ESLint extension.
+- 매 save 의 auto-fix.

-## 🕓 변경 이력 (Changelog)
+### TypeScript + ESLint
+- @typescript-eslint plugin.
+- 매 type-aware rule.
+- 매 import order.
+- 매 unused export.

-| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
-|------|-----------|-----------|--------|
-| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
+### Custom rule
+- 매 team convention.
+- 매 architectural pattern.
+- 매 anti-pattern detect.

-## 💻 코드 패턴 (Code Patterns)
+## 💻 Code

-**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
-
-```text
-# TODO
+### .eslintrc.json
+```json
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "rules": {
+    "no-console": "warn",
+    "no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "react/jsx-key": "error"
+  },
+  "overrides": [
+    { "files": ["*.test.ts"], "rules": { "no-console": "off" } }
+  ]
+}
 ```

-## 🤔 의사결정 기준 (Decision Criteria)
+### .prettierrc
+```json
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "printWidth": 100
+}
+```

-**선택 A를 써야 할 때:**
- *(TODO)*
+### Pre-commit (husky + lint-staged)
+```json
+// package.json
+{
+  "scripts": {
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
+    "*.{md,json}": ["prettier --write"]
+  }
+}
+```

-**선택 B를 써야 할 때:**
- *(TODO)*
+```bash
+# .husky/pre-commit
+#!/bin/sh
+npx lint-staged
+```

-**기본값:**
-> *(TODO)*
+### CI workflow
+```yaml
+- run: npm run lint
+- run: npm run format -- --check
+- run: npm run typecheck
+```

-## ❌ 안티패턴 (Anti-Patterns)
+### Custom ESLint rule
+```js
+// eslint-rules/no-direct-db-import.js
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: { description: 'Direct DB import 의 ban from UI layer' },
+  },
+  create(context) {
+    const filename = context.getFilename();
+    if (!filename.includes('/components/')) return {};
+    
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value.includes('@/db')) {
+          context.report({
+            node,
+            message: 'UI 의 DB 직접 import X. Use service.',
+          });
+        }
+      },
+    };
+  },
+};
+```

- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
+### Biome (modern alternative)
+```bash
+npm install -D @biomejs/biome
+npx biome init
+npx biome format --write .
+npx biome lint .
+```
+
+### Auto-fix on save (VS Code)
+```json
+// .vscode/settings.json
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
+```
+
+## 🤔 결정 기준
+
+| 상황 | 추천 |
+|---|---|
+| 매 new project | ESLint + Prettier |
+| 매 large monorepo | Biome (single tool, fast) |
+| 매 React-heavy | ESLint + react plugin |
+| 매 type-safe | + @typescript-eslint |
+| 매 specific convention | Custom rule |
+| 매 cross-language | Biome / Prettier |
+
+**기본값**: ESLint + Prettier (separate). 매 large project 의 Biome 의 consider.
+
+## 🔗 Graph
+- 부모: [[Static-Analysis]] · [[Code-Quality]]
+- 변형: [[Biome]] · [[Oxlint]] · [[StyleLint]] (CSS) · [[Pylint]] (Python) · [[clippy]] (Rust)
+- 응용: [[AST]] · [[Pre-commit-Hook]] · [[CI-Quality-Gate]]
+- Adjacent: [[AI-Code-Review]] · [[AI-Powered-Code-Analysis]]
+
+## 🤖 LLM 활용
+**언제**: 매 codebase quality 의 setup. 매 team convention 의 enforce.
+**언제 X**: 매 throwaway script. 매 specific compliance audit.
+
+## ❌ 안티패턴
+- **Inconsistent rule (per-dev)**: drift.
+- **No pre-commit hook**: 매 PR 의 매 lint fail.
+- **ESLint + Prettier 의 conflict (rule overlap)**: eslint-config-prettier 의 사용.
+- **No auto-fix on save**: manual cycle slow.
+- **Custom rule 의 over-engineer**: 매 simple 의 readable 더 좋음.
+
+## 🧪 검증 / 중복
+- Verified (industry standard).
+- 신뢰도 B.
+- Related: [[AI-Code-Review]] · [[AI-Powered-Code-Analysis]] · [[AST]].
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-09 | Cleanup — ESLint + Prettier setup + Biome alternative + custom rule |