typescript, ESLint, Prettier, Jest, React-Testing-Library

Next.js 초기설정 파일별 용어정리

웹 접근성의 오류를 막기위한 라이브러리 설치

node i -D axe-core

typescript

node i -D typescript ts-node @types/node @types/react @types/react-dom

• ts-node: tsc 사용없이 typescript 파일을 실행할수 있게 해줌
• @types/node: node를 위한 타입 정의
• @types/react: react를 위한 타입 정의
• @types/react-dom: react-dom을 위한 타입 정의

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",  /* 사용 할 ESMASCript 버전 설정 */  
    "lib": [          /* 컴파일에 포함될 라이브러리 목록 */
      "dom",	      
      "dom.iterable", 
      "esnext"	      
    ], 
    "allowJs": true,         /* JS 파일 컴파일 허용 여부 */
    "skipLibCheck": true,    /* 정의 파일의 타입 확인을 건너뜀 */
    "esModuleInterop": true, /* [import * as fs from "fs] 문법을 사용하지 않고 [import fs from "fs"] 사용 */
    "forceConsistentCasingInFileNames": true, /* 동일 파일 참조에 대해 일관성 없는 대소문자를 비활성 */
    "strict": true,             /* 모든 엄격한 타입-체킹 옵션 활성화 여부 */
    "module": "esnext",         /* 모듈 코드 생성 명시 */
    "moduleResolution": "node", /* Node.js 스타일로 모듈 해석 */
    "isolatedModules": true,    /* 각 파일을 분리된 모듈로 트랜스파일 ('ts.transpileModule'과 비슷합니다) */
    "resolveJsonModule": true,  /* typeScript 모듈 내에서 json 모듈을 가져올수 있는 옵션 */
    "noEmit": true,             /* 결과 파일 내보낼지 여부, 코드를 컴파일하지 않고 타입 체크만 수행 */
    "jsx": "preserve",          /* .tsx 파일에서 JSX 문법 지원 */
    "sourceMap": true,          /* 해당하는 .map 파일 생성 */
    "declaration": true,        /* 해당하는 .d.ts 파일 생성 */
    "noUnusedLocals": true,     /* 사용하지 않는 지역 변수에 대한 오류 보고 */
    "noUnusedParameters": true, /* 사용하지 않는 매개 변수에 대한 오류 보고 */
    "noFallthroughCasesInSwitch": true, /* 스위치 문에 fallthrough 케이스에 대한 오류를 보고 */
    "rootDir": ".", 
    "baseUrl": ".",
    "paths": { /* baseUrl을 기준으로 관련된 위치에 모듈 이름의 경로 매핑 목록을 나열 */      
      "@src/*": ["src/*"],      
      "@pages/*": ["pages/*"],  
      "@styles/*": ["styles/*"] 
    },
    "experimentalDecorators": true, /* ES7 데코레이터에 대한 실험적인 지원을 사용하도록 활성화 */
    "emitDecoratorMetadata": true,  /* 소스에 데코레이터 선언에 대한 설계-타입 메타 데이터를 내보냄 */
  },
  "include": [ /* typescript가 타입 확인을 해야하는 위치 */
    "next-env.d.ts", "pages/**/*", "src/**/*", "styles/**/*" 
  ],
  "exclude": ["node_modules", "coverage"] /* typescript가 type 확인하지 말아야하는 위치 */
}

ESlint

npm i -D eslint
npx eslint --init

설정 목록

1. To check syntax, find problems, and enforce code style
2. javascript modules
3. react
4. yes
5. browser and node
6. use a popular guid
7. airbnb
8. javascript
9. yes

.eslintrc.js

