Reference
HTML/CSS/JS 개발환경에서의 함수 등 명명에 관한 통상의 규칙
public
2025. 8. 20. 18:11
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 |