프론트엔드 컨벤션 정리

프론트엔드 코딩 컨벤션 함수명 | 변수명

일반적인 경우

1. 모든 변수, 함수명은 소문자 카멜 케이스를 통해 정의한다.

const hello = "hello";

const helloWorld = () => {}

2. 배열 변수의 경우 변수명의 끝에 List를 붙인다.

const helloList = ["hello", "world"];

3. 타입이 boolean인 변수의 이름은 is, has, can으로 시작한다.

const isLoading = false;

4. 클래스 등 생성자는 파스칼 케이스를 사용한다.

class Hello {}

5. 상수는 대문자 스네이크 케이스를 사용한다.

const HELLO_WORLD = "hello, world";

6. Enum의 경우는 다음과 같은 형태를 따른다.

enum HI {
	HelloWorld = 1,
}

7. 상수값을 모은 객체의 경우 다음과 같은 형태를 따른다.

const HELLO = {
	hiWorld: "hi, World",
}

8. 반환값이 boolean인 판별함수의 이름은 is, has, can으로 시작한다.

const isClient = () => {}

9. 무언가를 생선하는 함수, 메서드는 create 접두사를 붙인다.

const createHelloWorld = () => {}

10. 입력을 특정한 형태로 변환하는 함수는 convert 접두사를 붙인다.

const convertHello = () => {}

11. 입력에서 특정한 값을 가져와서 반환하는 함수는 get 접두사를 붙인다.

const getHello = () => {}

12. 무언가를 여는 일을 하는 함수는 open 접두사를 붙인다.(자주 쓸 일 없음)

const openModal = () => {}

13. 무언가를 더하거나, 빼는 함수는 add, minus 접두사를 붙인다.

const addHello = () => {}
const minusHello = () => {}

14. 배열을 입력받아 필터링 된 결과물을 반환하는 함수는 filter 접두사를 붙인다.

const filterHello = (array) => {}

15. 배열을 입력받아 특정 요소를 찾아서 반환하는 함수는 find 접두사를 붙인다.

const findHello = (array) => {}

16. 배열을 입력받아 요소들을 변환하여 반환하는 함수는 convert 접두사를 붙인다.

const convertHello = (array) => {}

17. 관행적으로 사용되는 유틸함수의 이름은 관행을 따른다.

const throttle = () => {}
const commaize = () => {}
const decommaize = () => {}

18. ETC: 일반적인 케이스에 부합되지 않은 함수는 되도록 동사 접두사를 가지는 형태로 작성한다.

const parseHello = () => {}

리액트의 경우

1. 리액트의 커스텀훅은 use 접두사를 붙인다.(강제되는 룰)

const useCustomHook = () => {}

2. 고차컴포넌트의 경우 with 접두사를 붙인다.

const withAuth = () => {}

3. 이벤트핸들러는 handle 접두사, (이벤트 유형) 접미사를 사용한다.

const handleLoginButtonClick = () => {}

4. context의 경우 항상 접미사로 Context를 붙인다.

const HelloContext = createContext(null);

5. context를 사용하는 훅인 경우 항상 접미사로 Context를 붙인다.

const useHelloContext = () => {}

6. children을 반환하는 프로바이더 성격의 컴포넌트는 항상 접미사로 Provider를 붙인다.

const HelloContextProvider = ({children}) => {}

프론트엔드 타입 네이밍 컨벤션

일반적인 경우

1. type과 interface는 자유롭게 사용하되 type를 우선하여 사용한다.

type UserType = {
	name: string;
	age: number;
}

2. 일반적인 경우 Type 접미사를 사용한다.

bad
type User = {}

good
type UserType = {}

3. 타입은 파스칼 케이스로 작성한다.

bad
type userType = {}

good
type UserType = {}

4. 유틸리티 타입인 경우 Type 접미사를 사용하지 않는다.

export type OmitFormPick<T, U> = {
	[K in Exclude<keyof T, keyof U>]: T[K];
};

리액트의 경우

1. 컴포넌트의 Props에 대한 타입을 정의하는 경우 항상 접미사로 Props를 붙인다.

type HelloProps = {}

2. 리액트 타입은 개별로 임포트하여 사용한다.

bad
React.ReactNode

good
ReactNode

프론트엔드 폴더구조 | 파일명 컨벤션

1. 모든 폴더는 소문자를 사용한다.(띄어쓰기 최대한 x, 할 시에는 dash(-) 사용)

bad
Util
Hooks

good
util
hooks

2. 모든 파일은 파스칼 케이스를 사용한다.

bad
login.tsx

good
Login.tsx