타입지정

1. type 으로

네이밍 규칙

1. 컴포넌트 : SeeSee
2. 함수 및 변수: seeSee
3. 상수: SEE_SEE

컴포넌트 구조

1. 화살표

스타일링

1. tailwind

상태관리

1. Input 받을 때 : useState
2. 전역상태관리 : tans

비동기처리 (try / catch 사용여부)

코드 포맷팅 (Prettier , ESLint)

1. .prettierrc

 ```json
 {
     "printWidth": 120,
     "tabWidth": 2,
     "useTabs": false,
     "semi": true,
     "singleQuote": false,
     "bracketSpacing": true,
     "trailingComma": "all"
   }
 ```
 
 ```xml
 **printWidth** : 한 줄의 최대 길이를 120자로 제한합니다. 
 						 이를 통해 코드 가독성을 유지하면서 더 긴 줄을 허용합니다.
 						 
 **tabWidth** : 들여쓰기 수준당 공백 수를 2로 설정합니다. 
 					 즉, 한 번의 들여쓰기에 공백 2칸을 사용합니다.
 
 **useTabs** : 들여쓰기에 탭 대신 공백을 사용하도록 설정합니다.
 
 **semi** : 각 구문의 끝에 세미콜론을 추가합니다. 
 
 **singleQuote** : 문자열에 작은따옴표 대신 큰따옴표를 사용합니다.
 
 **bracketSpacing** : 객체 리터럴에서 중괄호 사이에 공백을 추가합니다. 
 		             예를 들어 {foo: bar} 대신 { foo: bar }로 포맷팅합니다.
 		      
 **trailingComma** : 가능한 모든 곳에 후행 쉼표를 추가합니다.
 		            예를 들어, 여러 줄로 된 객체나 배열의 
 		            마지막 요소 뒤에도 쉼표를 추가합니다.
 ```

c.  .eslintrc.json

{
  "extends": [
    // Next.js의 핵심 웹 바이탈 관련 규칙을 포함
    "next/core-web-vitals",
    // ESLint의 권장 규칙을 포함
    "eslint:recommended",
    // React 관련 권장 규칙을 포함
    "plugin:react/recommended",
    // React Hooks 관련 권장 규칙을 포함
    "plugin:react-hooks/recommended",
    // TypeScript 관련 권장 규칙을 포함
    "plugin:@typescript-eslint/recommended",
    // Prettier와의 충돌을 방지하기 위한 설정
    "prettier"
  ],
  // 사용할 플러그인을 명시
  "plugins": ["react", "react-hooks", "@typescript-eslint"],
  "rules": {
    // React를 import 하지 않아도 JSX를 사용할 수 있게 함
    "react/react-in-jsx-scope": "off",
    // PropTypes 검사를 비활성화 (TypeScript를 사용하므로)
    "react/prop-types": "on",
    // TypeScript의 명시적 반환 타입 명시 규칙을 비활성화
    "@typescript-eslint/explicit-module-boundary-types": "on",
    // 사용하지 않는 변수에 대한 경고. 단, '_'로 시작하는 변수는 무시
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    // JSX 내에서 이스케이프되지 않은 엔티티 사용을 허용
    "react/no-unescaped-entities": "off"
  }
}

주석 규칙

1. 함수 위에, 어떤 기능을 하는 함수인지 간략 설명.

한줄
// 한줄 주석

여러줄
/ *
여
러
줄
*/