yarn berry typescript CRA 적용

*(https://velog.io/@he0_077/React-Typescript-eslint-prettier-설정)

1. yarn create react-app 프로젝트이름 --template typescript
   1. typescript 설정 및 yarn 으로 프로젝트 생성
2. node_modules yarn.lock 삭제
3. yarn set version berry
4. yarn 현재 버전 설치
5. yarn dlx @yarnpkg/sdks vscode 한뒤 타입스크립트의 버전을 해당 다운버전으로 정착
6. cmd + shift + p를 눌러 TypeScript 검색
7. yarn plugin import typescript 설치 진행
8. expect(linkElement).toBeInTheDocument(); 에러 발생시 재설치 진행

   1. yarn remove @testing-library/jest-dom → 삭제

   2. yarn add -D @testing-library/jest-dom → 재설치

   3. setupTest.ts에 아래와 같이 입력

      import "@testing-library/jest-dom";
      import "@types/testing-library__jest-dom";

9. 종속성 설치 진행

"devDependencies": {
        "@testing-library/jest-dom": "^5.16.5",
        "@types/eslint": "^8",
        "@types/testing-library__jest-dom": "^5",
        "@typescript-eslint/eslint-plugin": "^5.59.1",
        "@typescript-eslint/parser": "^5.59.1",
        "eslint": "^8.39.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-airbnb-typescript": "^17.0.0",
        "eslint-config-prettier": "^8.8.0",
        "eslint-import-resolver-typescript": "^3.5.5",
        "eslint-plugin-import": "^2.27.5",
        "eslint-plugin-jsx-a11y": "^6.7.1",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.32.2",
        "eslint-plugin-react-hooks": "^4.6.0",
        "web-vitals": "^3.3.1"
    }

10. eslintrc.json 작성

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint", "prettier"],
    "extends": [
        "airbnb",
        "airbnb-typescript",
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
    "parserOptions": {
        "project": "./tsconfig.json"
    },
    "ignorePatterns": ["build", "public"],
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    },
    "rules": {
        "no-console": ["off"],
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "js": "never",
                "jsx": "never",
                "ts": "never",
                "tsx": "never"
            }
        ]
    }
}