🔗 Airbnb Code Conventions

Coding Conventions

1. 함수명 작성

   함수명을 작성할 때는 동사+명사 형태로 구성한다. ex) *getUserInfomation()*

2. 약어 사용 자제

   let idx; // bad❌
   let index; // good✅
   
   let cnt; // bad❌
   let count; // good✅
   
   let arr; // bad❌
   let array; // good✅
   

3. magic number 지양

   코드에서 숫자를 직접 사용하는 magic number를 지양하고, magic number나 문자열을 비교할 경우, constant.js에 상수화 하여 관리한다.

   //constant.js
   const LEFT = 'left';
   const LOGIN_ERROR_MESSAGE = '로그인에 실패했습니다.';
   
   //other_logic_file.js
   if (dir === LEFT) {
       //...
   }
   

4. 비동기 함수의 사용시 Promise함수의 사용은 지양하고 async, await를 사용한다.

   로직을 짜는 데 있어 promise를 불가피하게 사용할 경우, 주석으로 표시하고 commit에 그 이유를 작성합니다.

React

1. 파일 확장자는 tsx로 한다.

2. props는 구조분해 할당으로 받아온다.

   const Button = ({type, onClick}) => {};
   

3. 컴포넌트 함수는 함수 선언문 (Function Declaration) 을 사용한다.

   export default function MyComponent() {
     return <div>Hello World</div>;
   }
   

4. 일반 함수는 화살표 함수 (Arrow Function) 를 사용한다.

   const Button = ({type, onClick}) => {};
   

5. component 폴더의 최상단 파일의 이름은 component 함수 이름을 따라간다.

   ex) *components/Header/index.tsx*

6. CSS-in-JS 도구인 styled-components 를 사용한다.

7. 스타일 관련 코드는 맨 하단에 위치시킨다.

8. 공용으로 사용되는 스타일은 styles 경로에 위치 시킨다.

   ex) client\src\**styles**\themes.ts

9. wrapper에 스타일 적용하지 않는다면, <>로 한다.

10. styles.js에서 styled로 만든 컴포넌트는 export { component } 로 내보낸다.

11. Styled라는 접두사를 사용하여 styled-components로 만든 컴포넌트를 구분한다.

    import styled from 'styled-components';
    
    const StyledHeader = styled.h2`
      color: red;
    `;
    
    export { StyledHeader };