[네이밍 컨벤션] 표기법 ✍️ 🤔
📌 네이밍 컨벤션 표기법
📗 네이밍 컨벤션
- 변수, 함수, 클래스, 파일 등의 이름을 짓는 일관된 규칙이나 패턴으로 네이밍 규칙을 통해 개발팀 내에서 코드의 의미를 명확히 전달할 수 있습니다.
📗 표기법
- 네이밍 컨벤션의 핵심 요소
- 단어들을 결합하여 이름을 만드는 방식을 의미
- 정보를 표현하는 규칙
📍대표적인 표기법
- 카멜 케이스 , 파스칼 케이스 , 케밥 케이스, 스네이크 케이스 , 스크리밍 스네이크 케이스, 헝가리안 표기법
📗 카멜 케이스 (camelCase)
- 첫 단어는 소문자로 시작하고 이후 단어의 첫 글자를 대문자로 작성하는 방식
- EX) userName, firstName, handleClick, isLoading
- 주요 사용 👇
- JavaScript/TypeScript 변수명
- 함수명
- React props
- 객체 속성명
- 메서드 이름
📗 파스칼 케이스 (PascalCase)
- 모든 단어의 첫 글자를 대문자로 작성하는 방식.
- EX) UserProfile, NavigationBar, ProductCard, ReactComponent
- 주요 사용 👇
- React/Vue 컴포넌트 이름
- 클래스 이름 (Java, C#, TypeScript)
- 인터페이스 이름 (TypeScript)
- 타입 정의 (TypeScript)
📗 케밥 케이스 (kebab-case)
- 모든 단어를 소문자로 작성하고 하이픈(-)으로 연결
- EX) main-container, user-profile, navigation-bar, button-component
- 주요 사용 👇
- HTML 태그 속성
- CSS 클래스명
- URL 경로
- 파일명 (Vue 컴포넌트)
- npm 패키지명
📗 스네이크 케이스 (snake_case)
- 모든 단어를 밑줄(_)를 사용하여 단어를 구분하는 방
- EX) user_name, fetch_data, file_path
- 주요 사용 👇
- Ruby 변수명과 메서드명
- Python 변수명과 함수명
- PHP 변수명
- SQL 테이블명과 컬럼명
- 일부 설정 파일
📗 스크리밍 스네이크 케이스 (SCREAMING_SNAKE_CASE)
- 모든 단어를 대문자로만 작성하고 밑줄 (_)로 단어를 구분하는 방식
- EX) MAX_USER_COUNT, API_URL
- 주요 사용 👇
가독성이 좋고, 변하지 않는 값을 강조할 때 적합
- 상수값 (JavaScript, Java, Python 등)
- 환경 변수
- 매크로 (C/C++)
- 열거형(enum) 값
📗 헝가리안 표기법 (Hungarian Notation)
- 변수명 앞에 데이터 타입을 접두어로 붙이는 방식
- EX) numAge : 숫자(number), strUserName 문자열(string), bIsActive (불리언), arrItems (배열)
- 주요 사용 👇
- 요즘은 잘 사용되지 않음
- 레거시 Windows API
- 오래된 C/C++ 코드
- 일부 기업 내부 코딩 표준
📍 그 외 표기법
📗 플랫 케이스 (flatcase)
- 모든 단어를 소문자로 붙여서 작성하는 방
- EX) userprofile, firstname, loginpage
- 주요 사용 👇
- 도메인 이름
- 일부 데이터베이스 테이블/필드명
- 레거시 시스템의 변수명
- 특수한 조건의 파일명
📗 트레인 케이스 (Train-Case)
- 케밥 케이스와 유사하지만 각 단어의 첫 글자를 대문자로 표기하는 방식
- EX) User-Profile, Button-Component, Api-Service
- 주요 사용 👇
- HTTP 헤더 이름
- 일부 CSS 프레임워크의 컴포넌트 이름
- XML 엘리먼트 이름
- 일부 마크업 언어의 태그
📍 네이밍 표기법
📗 React
- 컴포넌트 명은 항상 파스칼 케이스(PascalCase) 대문자로 시작
- props는 camelCase로 표기
- UserProfile, LoginForm, NavigationBar
- Hook 네이밍 : use 접두사 사용 -> useCustomHook
- 상태 네이밍 : 상태를 업데이트하는 함수는 set + 상태 변수 이름 -> const [isOpen, setIsOpen] = useState(false);
📗 Vue
- 싱글파일 컴포넌트(SFC)의 파일명은 항상 파스칼 케이스(PascalCase)이거나 항상 케밥 케이스(kebab-case)여야 합니다.
- MyComponent.vue, my-component.vue
- props는 camelCase로 표기
- 템플릿에서 사용 시 케밥 케이스: <user-profile></user-profile>
🔗 Vue 참고
📗 폴더 구조
- 일반적으로 소문자와 케밥 케이스 사용: components, assets, pages, api-services
- 기능 기반 폴더: user, auth, dashboard
- 컴포넌트 타입 기반 폴더: buttons, forms, layouts
📗 CSS
-BEM(Block Element Modifier) 방식:
- 블록: header, card, button
- 요소: header__title, card__image
- 수정자: button--primary, card--featured
- 카멜 케이스(camelCase): headerTitle, cardImage
- 케밥 케이스: header-title, card-image (가장 일반적)
📗 테일윈드
- 클래스명을 공백으로 구분: flex items-center justify-between p-4
- 접두사와 값으로 구성: mt-4, text-blue-500, bg-white
- 반응형 접두사: md:flex, lg:hidden
- 상태 접두사: hover:bg-gray-100, focus:outline-none
📗 Redux
- 액션 타입: 대문자와 언더스코어: USER_LOGIN_REQUEST, FETCH_DATA_SUCCESS
- 액션 생성자: 카멜 케이스: loginUser(), fetchData()
- 리듀서: 카멜 케이스: userReducer, authReducer
- 상태(state): 카멜 케이스: userData, isLoading
📗 Recoil
- 아톰(atom): 카멜 케이스 + 'State' 접미사: userState, themeState
- 셀렉터(selector): 카멜 케이스 + 'Selector' 접미사: userNameSelector, filteredTodosSelector
📗 Zustand
- 스토어: 카멜 케이스 + 'Store' 접미사: useUserStore, useCartStore
- 액션: 카멜 케이스: addItem(), removeUser()
- 상태: 카멜 케이스: isLoggedIn, cartItems
✍️ 기록
감사합니다. 😁