1.
주석은 반드시 쓸 것!!! (다른 사람이 코드를 읽고 이해 할 수 있도록)
2.
작명 방식
a.
TSX 파일 (ex. Home.tsx)
i.
PascalCase
ii.
rafce 스니펫 사용!!
b.
ts 파일 (ex. configStore.ts) : camelCase
c.
함수명, 변수명: camelCase
d.
TailWindCss 사용
3.
주요 디렉토리 구조
a.
common : 재사용 가능한 컴포넌트
b.
layout : 고정된 컴포넌트 (ex. Header, Footer)
c.
hooks : custom hook
d.
store : zustand store 생성
e.
utils : 날짜 포맷 등
f.
types : 타입
g.
components : 컴포넌트
4.
시맨틱 태그(main, header, nav, section, ul, li) 사용
5.
이벤트 핸들러의 변수명은 ‘handle’으로 시작(onClick, onChange 등 이벤트 handleOnClick, handleOnChange)
6.
반환 값이 boolean형인 함수는 ‘is’로 시작(모달 열려있는지? isOpen)
7.
custom hook 생성시 use로 시작