컨벤션

커밋 컨벤션

코드 컨벤션

Common

• 한 줄 짜리 if 문도 블럭처리

• 컴포넌트 파일명 PascalCase
• 컴포넌트가 비대해지면 PascalCase 폴더명에 index.tsx

• 컴포넌트 화살표 함수로 작성

• export 할 때
• 컴포넌트만 default export
• 그 이외는 named export

• JSDoc(TSDoc)으로 주석적기

• 중첩된 객체에만 structuredClone 사용

• 변수명 길어지더라도 아예 생략없이(단, 자주쓰는 줄임말은 가능)

• 이벤트 핸들러명은 handle prefix

• props로 넘길 때는 on prefix를 사용한다.

• Emotion styled 사용하지 않는다.
• css prop을 사용. 스타일을 별도의 파일로 분리해 사용하고 컴포넌트 파일과 같은 폴더에 위치시킨다.

Typescript

• 인터페이스 or 타입
• api 응답과 관련된 것만 인터페이스, 나머지는 다 타입으로 작성

• 변경되지 않는 객체 as const 붙이기

• 타입스크립트 prefix 적지않기

• Props suffix 붙이기, 컴포넌트 Props 타입은 분리하지 않기(재사용되는 경우 제외)

• 타입스크립트 타입 선언에서도 코드 반복을 줄이기
• 유틸리티 타입 활용
• 유니온, 인터섹션 활용

ESLint

Prettier