🔗 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. TSX 사용하면 최상단에 React 를 import 해온다.

   • react v.18.3.1 사용

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

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

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

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

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

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

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

   ex) *components/Header/index.tsx*

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

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

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

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

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

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