Code Convention

🔵 JavaScript

JavaScript Version

• ES6+를 사용한다.

function

• 화살표 함수를 기본으로 사용한다.

import

• import문의 순서는 custom eslint rule에 따른다.

'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
        pathGroups: [
          {
            pattern: '@/*',
            group: 'internal',
            position: 'after',
          },
        ],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],

export

• export default는 가장 하단에 작성한다.
• export는 변수 선언과 함께 작성한다.

🔵 Naming Convention

constants

• 상수는 대문자로 쓰며 _로 구분한다 .

variables

• camelCase를 사용한다.
• 일반적으로는 명사로 시작하되 flag 변수일 경우 is나 has로 시작한다.
• button 등의 영어 단어의 경우 btn같이 축약하지 않고 그대로 쓴다.

function

• 기본적으로 camelCase를 사용한다.
• 생성자 함수의 경우, PascalCase를 사용한다.
• 동사로 시작한다.
• 이벤트 핸들러의 콜백 함수는 handle[컴포넌트이름][이벤트이름]으로 작성한다.

<DropDown onClick={handleDropDownClick}>

class

• PascalCase를 사용한다.

interface, type

• PascalCase를 사용한다.
• prefix를 사용하지 않는다.

🔵 Type Definition

• type alias를 기본으로 사용한다.

  • 이유 1. computed value를 사용할 수 있다.

    type names = 'firstName' | 'lastName'
    
    // type alias에서는 computed value 사용 가능 
    type NameTypes = {
      [key in names]: string 
    }
    
    // interface에서는 computed value 사용 불가
    interface NameInterface {
      // error
      [key in names]: string
    }
    
    const yc: NameTypes = { firstName: 'hi', lastName: 'yc' }

  • 이유 2. IDE에서 마우스 hover 시 미리보기를 더 잘 지원한다.

  • 이유 3. 같은 이름으로 중복 선언할 수 없으므로 원치 않는 선언 병합을 막아준다.

• 인터페이스가 필요한 경우, 인터페이스를 쓴다.
• Component의 Props 타입 지정 시 Props suffix를 붙인다.