프로젝트 회의 기록 (24.03.30)

이번 주 수정사항

1. 폴더 구조 변경 완료 → 호민

2. api/axios 추상화 코드 추가 + Get API 타입 선언 및 Model 타입 선언 → 호민

다음주 요구 수정사항

1. Tanstack 도입

2. Styled Lint 도입

3. 기존 컨벤션 수정

기존 컨벤션

Code Naming

• 여기서 postPost 이렇게 진행되어야 할 것 같은데 얘네들은 CreatePost 이런식으로 가면 어떨까요

Code Style

• 개인적으로 간단한 주석은 처리해주는게 오히려 도움될 것 같다는 의견입니다. 리팩토링 과정에서 재작업 해야될 부분들이 계속 공유되면 좋겠는데 주석이 아예 없으면 오잉.. 하는 부분들이 있을 것 같아요.

• 배열의 이름은 가능하면 모두 -s , 로 잡아보는것도 좋을 것 같아요

• CSS단위는 rem단위에 맞게 4, 8, 12, 16 이렇게 재정의해야할것같아요

• interface를 기본으로한다는 뭔가 어색한 느낌이에요 객체라면 interface, 그외라면 type으로 가는게 맞는것 같아요

• 상대경로와 절대경로를 적절하게 섞어써야 할 것 같아요. 같은 컴포넌트 내에서도 절대경로를 써버리니까 import문이 많이 더러워지네요,,

ESLint

module.exports = {
  root: true,
  env: { browser: true, es2020: true, node: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts'],
  parser: '@typescript-eslint/parser',
  plugins: ['react', 'prettier', '@typescript-eslint', "import", "unused-imports"],
  rules: {
    'no-console': 'error',
    'no-var': 'error',
    'prefer-template': 'error',
    'arrow-spacing': 'error',
    'no-duplicate-imports': 'error',
    'dot-notation': 'error',
    'no-useless-concat': 'error',
    'react/react-in-jsx-scope': 'off',
    'react/function-component-definition': [
      'error',
      {
        namedComponents: 'arrow-function',
        unnamedComponents: 'arrow-function',
      },
    ],

    '@typescript-eslint/naming-convention': [
      'error',
      {
        format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
        selector: 'variable',
        leadingUnderscore: 'allow',
      },
      {
        format: ['camelCase', 'PascalCase'],
        selector: 'function',
      },
      {
        format: ['PascalCase'],
        selector: 'interface',
      },
      {
        format: ['PascalCase'],
        selector: 'typeAlias',
      },
    ],
	"import/order": [
      "warn",
      {
        groups: [
          "index",
          "sibling",
          "parent",
          "internal",
          "external",
          "builtin",
          "object",
          "type",
        ],
      },
    ],
		"unused-imports/no-unused-imports": "error",
    "import/newline-after-import": ["error", { count: 1 }],
    "padding-line-between-statements": [
      "error",
      { blankLine: "always", prev: "const", next: "return" },
    ],
  },
};

// npm i -D eslint-plugin-react
// npm i -D eslint-plugin-import eslint-plugin-unused-imports

/*
"no-unused-vars": "error", // 미사용 변수 금지
"react/jsx-key": "error", // 반복문 내 key값 강제화
*/

// 호민
'@typescript-eslint/naming-convention': [
      'error',
      {
        selector: 'interface',
        format: ['PascalCase'],
      },
      {
        selector: 'typeAlias',
        format: ['PascalCase'],
      },
      {
        selector: 'variable',
        format: ['PascalCase', 'camelCase', 'UPPER_CASE'],
      },
      {
        selector: 'variable',
        types: ['function'],
        format: ['PascalCase', 'camelCase'],
      },
      {
        selector: 'variable',
        types: ['boolean'],
        format: ['PascalCase'],
        prefix: ['is', 'has'],
      },
    ],

• import관련 ESLint는 지워도 될 것 같습니다.

• recommended로 선언해도 대부분 잡히는 것 같아서 거의 지워도 될 것 같아요

• typescript부분은 더 빡세게 정제해도 될 것 같아요 가령 boolean에는 is키워드가 포함되어야 한다던지
• 해당 내용 예시는 코드로 첨부했습니다.

Prettier

{
    "singleQuote": true,
    "trailingComma": "all",
    "endOfLine": "auto",
    "bracketSameLine": true,
    "semi": true,
    "arrowParens": "always",
    "vueIndentScriptAndStyle": false,
    
    "jsxSingleQuote": true,
    "quoteProps": "as-needed",

    "embeddedLanguageFormatting" : "auto",
}

// 호민팀 => trivago 사용해서 import강제하고 ESLint에서 import관련내용 제거했어요
// tailwindCss는 무시해도 될 것 같아요
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "jsxSingleQuote": true,
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "embeddedLanguageFormatting": "auto",
  "importOrder": [
    "^(react/(.*)$)|^(react$)",
    "<THIRD_PARTY_MODULES>",
    "^(@/(.*)$)",
    "^[./]"
  ],
  "tailwindFunctions": ["clsx", "cn", "twmerge", "cva"],
  "plugins": [
    "@trivago/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss"
  ]
}

4/5일까지 할일

• 일요일까지 호민님 PR 리뷰 후 Merge

• 본인이 맡은 페이지의 api 요청 Tanstack 사용하는 형태로 변경

• tantack query 사용은 석현의 컨벤션을 따름