npx create-react-app@latest 'Project Name' --template typescript
npx install-peerdeps --dev eslint-config-airbnb
eslint-config-airbnb 패키지는 airbnb ESLint 규칙을 제공하고 아래 6개의 패키지들을 필수로 제공한다.
module.exports = {
env: {
browser: true,
commonjs: true,
},
extends: [
'airbnb',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint'],
rules: {
'@typescript-eslint/explicit-module-boundary-types': 'off',
'import/prefer-default-export': 0,
'prettier/prettier': 0,
'import/extensions': 0,
'no-use-before-define': 0,
'import/no-unresolved': 0,
'import/no-extraneous-dependencies': 0,
'no-shadow': 0,
'react/prop-types': 0,
'react/jsx-filename-extension': [
2,
{ extensions: ['.js', '.jsx', '.ts', '.tsx'] },
],
'jsx-a11y/no-noninteractive-element-interactions': 0,
},
};
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
eslint-config-prettier
eslint-plugin-prettier
module.exports = {
singleQuote: true,
semi: true,
useTabs: false,
tabWidth: 2,
trailingComma: 'all',
printWidth: 80,
arrowParens: 'avoid',
endOfLine: 'auto',
};
npm i styled-components
- styled-components
npm i -D @types/styled-components- @types/styled-components
styled-components, @types/styled-components 두 개 다 설치해 줘야 사용할 수 있음
npm i @mui/material @emotion/react @emotion/styled @mui/styled-engine-sc
Material UI에서 Styled-Components를 사용하려면 emotion/react, @emotion/styled도 추가로 설치해줘야 한다.
이유는 기본적으로 @mui/styled-engine이 emotion 래퍼이기 때문에 스타일드 컴포넌트를 사용하는 경우 @mui/styled-engine-sc를 사용하는데요, 이러면 @mui/material 디펜던시로 @mui/styled-engine를 가지고 있기 때문에 @emotion/react 즉 이모션 설치가 필요하다고 한다.
{
"dependencies": {
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
},
"resolutions": {
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
},
}
"paths": {
"@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
}
ESLint, Prettier 1
ESLint, Prettier 2
ESLint, Prettier 3
ESLint, Prettier 4
Material UI install
Material UI styled-engine
Styled-Components에 TypeScript 적용
Material UI v5 변경점
Styled-Components, Materi UI 사용하기