<aside> 💡 해당 컨벤션은 간소화 컨벤션입니다. WENIV 개발자 분들은 내부용 문서를 확인해주세요.

</aside>

<aside> 💡 해당 컨벤션은 주로 airbnb 코드 컨벤션을 따르고 있습니다.

GitHub - airbnb/javascript: JavaScript Style Guide

</aside>

1. 기본 셋팅

• Linters: ESLint

  • VSCode extension 혹은 npm으로 eslint 설치하여 기본 값 사용

    (airbnb나 google 등 다른 lint를 사용하기엔 조금 갑갑한 부분이 있어 기본 값으로 사용)

• Formatter : prettier

  //.prettierrc
  {
  	"singleQuote": true,
  	"semi": true,
  	"useTabs": false,
  	"tabWidth": 2,
  	"trailingComma": "all",
  	"printWidth": 80
  }
  

• Language : JavaScript(React)

• Style : styled-component

• npm 사용

  // 설치 목록
  npm install
  npm install react-router-dom
  npm install react-scripts
  npm install styled-components
  npm install react-ga
  npm install history
  
  ...❗️❗️추가 설치시 작성❗️❗️...
  

2. React

2-1. 기본규칙

• 따옴표, 띄어쓰기, 괄호 → prettier 따르기
• 파일 하나당 하나의 컴포넌트만 작성.

2-2. 명명규칙

• 확장자: .jsx

• 파일명: 파스칼 형식 e.g StudyCard.jsx

• 참조값 이름 : 인스턴스 - 카멜 / 리액트 컴포넌트 - 파스칼

  // 리액트 컴포넌트
  import ReservationCard from './ReservationCard';
  
  // 인스턴스
  const reservationItem = <ReservationCard />;