Files
2nd/10_Wiki/Topics/Frontend/Naming Conventions.md
T
Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization
10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 23:52:15 +09:00

248 lines
7.3 KiB
Markdown

---
id: wiki-2026-0508-naming-conventions
title: Naming Conventions
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Code Naming, Identifier Conventions]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [code-style, conventions, readability]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
language: multi
framework: cross-language
---
# Naming Conventions
## 매 한 줄
> **"매 names 매 code 매 most-read interface — 매 정확/예측가능/검색가능 매 핵심 경제재"**. Casing styles (camelCase, snake_case, PascalCase, kebab-case, SCREAMING_SNAKE) 매 language idiom 매 정해지며 매 semantic precision (boolean prefix `is/has`, async suffix, no abbreviation) 매 readability 의 진짜 lever.
## 매 핵심
### 매 casing styles
- **camelCase**: `userName` — JS/TS variables, Java methods.
- **PascalCase**: `UserProfile` — types, classes, React components.
- **snake_case**: `user_name` — Python, Ruby, Rust variables, SQL.
- **kebab-case**: `user-profile` — file names (web), CSS classes, URLs, npm packages.
- **SCREAMING_SNAKE**: `MAX_RETRIES` — constants 매 모든 language.
### 매 language idioms
- **JavaScript/TypeScript**: camelCase var, PascalCase type/class/component, SCREAMING_SNAKE const, kebab-case file.
- **Python**: snake_case 매 모든 매 (var/func/module), PascalCase class, SCREAMING_SNAKE const.
- **Rust**: snake_case var/func/module, PascalCase type/trait/enum, SCREAMING_SNAKE const.
- **Go**: camelCase (unexported) / PascalCase (exported), 매 underscore X.
- **Java/C#**: camelCase var/method, PascalCase class, SCREAMING_SNAKE const.
- **CSS**: kebab-case (BEM block__element--modifier).
### 매 응용
1. Code review enforcement (linter rules).
2. Refactor automation (regex-safe renaming).
3. API design (URL kebab vs JSON camelCase).
4. Cross-language interop (serialization mapping).
## 💻 패턴
### Boolean naming
```ts
// 매 BAD
const loading = true
const visible = false
const adult = true
// 매 GOOD — predicate-style prefix
const isLoading = true
const isVisible = false
const isAdult = true
const hasPermission = true
const canEdit = false
const shouldRefresh = true
```
### Function naming (verb-first)
```ts
// 매 BAD
function user(id) { /* ambiguous: getter? setter? */ }
// 매 GOOD
function getUser(id) { /* read */ }
function fetchUser(id) { /* network */ }
function createUser(data) { /* persist */ }
function updateUser(id, patch) { /* mutate */ }
function deleteUser(id) { /* remove */ }
function isUserActive(user) { /* predicate */ }
```
### Async suffix / event handler prefix
```ts
// 매 GOOD
async function loadDataAsync() { } // 매 optional, depends on team
const handleClick = () => { } // React handler
const onClick = () => { } // 매 component prop
```
### Collection plurality
```ts
// 매 BAD
const user = [u1, u2, u3] // 매 array 인지 single 인지 모호
const userList = [...] // "List" suffix 매 redundant
// 매 GOOD
const users = [u1, u2, u3]
const usersById = new Map() // shape suffix
const usersByEmail = new Map()
```
### Constants vs config
```ts
// 매 SCREAMING_SNAKE — 매 immutable primitive
const MAX_RETRIES = 3
const API_BASE_URL = 'https://api.example.com'
// 매 camelCase — 매 config object (still const)
const apiConfig = {
baseUrl: 'https://api.example.com',
timeout: 5000,
}
```
### File naming
```
# 매 React/Vue components
UserProfile.tsx # PascalCase (component)
user-profile.css # kebab-case (asset)
# 매 Python
user_profile.py # snake_case
test_user_profile.py # 매 test_ prefix
# 매 Go
user_profile.go # snake_case
user_profile_test.go # _test.go suffix
# 매 docs
README.md # SCREAMING (convention)
naming-conventions.md # kebab-case
```
### Avoid abbreviation (with exceptions)
```ts
// 매 BAD
const usr = ...
const cfg = ...
const btnClkHndlr = ...
// 매 GOOD
const user = ...
const config = ...
const handleButtonClick = ...
// 매 OK exceptions — universal abbreviations
id, url, http, json, db, api, ui, css, html, ms (millisecond), idx (loop index)
```
### Domain prefix vs suffix
```ts
// 매 prefix — 매 grouping advantage (autocomplete)
function userGet() {}
function userCreate() {}
function userDelete() {}
// 매 suffix — 매 verb-first natural
function getUser() {}
function createUser() {}
function deleteUser() {}
// 매 modern preference: verb-first (suffix domain)
```
### URL / API naming
```
GET /api/users ← kebab plural noun
GET /api/users/{id}
POST /api/users/{id}/orders
GET /api/order-statuses ← kebab compound
# 매 NOT
GET /api/getUser ← verb in URL — 매 X
GET /api/User ← PascalCase — 매 X
GET /api/user_list ← snake — 매 X (web convention)
```
### JSON field convention
```jsonc
// 매 JS-consuming API: camelCase
{ "userId": 1, "createdAt": "2026-05-10" }
// 매 Python/Ruby ecosystem: snake_case
{ "user_id": 1, "created_at": "2026-05-10" }
// 매 cross-platform: pick one + serialize-time transform
```
### Linter enforcement (ESLint)
```jsonc
// .eslintrc.json
{
"rules": {
"@typescript-eslint/naming-convention": [
"error",
{ "selector": "variable", "format": ["camelCase", "UPPER_CASE"] },
{ "selector": "function", "format": ["camelCase"] },
{ "selector": "typeLike", "format": ["PascalCase"] },
{ "selector": "enumMember", "format": ["UPPER_CASE"] },
{ "selector": "variable", "modifiers": ["const"], "types": ["boolean"], "format": ["camelCase"], "prefix": ["is", "has", "can", "should"] }
]
}
}
```
## 매 결정 기준
| 상황 | Style |
|---|---|
| JS/TS variable | camelCase |
| JS/TS type/class | PascalCase |
| JS/TS const primitive | SCREAMING_SNAKE |
| JS/TS const object | camelCase |
| Python var/func | snake_case |
| File (web asset/url) | kebab-case |
| File (component) | PascalCase |
| File (Python) | snake_case |
| Boolean | `is/has/can/should` prefix |
| Predicate function | `isX/hasX/canX` |
| URL path | kebab plural noun, no verb |
**기본값**: 매 language idiom 매 따라 매 + 매 boolean 매 predicate prefix + 매 verb-first function.
## 🔗 Graph
- 변형: [[BEM]] (CSS) · (legacy)
- 응용: [[ESLint]] · [[API-Design]]
- Adjacent: [[Clean-Code]]
## 🤖 LLM 활용
**언제**: 매 새 codebase setup, 매 cross-language API design, 매 linter config, 매 code review checklist.
**언제 X**: 매 short script (overhead), 매 generated code (machine-driven naming OK).
## ❌ 안티패턴
- **Hungarian notation**: `strName`, `iCount` — 매 type system 매 redundant.
- **Cryptic abbreviation**: `getUsrPrf()` — 매 readability 의 X.
- **Inconsistent casing**: 매 mixed style 매 한 codebase — 매 cognitive overhead.
- **Verb in URL**: `/api/getUser` — 매 RESTful 의 X.
- **Plural type name**: `Users` 매 single user type — 매 misleading.
- **Negation prefix**: `isNotReady` — 매 double-negative 위험 — `isReady` + `!isReady` 사용.
## 🧪 검증 / 중복
- Verified (Airbnb Style Guide, PEP 8, Google Style Guides, Rust API guidelines).
- 신뢰도 A.
## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — casing matrix + boolean/function/file/URL conventions + ESLint enforcement |