Code Convention

1. 폴더 및 파일 네이밍 규칙

1.1 폴더 및 파일명

• 소문자와 하이픈(-) 사용: 폴더 및 파일 이름은 모두 소문자로 작성하며, 여러 단어일 경우 하이픈으로 구분합니다.

  • 올바른 예 ✅ : src/components/button.tsx, src/pages/about-us.tsx

  • 잘못된 예 ❌ : src/Components/Button.tsx, src/pages/AboutUs.tsx

• 확장자: .tsx는 TypeScript JSX 파일에 사용하고, .ts는 TypeScript 파일에 사용합니다.

  • .tsx: React 컴포넌트 파일, 페이지 파일

  • .ts: 비-UI 로직 파일, 유틸리티, 서비스 등

1.2 컴포넌트 네이밍

• 컴포넌트 이름은 PascalCase(첫 글자 대문자)를 사용합니다.

  • 올바른 예 ✅ : Button.tsx, UserProfile.tsx

  • 잘못된 예 ❌ : button.tsx, userProfile.tsx

1.3 페이지 라우팅 (앱 라우팅)

• src/app 하위에는 네비게이션 메뉴 구조에 맞춰 폴더를 생성합니다.

  • 관리자 관리 / 계정 관리 : src/app/admin/account

  • 관리자 관리 / 권한 관리 : src/app/admin/authority

  • 공지사항 : src/app/notice

• 각각의 폴더 하위에는 아래와 같이 폴더를 생성 한 후 폴더 하위에 page.tsx 파일을 생성합니다. (참고 문서)

페이지	폴더명
목록	-
상세	[id]
등록	create

---

2. 코드 스타일

2.1 들여쓰기

• 들여쓰기는 2칸을 사용합니다. 탭이 아닌 스페이스(공백)로 들여쓰기를 합니다.

  • 올바른 예 ✅ :

    function Example() {
      return (
        <div>
          <h1>Hello, world!</h1>
        </div>
      );
    }

2.2 세미콜론

• JavaScript(및 TypeScript)에서 문장 끝 세미콜론은 생략합니다. 자동 세미콜론 삽입(ASI)에 의존합니다.

  • 올바른 예 ✅ :

    const name = 'John'
    function greet() {
      return 'Hello, ' + name
    }

  • 잘못된 예 ❌ :

    const name = 'John';
    function greet() {
      return 'Hello, ' + name;
    }

2.3 따옴표

• 문자열을 나타낼 때는 단일 따옴표('')를 사용합니다.

  • 예: 'Hello, world'

2.4 코드 블록

• 조건문, 루프, 함수 등에서 중괄호 {}를 항상 사용합니다. 코드가 한 줄이라도 명시적으로 중괄호를 사용합니다.

  • 올바른 예 ✅ :

    if (condition) {
      doSomething();
    }

  • 잘못된 예 ❌ :

    if (condition) doSomething();

2.5 배열 및 객체 리터럴

• 배열 및 객체 리터럴은 각 항목을 한 줄에 배치하며, 길어질 경우 마지막 항목 뒤에 쉼표(,)를 추가합니다.

  • 올바른 예 ✅ :

    const obj = {
      name: 'John',
      age: 30,
      city: 'New York',
    }

  • 잘못된 예 ❌ :

    const obj = {
      name: 'John',
      age: 30,
      city: 'New York'
    }

2.6 Export (파일 내보내기)

• 페이지 컴포넌트 (src/pages 하위 컴포넌트)만 export default를 사용하고, 그 외 컴포넌트는 named export를 사용합니다.

  // export default
  export default function Page() {
  }
  
  // named export
  export function Component() {
  }