반응형
네이밍 컨벤션
네이밍 컨벤션은 코드에서 변수, 함수, 클래스, 파일, 디렉토리 등 다양한 요소를 일관성 있게 이름 짓는 규칙을 말함
네이밍 컨벤션을 통해 코드의 가독성을 높이고, 협업에서 일관된 스타일을 유지하여 코드 관리와 유지보수를 쉽게 할 수 있음
카멜 케이스 (camelCase)
- 형태 : 첫 단어는 소문자, 이후 단어의 첫 글자를 대문자로 표기
- 사용 예 : myVariableName, fetchData, calculateSum
- 사용 위치
- 변수와 함수 이름에 주로 사용됨
- 자바스크립트에서 많이 사용됨
파스칼 케이스 (PascalCase)
- 형태 : 모든 단어의 첫 글자를 대문자로 표기
- 사용 예 : MyClassName, UserComponent
- 사용 위치
- 클래스명이나 생성자 함수에 사용됨
- React에서 컴포넌트 이름은 주로 PascalCase로 작성함
스네이크 케이스 (snake_case)
- 형태 : 모든 글자를 소문자로 표기하며, 단어 사이에 언더 스코어(_)를 사용함
- 사용 예 : my_variable_name, calculate_total_sum
- 사용 위치
- 주로 Python에서 변수, 함수명에 사용되며, 데이터베이스의 테이블명이나 컬럼명에도 자주 쓰임
대문자 스네이크 케이스 (UPPER_SNAKE_CASE)
- 형태 : 모든 글자를 대문자로 표기하며, 단어 사이에 언더 스코어(_)를 사용함
- 사용 예 : MAX_VALUE, API_ENDPOINT
- 사용 위치
- 상수 이름에 사용됨
- 상수는 변하지 않는 값을 의미하므로, 대문자 스네이크 케이스로 표현해 강조하는 방식
케밥 케이스 (kebab-case)
- 형태 : 모든 글자를 소문자로 표기하며, 단어 사이에 하이픈(-)을 사용함
- 사용 예 : my-variable-name, background-color
- 사용 위치
- HTML 클래스 명이나 CSS에서 속성 이름에 주로 사용됨
- 파일 이름에도 사용되며, 특히 URL에 이 방식을 사용해 가독성을 높임
네이밍 컨벤션 적용 예시
// 변수 (camelCase)
let userName = "John";
const maxCount = 5;
// 상수 (UPPER_SNAKE_CASE)
const API_URL = "https://api.example.com";
// 함수 (camelCase)
function getUserInfo() { ... }
// 클래스 (PascalCase)
class UserManager { ... }
// CSS 클래스 (kebab-case)
.button-primary { ... }
네이밍 컨벤션의 목적
- 일관성 유지 : 코드가 일관되게 작성되어 가독성과 유지보수가 쉬워짐
- 협업 효율성 증가 : 팀원들이 같은 네이밍 규칙을 사용하면 코드의 이해도가 높아짐
- 명확한 의도 전달 : 변수나 함수의 이름을 통해 해당 요소의 목적과 용도를 쉽게 파악할 수 있음
반응형
'Web' 카테고리의 다른 글
WEB | CSR vs SSR (2) | 2024.10.29 |
---|---|
WEB | SPA vs MPA (0) | 2024.10.29 |