컨벤션 | 코드 컨벤션

1. 컴포넌트 함수 컨벤션 (함수 선언 방식)

컴포넌트 함수는 PascalCase 함수 선언 방식으로 규정합니다.

// ❌ bad
function component () {
  return ()
}

export default component

// 💎 ok
function Component () {
  return ()
}

export default Component

---

2. 컴포넌트 함수 외 모든 함수 컨벤션 (함수식 방식)

컴포넌트 함수 외에는 함수식 방식으로 규정합니다.

const fetchData = () => {}

함수이외의 블록 (if나 while같은) 안에서 함수를 선언하지 않습니다

// ❌ bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// 💎 ok
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}

---

3. type 선언 컨벤션

• interface나 type 등 타입 변수명에 prefix를 붙이지 않습니다. 그리고 props에 관련된 interface명에는 suffix로 props를 붙여 구분합니다.

// ❌ bad
interface IAuth {}
type TAdmin = {}

// 💎 ok
interface Auth {}
type Admin = {}

// 💎 ok
interface OnePostProps {}

---

4. 정규식 관련 컨벤션

• 정규식에 관련된 변수명에는 prefix r을 붙입니다.

// ❌ bad
const regex = ''

// 💎 ok
const rRegex = ''

---

5. 상수(constant) 컨벤션

상수를 선언하는 변수병은 UpperCase로 작성하고, 여러개의 단어가 합성될 경우 underscore (_)로 구성합니다.

// ❌ bad
export const modalData = ''

// 💎 ok
export const MODAL_DATA = ''

---

6. 변수명 컨벤션

• 6-1 변수

변수는 camelCase로 규정합니다

const accountList = ['a', 'b', 'c'];

• 6-2 boolean 변수

boolean 값을 갖는 변수는 is를 접두사로 붙입니다.

const isLoading = false

• 6-3 이벤트 핸들러 함수명

이벤트 핸들러 함수명은 handle + 이벤트명 으로 구성합니다.

const handleClick = () => {}

---

7. 파일명 컨벤션

• 7-1 컴포넌트 파일

컴포넌트로 분리된 파일은 PascalCase로 규정합니다.

Header.tsx
Main.tsx
PopUpNews.tsx

• 7-2 컴포넌트 이외의 파일

컴포넌트 이외의 파일은 camelCase로 규정합니다.

constants.ts
userContext.ts

---

8. URL 구성 컨벤션

RESTful 규칙을 참고하여 URL을 구성합니다.

8-1. 소문자 사용

// ❌ bad
users/Comments

// 💎 ok
users/comments

8-2. 하이픈(-) 사용

// ❌ bad
users/common_comment

// 💎 ok
users/common-comment