✍️ 기록/기타

[네이밍 컨벤션] 표기법 ✍️ 🤔

김물사 2025. 3. 21. 10:53

📌 네이밍 컨벤션 표기법

📗 네이밍 컨벤션

- 변수, 함수, 클래스, 파일 등의 이름을 짓는 일관된 규칙이나 패턴으로 네이밍 규칙을 통해 개발팀 내에서 코드의 의미를 명확히 전달할 수 있습니다.

 

📗 표기법

- 네이밍 컨벤션의 핵심 요소

- 단어들을 결합하여 이름을 만드는 방식을 의미 

- 정보를 표현하는 규칙

📍대표적인 표기법 

- 카멜 케이스 , 파스칼 케이스 , 케밥 케이스, 스네이크 케이스 , 스크리밍 스네이크 케이스, 헝가리안 표기법

 

📗 카멜 케이스 (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

 

 

 

 

✍️ 기록

 

감사합니다. 😁

 

반응형