[FE] 프론트엔드 코드 컨벤션

💌 Yarn

패키지 중복 설치를 막기 위해 Yarn으로 통일

💌 들여 쓰기

• tab이 아닌, space 사용

💌 식별자 Naming Convention

• 직관적으로 의미 파악할 수 있는 이름으로 작성
• 가급적이면 약어 사용하지 않기
• **camelCase**로 선언
• Html 태그는 반드시 소문자로 작성
• 상수는 스네이크 케이스 [ **const THIS_IS_CONSTANT = 'string';** ]
• props로 전달되는 핸들러 함수는 on으로 시작
• 컴포넌트 내부에서 직접 정의하는 이벤트 핸들러 함수는 handle로 시작

💌 React

• 컴포넌트는 항상 **PascalCase**로 선언
• inline style 금지, 스타일 변수는 기본적으로 분리해서 사용
• 타입 캐스팅은 항상 명시적으로 선언

💌 Function

• 함수의 식별자명은 항상 시맨틱하게 선언
• (어떤 기능을 하는 함수인지 함수명을 보고 알 수 있도록 선언)

💌 크기 단위 (%, vh, vw / px / rem)

%, vh, vw

• width, height

px

• border-radius
• border-width
• box-shadow

rem

• font-size
• width, height
• padding, margin
• grid-app

• 💌 import 순서

1. 리액트 관련
2. 외부 라이브러리
3. react hook - custom hook
4. types
5. style
6. component
7. constants
8. util
9. api