1. 디렉토리 구조

• page 파일은 app 폴더에, 컴포넌트는 components폴더로 작성
• 파일 이름은 파스칼케이스로 작성 (예: ExampleComponet.js)
• 하나의 파일에 하나의 컴포넌트 작성

2. 코딩 스타일

• 태그 : 모든 HTML 태그는 소문자로 작성
• 중괄호 여는 중괄호는 같은 줄에 작성

.example {         
    color: #333;    
} 

• 속성 순서:
  • HTML
    1. 표준 속성 (class, src, href)
    2. 커스텀 속성 (data-* )
    3. 이벤트 핸들러 (onclick, onchange )
  • Tailwind-CSS
    1. 레이아웃 관련 속성 (display, position, top, left 등)
    2. 박스 모델 속성 (margin, padding, border, width 등)
    3. 텍스트 스타일 (font, color, text-align 등)
    4. 기타 속성 (애니메이션, 커스텀 속성 등)
  • React and TypeScript
    • 이벤트핸들러 ****: props로 전달되는 핸들러 함수는 on으로 시작, 컴포넌트 내부에서 직접 정의하는 함수는 handle로 시작
    • 컴포넌트 네이밍 : 파스칼 케이스 사용
    • Inline Style 사용 x
    • 컴포넌트는 function으로 선언
    • 정말 타입이 난해하지 않는 경우를 제외하고는 any를 사용하지 않음
• 변수 : 카멜케이스 사용 (예 : userName, isActive).
• 상수 : 대문자와 언더스코어 사용 (예 : MAX_VALUE).
• 함수 : 동사를 포함한 카멜케이스 (예 : getData, sendRequest).
• 들여쓰기 간격 : 2 - space