코딩 컨벤션 - Kernel360/KFE3-bootup-SAJO GitHub Wiki

컴포넌트 규칙

  • 함수형 컴포넌트를 다음 형식으로 사용
const Component = () => {
  return <div>Component</div>
}

export default Component

  • VSCode 익스텐션: ES7+ React/Redux/React-Native snippets 설치 ⇒ rafce

  • 코드작성 순서(순서대로)

    • import
    • interface
    • 외부 변수/함수
    • 함수 컴포넌트
    • export defalt -

  • export default는 맨 마지막에 한줄 띄고 넣기

함수 규칙

// 함수는 화살표 함수로 선언
const add = (a, b) => a + b;

// Named Export는 const 앞에 export 키워드 사용
export const subtract = (a, b) => a - b;

// Default Export는 파일의 최하단에 작성
export default add;

변수명 규칙

  • 컴포넌트 이름: 대문자로 시작하는 PascalCase 사용 (파일 및 폴더명도 PascalCase로 작성)

  • 이벤트 핸들러: handle 로 시작 → 예) handleClick

  • 함수 및 변수명: camelCase 사용

    • 일반적인 함수명은 동사로 시작

  • 상수: 모두 대문자로 작성하고 단어 사이에 _ 사용 ex) API_URL

  • 커스컴 훅(Custom Hook): use로 시작 ex) useInput

타입스크립트 명명 규칙

타입 & 인터페이스명(PascalCase)

  • export는 맨 앞에 붙인다
// 기본 인터페이스
export interface Auction {
  id: string
  title: string
  startPrice: number
  currentPrice: number
  status: AuctionStatus
  location: Location
}

// Union 타입
export type AuctionStatus = 'pending' | 'active' | 'ended'

// API 관련 타입
export interface CreateAuctionRequest {
  title: string
  description: string
  startPrice: number
  images: File[]
}

export interface AuctionListResponse {
  auctions: Auction[]
  totalCount: number
  hasNext: boolean
}

네이밍 패턴 / 일관된 컨벤션을 지켜주세요

인터페이스(interface)

  • 기본: User, Auction, Product

  • 요청: CreateAuction**Request**, Login**Request**

  • 응답: AuctionList**Response**, UserProfile**Response**

  • Props: Button**Props**, Modal**Props**

타입(type)

  • Union: AuctionStatus, UserRole

  • 유틸리티: AuctionWithBids, PartialUser

CSS 규칙

  • !important 사용 금지

  • border: none; 대신 border: 0; 사용

  • 색상은 변수로 사용

  • font-size/padding/margin: rem 단위 사용

⚠️ **GitHub.com Fallback** ⚠️