🧩Coding Convention - twelive/JUNGLE GitHub Wiki

🟢규칙

1. 규칙은 꼭 지켜야 합니다 !
2. 애매하고 헷갈리면 확인하고, 그럼에도 헷갈린다면 도움을 요청하세요 !
3. 꼭 꼭 꼭 지켜 주세요 !

🟢기본 규칙

1. 파일당 하나의 컴포넌트 파일만 포함한다.

• 하지만, 다수의 Stateless, or Pure, Components 들은 파일에 존재해도 된다. eslint: react/no-multi-comp.

2. 항상 TSX 구문을 사용한다.

• 만약 TSX를 이용해 앱을 개발 중이라면 React.createElement 구문을 사용하지 않는다.

🟢네이밍

• 컴포넌트, context의 경우 PascalCase로 작성합니다. (기본)

• 속성 이름은 항상 camelCase로 한다. ex) <Hoo userName='soi'>

• 폴더명은 소문자로 구성합니다. ex) style , pages

• React 컴포넌트 내부 폴더면은 PascalCase로 구성합니다. ex) MyScedulePage

• 모든 파일 및 클래스 네임은 camelCase로 작성합니다. (JS파일 포함) ex) stylePage

• 이미지 파일 네이밍은 브랜치명 + cababcase로 작성합니다. ex) page-mesh-back-pack.svg , scedule-hotel-room

• 변수명 일반적인 변수, 함수, 커스텀 훅, props : camelCase 상수 : 영문 대문자로 선언, 여러 단어일 경우 snake_case로 사용 ex) VITE_PB_URL

• 컴포넌트 React 컴포넌트 : PascalCase Page 컴포넌트 : 이름 + Page로 지정 ex) HomePage

🟢함수

• map, filter, 이벤트위임, ...(spread syntax)의 경우에만 화살표 함수로 작성 위에 예시를 제외한 나머지는** 일반 함수**로만 작성 ex) let a = () => {...}
• 이벤트 함수 handle- ex) handleClick , handleScrollUp
• 값을 가져오는 함수 get- ex) getProductName
• 값을 설정하는 함수 set- ex) setProductName
• 불린형 변수 is + 명사 ex) isLoading()

let a = (10 > 8) ? "true" : "fale";

if(true){
return 'hello'
};

🟢export / import

• 컴포넌트 내보내기는 export 키워드를 코드 맨 아래에 작성 ex) export default function Greeting

🟢etc

• 늘여 쓰기를 권장합니다. ex) btn 보다는 button , e 보다는 event
• 변수는 const 로 통일합니다. 하지만 필요한 경우 let 을 사용합니다. (var 금지) ex) const a = 1
• 설명이 필요한 기능들에 대해서는 주석을 작성 합니다.
• Styled Component 는 tsx 파일 내에서 작성합니다.