프론트엔드 네이밍 규칙(with 코딩 컨벤션)

시작하며

개발을 어느정도 공부하면서 지금은 네이밍 규칙에 익숙해졌지만 처음에는 변수, 디렉토리, 파일 등의 이름이 제각각인 것 같아서 그 규칙을 파악하지 못해 헷갈릴 때가 정말 많았다. 코딩 컨벤션에 대한 내용을 공부하면서 네이밍 규칙에 대한 내용을 정리해보려 한다.

 

 

코딩 컨벤션이란

개발을 하는데 코드 작성 규칙 없이 매번 다르게 작성할 경우 일관성도 떨어지고 가독성도 떨어지게 된다. 코딩 컨벤션을 통해 코드 작성 방식에 대한 약속, 규칙을 정해서 일관성과 안정성을 높일 수 있다. 이 글에서는 코딩 컨벤션의 네이밍 부분에 대해 다뤄보려 한다.

 

Naming 종류

종류	설명	예시
kebab-case	소문자 사용 | 띄어쓰기를 - 로 구분	hello-world
lowerCamelCase	소문자 사용 | 띄어쓰기를 대문자로 구문	helloWorld
PacalCase	소문자 사용 | 첫글자와 띄어쓰기를 대문자로 구분	HelloWorld
snake_case	소문자만 사용 | 띄어쓰기를 _ 로 구분	hello_world
UPPER_CASE	대문자만 사용 | 띄어쓰기를 _ 로 구분	HELLO_WORLD

 

Naming 사용

1. directory

- kebab-case 사용

 

2. ts, js 파일

- lowerCamelCase 사용

 

3. Class, Type, Interface

- PascalCase 사용

 

4. tsx

- PascalCase 사용

 

5. 그외 확장 파일

- kebab-case 사용

 

6. 상수

- UPPER_CASE 사용

7. 그외 함수 등 파일

- lowerCamelCase 사용