Next.js 초기설정 파일별 용어정리
node i -D axe-core
node i -D typescript ts-node @types/node @types/react @types/react-dom
{
"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 확인하지 말아야하는 위치 */
}
npm i -D eslint
npx eslint --init
설정 목록
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: { /* 명확한 규칙 정의 */
},
};
npm i -D prettier
{
"tabWidth": 2,
"printWidth": 120,
"singleQuote": true,
"trailingComma": "es5",
"semi": true
}
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',
],
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',
},
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: '.',
},
},
},
};
npm i cross-env
"dev": "cross-env NODE_OPTIONS='--inspect' next dev",
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach Debugger",
"skipFiles": ["<node_internals>/**"],
"port": 9229
}
]
}
npm i -D jest @types/jest @testing-library/react @testing-library/jest-dom @testing-library/user-event @testing-library/dom
touch .babelrc
{
"presets": ["next/babel"]
}
touch jest.setup.ts
import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';
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'] },
],
},
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,
},
},
};
npm i -D identity-obj-proxy
moduleNameMapper: {
'\\.(scss|sass|css)$': 'identity-obj-proxy',
},