module.exports = {
  env: { /* eslint globals 설정 */
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [ /* eslint configs 확장 */
    'plugin:react/recommended',
    'airbnb',
  ],
  parser: '@typescript-eslint/parser', /* code를 위한 parser */
  parserOptions: { /* parser를 지원하기 위한 js 옵션 */
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [ /* eslint를 사용하기 위한 추가 규칙을 정의하기 위한 플러그인 */
    'react',
    '@typescript-eslint',
  ],
  rules: { /* 명확한 규칙 정의 */
  },
};

prettier

npm i -D prettier

{
  "tabWidth": 2,
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}

eslint & prettier

npm i -D eslint-plugin-prettier eslint-config-prettier

extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'airbnb',
    'plugin:prettier/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:jsx-a11y/recommended',
  ],

• plugin:@typescript-eslint/recommended: eslint 추천 설정
• plugin:react/recommended: react 추천 설정
• plugin:react-hooks: react-hooks 추천 설정
• airbnb: airbnb eslint 설정
• plugin:prettier/recommended: prettier 추천 설정
• plugin:import/errors: import 에러를 위한 설정
• plugin:import/warnings: import 경고를 위한 설정
• plugin:import/typescript: typescript에서 import 사용을 위한 설정
• plugin:jsx-a11y/recommended: 접근성 테스트를 위한 설정

plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier', 'import', 'jsx-a11y'],

rules: {
    'prettier/prettier': 'error',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-filename-extension': 'off',
	'import/extensions': 'off',
  },

절대 경로 import 설정

npm i -D eslint-import-resolver-typescript

최종 eslint 파일

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'airbnb',
    'plugin:prettier/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
    'plugin:jsx-a11y/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier', 'import', 'jsx-a11y'],
  rules: {
    'prettier/prettier': 'error',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-filename-extension': 'off',
    'import/extensions': 'off',
    'import/no-unresolved': 'error',
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'object', 'index']],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['react'],
        'newlines-between': 'never',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
  },
  settings: {
    react: {
      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
    },
    'import/resolver': {
      // use <root>/tsconfig.json
      typescript: {
        project: '.',
      },
    },
  },
};

debugging 사용 설정

npm i cross-env

"dev": "cross-env NODE_OPTIONS='--inspect' next dev",

1. vscode의 debug 탭에서 launch.json 파일 생성
2. launch.json 파일 정의
3. 중단점을 사용하여 debugging 가능

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "attach",
        "name": "Attach Debugger",
        "skipFiles": ["<node_internals>/**"],
        "port": 9229
      }
    ]
}

jest

npm i -D jest @types/jest @testing-library/react @testing-library/jest-dom @testing-library/user-event @testing-library/dom

• @types/jest: jest 타입 정의
• @testing-library/react: react를 위한 테스트 라이브러리
• @testing-library/jest-dom: DOM 요소의 테스트를 위한 동반 라이브러리
• @testing-library/user-event: 브라우저 유저 이벤트 시뮬레이션을 위한 라이브러리
• @testing-library/dom: DOM 테스트 라이브러리

babel 설정

touch .babelrc

{
    "presets": ["next/babel"]
}

jest.setup.ts 설정

touch jest.setup.ts

import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';

.eslint.js 설정

 env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },

rules: {
    'prettier/prettier': 'error',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-filename-extension': 'off',
    'import/extensions': 'off',
    'import/no-unresolved': 'error',
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'object', 'index']],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['react'],
        'newlines-between': 'never',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
    'import/no-extraneous-dependencies': [
      'error',
      { devDependencies: ['jest.setup.ts', '**/*.test.tsx', '**/*.spec.tsx', '**/*.test.ts', '**/*.spec.ts'] },
    ],
  },

jest.config.js 생성

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/', '<rootDir>/coverage', '<rootDir>/dist'],
  moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/src', '<rootDir>/pages'],
  moduleNameMapper: {
    '@src/(.*)': '<rootDir>/src/$1',
    '@pages/(.*)': '<rootDir>/pages/$1',
    '@styles/(.*)': '<rootDir>/styles/$1',
  },
  coverageDirectory: 'coverage',
  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', 'pages/**/*.{js,jsx,ts,tsx}'], 
  coverageThreshold: {
    global: {
      branches: 0,
      functions: 0,
      lines: 0,
      statements: 0,
    },
  },
};

• setupFilesAfterEnv: 환경 설정 후 실행 할 설정 파일
• testPathIgnorePatterns: 테스트 무시 경로
• moduleDirectories: 테스트 모듈 위치 jest에게 제공
• moduleNameMapper: 절대 경로를 위한 매핑
• coverageDirectory: what directory to output coverage we will set up next
• collectCoverageFrom: 테스트를 실행 할 경로 범위
• coverageThreshold: 테스트 목표 값 설정

CSS & SASS 테스트 사용 설정

npm i -D identity-obj-proxy

jest.config.js 설정

moduleNameMapper: {
    '\\.(scss|sass|css)$': 'identity-obj-proxy',
  },