[템플릿]
타입 스크립트 기반 개발을 위해서 다음과 같이 템플릿 지정
yarn create react-app 프로젝트명 --template typescript
[코딩 서식]
2개의 플러그인을 설치
Prettier, ESLint
Prettier는 code formatter로 사용자의 코딩 스타일 설정이 가능
예) 탭을 눌렀을 때 깊이를 2로 설정
ESLint는 linter로 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출
예) 사용 되지 않은 변수, 잘못 입력된 공백 또는 데이터 등을 검출
[ESLint 설정]
다음 명령어로 설정 커맨드 진행 가능
npx eslint --init
입력후 나오는 여러개의 선택지 중 다음 질문에 무조건 yes를 해야함(다른건 알아서)
Does your project use TypeScript? (y/N)
The config that you've selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
Would you like to install them now with npm? (Y/n)
다음은 질문에서 Y 선택 시 자동 설치되는 부가 플러그인들
eslint-config-airbnb-base: 리액트를 제외 적용 규칙
eslint-config-airbnb: 리액트 관련 적용 규칙
eslint-plugin-react: React 규칙이 들어있는 플러그인
eslint-plugin-react-hooks: React Hook 규칙이 들어있는 플러그인
eslint-plugin-jsx-a11y: JSX 요소의 접근성 규칙에 대한 정적 검사 플러그인
eslint-plugin-import: ES6의 import, export 구문을 지원하는 플러그인
eslint-plugin-prettier: ESLint를 Prettier와 혼용하기 위한 플러그인
eslint-config-prettier: Prettier 규칙을 ESLint에 통합하여 Prettier와 상충되는 ESLint 설정을 비활성화
프로젝트에 추가 된 eslintrc.json파일을 다음과 같이 수정
module.exports = {
parser: '@typescript-eslint/parser', // 각 코드를 검사할 파서를 등록
plugins: ['@typescript-eslint', 'prettier'],
extends: [
'airbnb', // or airbnb-base
'plugin:react/recommended',
'plugin:jsx-a11y/recommended', // 설치 한경우
'plugin:import/errors', // 설치한 경우
'plugin:import/warnings', // 설치한 경우
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
rules: {
'linebreak-style': 0,
'import/prefer-default-export': 0,
'import/extensions': 0,
'no-use-before-define': 0,
'import/no-unresolved': 0,
'react/react-in-jsx-scope': 0,
'import/no-extraneous-dependencies': 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
'no-shadow': 0,
'react/prop-types': 0,
'react/jsx-filename-extension': [
2,
{ extensions: ['.js', '.jsx', '.ts', '.tsx'] },
],
'jsx-a11y/no-noninteractive-element-interactions': 0,
'@typescript-eslint/explicit-module-boundary-types': 0,
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
};프로젝트에 .prettierrc 파일을 추가하고 내용을 다음과 같이 작성
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "always",
"orderedImports": true,
"bracketSpacing": true,
"jsxBracketSameLine": false
}prettier 플러그인 설정에서 config 파일을 open해 전역 설정을 다음과 같이 수정
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"window.zoomLevel": -1,
"editor.formatOnSave": true,
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[javascriptreact]":{ "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}[프로젝트에 적용 될 디자인 패턴]
Atomic Design Pattern
참고용 github
https://github.com/diegohaz/arc
[패키지]
react-router-dom : 리엑트 라우팅을 위해 사용
redux: 전역 상태를 관리하기 위한 패키지
- 단반향 데이터 바인딩 디자인 패턴 도입
- 효율적인 디버깅을 하기 위해
- 리덕스 스토어를 통해 상태 관리를 외부에서 접근
react-redux: redux를 react에 맞춰서 좀더 효율적으로 사용하기 위해 도입 - store를 App이 아닌 Provider에게 할당
- state 할당을 효율적으로 할 수 있음
- dispatch 함수를 붙여 줄 수 있음
- 전체적으로 redux를 좀더 쉽게 사용 가능
@reduxjs/toolkit: redux를 좀더 쉽게 사용하기 위해 도입
- 리덕스 스토어 환경 설정을 좀더 단순하게
- 보일러 플레이트를 간소화
- 리덕스 미들웨어를 사용하기 위해
recoil: 리덕스의 단점을 보완해 리덕스를 대체해 전역 관리를 하기 위해 도입(리덕스
는 학습용으로 도입)
react-query: API 통신과 값 캐싱을 위해 도입
리덕스는 toolkit 사용시 API 요청을 미들웨어에서 하도록 강제하기에 구조 고민이 필요 없음.
recoil은 미들웨어 개념이 없기에 어디서 처리를 할지 구조적으로 고민을 해야함
리덕스로 정보를 다 접근하는 형식 대신, 일부 중요하지 않지만 다시 접근할 가능성이 있는 데이터의 경우 react-query를 통해 접근해 캐싱을 하면 다시 조회시 지연없이 조회 가능
[미들웨어]
redux-logger: 액션을 타고 일어난 리듀서 동작을 log로 보여줌
redux-thunk: 액션객체가 아닌 함수를 디스패치 할 수 있게 해줌
redux-devtools-extension: 크롬 개발자 도구에서 리액트 동작 상태를 확인 가능
redux-devtools-extension 사용을 위해 크롬 확장 프로그램에서 Redux DevTools 설치 필요
[ui]
@mui/material @mui/icons-material @emotion/react @emotion/styled
styled-components
[테스팅]
@testing-library/react
storybook
