Naming Rule

1. 컴포넌트

• 컴포넌트는 PascalCase를 이용하여 작성해주세요.
• 컴포넌트의 경우 반드시 확장자를 .tsx로 작성해주세요.
  • ✅ Login.tsx, ItemList.tsx
  • ❌ Login.ts, ItemList.jsx

2. 커스텀 훅

• 커스텀 훅은 접두사로 반드시 use를 붙여주세요.
• 커스텀 훅의 경우 camelCase를 이용하여 작성해주세요.
  • ✅ useGetFeeds.tsx
  • ❌ UseGetFeeds.tsx

3. 이미지

• 이미지는 underscore를 이용하여 모두 소문자로 작성합니다.
  • ✅ login_btn.png, signup_btn.png
  • ❌ LoginBtn.png, loginBtn.png
• 활성화와 비활성화 이미지가 분리되어 있는 경우 다음과 같이 상태를 마지막에 포함해주세요.
  • ✅ login_btn_active.png, login_btn_inactive.png
  • ❌ LoginBtnActive, login_active_btn.png
• 만약, 이미지 명에 숫자가 포함되어야 한다면, 최소 2자리의 숫자로 명명해주세요.
  • ✅ image_01.png, image_02.png
  • ❌ image_1.png, image1.png

4. 디렉토리

• 디렉토리는 kebab-case를 이용하여 모두 소문자로 작성해주세요.
• 폴더는 되도록이면 한 단어 이상을 넘기지 않도록 작성해주세요.
• 만약 한 단어를 넘기게 될 경우 반드시 하이픈(-)을 이용해주세요.
  • ✅ /login, /item/list, /directory-name

5. 스타일시트

• 컴포넌트에 대한 스타일 시트는 PascalCase로 작성해주세요.
  • ✅ BigButton.scss
  • ❌ big-button.scss
• 공용 스타일 시트는 camelCase로 작성해주세요.
  • ✅ colors.scss
  • ❌ Colors.scss
• 스타일 시트 클래스는 kebab-case로 작성해주세요.
  • ✅ .confirm-modal
  • ❌ .ConfirmModal
• 다음의 계층 구조를 따르며 작성해주세요.
• 최상위 레이아웃 정의는 wrapper를 사용해주세요.
  • ✅ .page-wrapper, .section-wrapper
  • ❌ .pageWrapper, .sectionWrapper
• 섹션 내부의 특정 블록 정의는 container를 사용해주세요.
  • ✅ .content-container, .form-container
  • ❌ .contentContainer, .formContainer
• 개별 요소나 그룹 정의에는 box를 사용해주세요.
  • ✅ .info-box, .image-box
  • ❌ .infoBox, .imageBox

6. 변수명

• 변수명은 camelCase를 이용해주세요.
• 배열의 이름은 복수형으로 작성해주세요.
  • ✅ feeds, numbers
  • ❌ feedList, numberList

7. 상수명

• 상수명은 대문자와 snake_case를 이용해주세요.
  • ✅ PIE = 3.14159, SPEED_OF_LIGHT = 299,792,458

8. 타입 및 인터페이스

• PascalCase
  • ✅ FeedType

9. 함수명

• 함수명은 camelCase를 이용해주세요.
• 함수명의 길이과 무관하게 가독성이 더욱 향상되는 방향으로 고려해주세요.
  • ✅ generateRandomNumber, isNumber
  • ❌ checkNumber

10. 클래스명

• 클래스명은 PascalCase를 이용해주세요.
  • ✅ LottoShop, Api, Http

11. 그 외 기능을 담당하는 파일

• 그 외 파일들은 kebab-case를 이용하여 모두 소문자로 작성해주세요.
• 컴포넌트를 제외한 유틸, 상수, 타입, API 로직 등의 모든 파일 확장자는 .ts로 작성해주세요
• 컴포넌트를 제외한 모든 파일은 소문자로 작성해주세요.
• 두 개 이상의 단어가 조합되는 경우 하이픈(-)으로 구분해주세요.
• 만약 단어에 세부 분류나 성격이 포함되어 있다면 점(.)으로 구분해주세요.
  • ✅ login.validation.ts, signup.validation.ts,
  • ❌ loginValidation.ts

12. 테스트를 담당하는 파일

• 단위 테스트: OOO.unit.test.tsx
• 통합 테스트: OOO.integration.test.tsx