네이밍 규칙

안녕하세요~ yb 김정민입니다!

저는 처음 프로젝트를 시작할 때 폴더구조 어떻게 할지 이름은 또 어떻게 지을지 많은 고민을 하고 시작하는데요

이름지을 때 지피티한테 기능 알려주고 이름 추천을 받거나 그냥 단순히 영어로 번역후 하기도하는데

공부할수록 체계적으로 작성해보고싶어졌습니다

(사실 네이밍 규칙 어떻게 생긴지는 알고 있었는데 정확한 이름을 최근에 알았어요)

그래서 오늘은 폴더 컴포넌트등 여러 네이밍 규칙들에 대해 정리하고 주로 어떨 때 사용하는지 알아보고자합니다!

---

네이밍 규칙

• camelCase: 소문자로 시작하고 대문자로 시작하는 모든 후속 단어
• PascalCase: 모든 단어는 대문자로 시작
• snake_case: 밑줄로 구분된 단어
• kebab-case: 하이픈으로 구분된 단어

---

camelCase

: 소문자로 시작하고, 이후 단어는 대문자로 시작

ex)userProfile, handleClick

• 변수, 함수, 커스텀 훅에 주로 사용
  자바스크립트 기본 규칙이 변수와 함수에 camelCase를 사용하도록 권장하고, useFetchData 같은 커스텀 훅 이름은 use로 시작하고 camelCase로 이어지기 때문에 직관적이라 많이 사용됩니다.
  또한 소문자로 시작하므로 변수와 클래스(=PascalCase)를 시각적으로 쉽게 구분할 수 있습니다.

---

PascalCase

: 모든 단어의 첫 글자가 대문자

ex) UserProfile, NavBar

• 리액트 컴포넌트, 클래스, 컴포넌트 파일/폴더에 주로 사용
  리액트에서는 컴포넌트 이름이 대문자로 시작해야 하므로 PascalCase를 기본으로 사용합니다.
  또한 클래스명에도 관습적으로 PascalCase가 사용되며, 컴포넌트 파일과 폴더명을 PascalCase로 맞추면 구조가 명확해지고 IDE 자동완성에도 유리합니다.

---

snake_case

: 단어를 밑줄(_)로 구분

ex) user_profile, api_response

• 환경 변수, 백엔드 JSON 데이터에 주로 사용
  백엔드 언어(Python 등)에서는 snake_case를 표준으로 사용하며, API로 전달되는 JSON에서도 이 규칙이 자주 나타납니다.
  환경 변수 또한 모두 대문자 + 밑줄 형태(REACT_APP_API_KEY)로 사용하는 것이 일반적인 규칙입니다.

---

kebab-case

: 단어를 하이픈(-)으로 구분

ex) user-profile, main-header

• URL, CSS 클래스명, 정적 자산 및 폴더명에 주로 사용
  URL에서는 대소문자 혼용이 문제를 일으킬 수 있어 모두 소문자인 kebab-case가 안정적입니다.
  CSS 클래스명도 kebab-case를 사용하면 일관되고 가독성이 좋습니다.
  또한 폴더나 정적 자산 파일명에서도 OS 간 호환성과 깔끔한 표현을 위해 자주 사용됩니다.

---

다들 이미 알고 있겠지만 한번 더 정리하면서 어디가서 아는척하며 써먹어봐요 ㅎㅎ