컨벤션

태그

문서

날짜

커밋 컨벤션

feat	새로운 기능 추가
fix	버그 수정
refactor	리팩토링
design	CSS 등 UI 디자인 변경
comment	주석 추가 및 변경
style	코드 포맷팅, 세미콜론 누락 등
chore	위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
init	프로젝트 초기 생성
rename	파일 혹은 폴더명 수정하거나 옮기는 경우
remove	파일을 삭제하는 작업만 수행하는 경우

코드 컨벤션

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 타입은 분리하지 않기(재사용되는 경우 제외)

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

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