컨벤션 정리 - 8thejulge/thejulge GitHub Wiki

결론: 컨벤션 요약 표

항목 규칙
파일명 컴포넌트: 파스칼케이스(ex. ProductCase) / 일반파일: 케밥케이스 (ex. product-case)
scss 파일명 컴포넌트명+.scss
컴포넌트 폴더 구조 components/컴포넌트명/컴포넌트.jsx + 컴포넌트명.scss
className 케밥케이스
변수/함수명 카멜케이스(ex. isLoading)
함수 작성 방식 전부 화살표 함수로 작성
컴포넌트 명 파스칼케이스
커밋 메시지 타입잘쓰기. (ex. feat: 상품 전체 리스트 보이도록 추가)

1. scss - ClassName 컨벤션

BEM 방식 (Block Element Modifier)로 클래스 네임을 작성

// ProductCard.jsx
import './ProductCard.scss';

function ProductCard() {
  return (
    <div className="product-card">
      <img src="/img/shoes.jpg" alt="상품 이미지" className="product-card__image" />
      <h3 className="product-card__title">편한 운동화</h3>
      <p className="product-card__description">발이 편한 데일리 운동화입니다.</p>
      <span className="product-card__price">₩59,000</span>
      <button className="product-card__button">장바구니</button>
      <button className="product-card__button product-card__button--wishlist">위시리스트</button>
    </div>
  );
}

export default ProductCard;

이런방식으로 scss에서는

.product-card {
  border: 1px solid #ddd;
  padding: 16px;

  &__image {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }

  &__title {
    font-size: 18px;
    font-weight: bold;
    margin: 12px 0 8px;
  }

  &__description {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }

  &__price {
    font-size: 16px;

  }

  &__button {
    padding: 8px 12px;
    margin-right: 8px;

    &--wishlist {
      background-color: #f06292;
    }
  }
}

스타일 팀 컨벤션 예시

항목 규칙 예시
Block 이름 컴포넌트 이름 기반 (케밥-케이스) product-card
Element 이름 block__element product-card__title
Modifier 이름 block__element--modifier product-card__button--active
네이밍 이름 영어 사용 원칙 title, button, price 등..
길이 제한 3~4 단어 이내로 명확하게 product-card__image (✅) / product-card__image-for-detail-view-component(❌)
약어 사용 되도록 지양하기. button (✅) / btn(❌)

2. 파일명 (File Naming)

  • 형식
    • 컴포넌트 파일: PascalCase -> ex. ProductCard.jsx (✅) / productCard.jsx(❌)
    • 기타 일반 파일: kebab-case -> ex. use-fetch.js, format-date.js, product-date.json
    • style파일: 컴포넌트와 매칭해서 PascalCase -> ex. ProductCard.jsx 의 스타일 파일 이면? ProductCard.scss

3. 변수명

  • 형식 : camelCase -> ex. const isLoading / let productList / const [total, setTotal]

4. 함수명 (화살표 함수 사용)

  • 형식: camelCase (ex. const handleClick = () => {} / const fetchData = async () => {} / const formatDate = (date) => {})

5. 커밋 메시지

타입 의미
feat 새로운 기능 추가
fix 버그 수정
style 코드 포맷팅, 스타일 추가
refactor 리팩토링 (기능 변화 없음)
docs 문서 변경 (README 등)
chore 빌드 업무, 패키지 매니저 설정 등
test 테스트 코드 추가

아래는 예시입니다.

feat: 상품 검색 기능 구현
fix: 상품 상세 페이지에서 이미지 안 보이던 오류 수정
style: product-card 컴포넌트 SCSS 정리
refactor: fetch 함수 로직 분리

6. 폴더 구조 규칙 (구상중)

  • 컴포넌트/기능 단위로 디렉토리 구분
  • 해당 폴더 안에 jsx,scss, 테스트 파일 등 관리

ex.

src/
⚠️ **GitHub.com Fallback** ⚠️