컨벤션

커밋 컨벤션

notion image

코드 컨벤션

Common

한 줄 짜리 if 문도 블럭처리

컴포넌트 파일명 PascalCase

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

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

export 할 때

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

JSDoc(TSDoc)으로 주석적기

중첩된 객체에만 structuredClone 사용

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

이벤트 핸들러명은 handle prefix


const handleModalOpen = () => { ... }

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


<Modal onModalOpen={handleModalOpen} />

Emotion styled 사용하지 않는다.

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


┣ 📂components
┃ ┣ 📂common
┃ ┃ ┣ 📂Something
┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┣ 📜index.style.ts
┃ ┃ ┃ ┣ 📜Button.tsx
┃ ┃ ┃ ┗ 📜Button.style.ts

Typescript

인터페이스 or 타입

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

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

타입스크립트 prefix 적지않기

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

타입스크립트 타입 선언에서도 코드 반복을 줄이기

유틸리티 타입 활용
유니온, 인터섹션 활용

ESLint

Prettier