[FE] 개발 컨벤션

개발 컨벤션

파일명/폴더명

• 폴더 이름은 소문자로 작성합니다. 띄어쓰기 단위는 bar(-)로 표현합니다. (예 pages)
• 컴포넌트 파일 이름은 파스칼 케이스로 작성합니다. (예 MyButton)
• 커스텀 훅 파일 이름은 카멜 케이스로 작성합니다. (예 useHook)
• 그 외 파일은 폴더 이름과 마찬가지로 소문자와 bar(-)를 이용하여 작성합니다. (예 clubtypes.ts)

변수명/함수명

• 기본적으로 변수명/함수명은 카멜 케이스로 작성합니다. (myClass)
• 타입은 파스칼 케이스로 작성합니다. (MyClass)
• 컴포넌트는 파일명과 동일한 이름으로 작성합니다.
• 되도록 하나의 파일 안에 하나의 컴포넌트만 정의합니다.
• props의 경우 type이 아닌interface를 사용한다(https://velog.io/@nanotoly/TypeScript-10-point)
• 변수명/함수명은 해당 변수 또는 함수가 어떠한 일을 하는지 이름만 보고 알 수 있도록 최대한 자세하게 작성합니다.
• 이벤트 핸들러에 대해서 props 이름은 on* 접두사를 사용하고, 함수 이름은 handle* 접두사를 사용한다.

코딩 규칙

• 컴포넌트 정의는 표현식을 사용합니다.
• 함수 정의 시, 표현식 사용을 지향합니다.
• import 순서 : 외부 모듈 -> 절대 경로 -> 상대 경로 같은 폴더에 있는 모듈이라면 상대경로로 import (./모듈)
• 하나의 함수가 한가지 일만 하도록 만들려고 노력합니다.
• 읽기 쉬운 코드를 작성하도록 노력합니다.
• 같은 것끼리 묶도록 노력합니다.
• 매개 변수가 3개 이상인 함수를 정의하는 것을 지양합니다.