HTML/CSS/JS 개발환경에서의 함수 등 명명에 관한 통상의 규칙

1. Case Style

Func	Var	Id	Class
Camel Case	Camel Case	Camel Case	Kebab Case

2. Naming Rule

2.1. Function

• 동사+목적어로 행위를 표현
• 2~3단어 제한
• 숫자는 영문

2.2. Variable

• 무엇을 담고 있는지를 파악하기 쉽게 명사형
• 단일 문자는 반복문의 i, j 의 경우 외에는 사용 지양

2.3. Id

• 문서 내에서 유일하며 JS에서 직접제어하는 용도로 제한
• 역할 중심의 명사형이나, 상태를 나타내는 형용사+명사형

2.4. Class

• CSS에서 제어하는 용도로 제한
• (시멘틱) 요소의 모양, 색깔, 폰트크기 등 대신 의미나 역할을 설명

3. Prefixes

3.1. Function

단어	용도의미	예시
get	값을 가져올 때	getUserData
set	값을 설정할 때	setVolume
update	기존 값을 갱신할 때	updateProfile
create	새 객체나 데이터를 만들 때	createPost
delete	삭제할 때	deleteComment
fetch	외부 데이터 요청할 때	fetchWeatherData
handle	이벤트나 상황을 처리할 때	handleClick
render	UI를 그릴 때	renderHeader
calculate	계산할 때	calculateTotal
validate	유효성 검사할 때	validateForm
init/initialize	초기화할 때	initPlayer
load	로딩할 때	loadImage
toggle	상태를 전환할 때	toggleMenu
check	조건을 확인할 때	checkPermission
process	데이터를 처리할 때	processInput
is / has / can	불리언 반환 함수	isLoggedIn, hasAccess, canSubmit

3.2. Variable

단어	용도의미	예시
is / has / can	불리언 값	isVisible, hasError, canPlay
user / currentUser	사용자 정보	userName, userId
data / result / response	API나 처리 결과	dataList, responseJson
count / total / index	숫자 관련	count, totalItems, currentIndex
list / items / array	배열 관련	itemList, menuItems
config / options / settings	설정값	configMap, themeOptions
status / state	상태값	loginStatus, playerState
temp / buffer	임시 저장용	tempValue, bufferData
flag	조건 제어용	errorFlag, loadingFlag
event, e	이벤트 객체	event, e
timer, interval	시간 관련	timerId, refreshInterval

3.3. Id

단어	용도의미	예시
js	JavaScript 제어 대상 요소	jsPlayPauseButton
ui	UI 컴포넌트 중 JS 제어 부분	uiVolumeIndicator
app	애플리케이션 주요 컴포넌트	appMainSection
el	일반 DOOM 요소	elVideoContainer
ref	참조용 소스 (React 등)	refSearchInput
handle	이벤트핸들러 대상 요소	handleVideoPlay
ctrl	컨트롤러 역할 요소	ctrlSidebarToggle

3.4. Class

단어	용도의미	예시
btn-	버튼	btn-submit, btn-play
icon-	아이콘	icon-search, icon-close
nav-	내비게이션	nav-main, nav-item
form-	폼	form-login, form-field
input-	입력 필드	input-email, input-text
label-	라벨	label-password
modal-	모달창	modal-alert, modal-login
dialog-	대화창	dialog-confirm
section-	페이지 섹션	section-header, section-footer
tab-	탭	tab-home, tab-settings
dropdown-	드롭다운 메뉴	dropdown-user, dropdown-language
list-	리스트	list-items, list-menu
card-	카드 UI컴포넌트	card-product, card-user
tooltip-	툴팁	tooltip-help
toast-	알림 메시지	toast-success, toast-error