종류 방식
변수명 camelCase
e.g.userName="영희"
상수명 CAPITAL_SNAKE_CASE
e.g.REGULAR_SIZE="상수"
클래스명 BEM 방식
e.g. <div className="tab__item--focused">
타입명 웬만하면 헝가리안 표기법을 사용하지 않도록 한다.
추가로 type과 interface 사용 참고
파일명, 폴더명 kebab case kebab-case.tsx
함수 네이밍 패턴 A/HC/LC 패턴
컴포넌트명 PascalCase 표현식 사용ex. const Input = () =>
유틸 함수명 camelCase
e.g. getData = () => {}
유틸 함수 파일명 kebab-case. get-data.ts
확장자명 .tsx, .ts
assets assets 카테고리 참고
styled-components styled-component 카테고리 참고

적용 예시

`상수`

const MY_NAME = 'thomas';

`변수, 함수`

const roomNumber = 3;
const getYourData = ()=> console.log("hello world");

`클래스, 컴포넌트, 인터페이스 예시`

class Person{}

const Person = () => {}

interface Person{}

ES-Lint : Airb&b 타입스크립트 룰 적용.

+)

// 객체는 interface
// 단순 타입정의는 type 별칭

// * 객체의 타입 단순 상속
// : 오버헤드가 발생하므로 type으로 정의
// * 속성의 추가/변경이 있는경우에는 상속하여 사용.

interface John extends Person {} // 🚫
type John = Person; // ✅
interface John extends Person {
	age: number;
} // ✅

// * 함수 정의는 가독성을 위해 타입별칭으로.(오버로드는 예외)
interface Func {
  (a: number): void;
} // 🚫

type Func = (a: number) => void; // ✅

Front-End 디렉토리 구조