2nd/10_Wiki/Topics/Frontend/Naming Conventions.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-naming-conventions	Naming Conventions	10_Wiki/Topics	verified	self	Code Naming Identifier Conventions	none	A	0.9	applied	code-style conventions readability		2026-05-10	pending	language framework multi 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

// 매 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)

// 매 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

// 매 GOOD
async function loadDataAsync() { } // 매 optional, depends on team
const handleClick = () => { }      // React handler
const onClick = () => { }          // 매 component prop

Collection plurality

// 매 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

// 매 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)

// 매 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

// 매 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

// 매 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)

// .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