Convention
변수 및 함수 명명 규칙
올라핀테크 프론트엔드 프로젝트 내에서 지켜야하는 변수 및 함수 명명 규칙을 서술합니다.
변수 및 함수 명명 규칙
변수 및 함수
- camelCase 사용
- 명확하고 설명적인 이름 사용
// ✅
const isDrawerOpen = true
const handleDrawerOpen = () => {}상수
- 전역 상수: UPPER_SNAKE_CASE
- 로컬 상수: camelCase
// ✅ 전역 상수
export const MAX_DATE_RANGE_PICKER_LOOK_BACK_YEARS = 2
export const HOMEPAGE_URL = 'https://allra.co.kr/'
export const SIGN_IN_CODE = {
SUCCESS: 'SUCCESS',
NOT_FOUND_0001: 'NOT_FOUND_0001',
} as const
// ✅ 로컬 상수
const threshold = 20한글 네이밍
- Enum, 상수 객체, 타입에 한글 사용 가능
- 도메인 용어를 명확히 표현
// ✅ 한글 enum
export enum 계약_상태 {
진행_없음 = 'NONE',
서명_필요 = 'NEED_SIGN',
심사_중 = 'AUDITING',
계약_완료 = 'COMPLETED',
}
// ✅ 한글 타입
export type ContractStatus =
| '진행_없음'
| '계약_필요'
| '심사_중'
| '계약_완료'
// ✅ 한글 함수명 (필요시)
export const getContractInfoStatus = (
data: ContractInfoData
): ContractStatus => {
// ...
}컴포넌트 네이밍
- PascalCase
- 명확하고 설명적인 이름
// ✅
export const DraggableBottomSheet = () => {}
export const AccountCopyConfirmModal = () => {}
export const ResponsiveModal = () => {}이벤트 핸들러
handleprefix 사용
// ✅
const handleDrawerOpen = (isOpen: boolean) => {}
const handleDragEnd = (e: PointerEvent, info: PanInfo) => {}
const handleConfirm = async (accountNumber: string) => {}Boolean 변수
is,has,shouldprefix
// ✅
const isDrawerOpen = false
const isMobile = true
const hasError = false
const shouldRender = true