Home

1.코드 컨벤션

Extensions

ESLint

{
  "extends": ["airbnb", "airbnb/hooks", "airbnb-typescript", "prettier"]
}

Prettier

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all"
}

Rule ex) spread 연산 사용 및 구조 분해 할당

2.디렉토리 구조

/app : 페이지 라우팅에 실제로 사용되는 디렉터리
/components : 컴포넌트 관리
/api : api 호출하는 로직
/hooks : 커스텀 hook
/types : interface정의
/styles : css 파일
/pages: 라우팅 하는 페이지
my-react-app/
 
  ├── src/
  │   |     
  │   ├── components/
  │   │   ├── Header/
  │   │   │   ├── Header.js
  │   │   │   ├── Header.css (optional)
  │   │   │   └── index.js (optional, for exporting multiple components)
  │   │   └── ...other reusable components
  │   ├── pages/
  │   │   ├── Home/
  │   │   │   ├── Home.js
  │   │   │   ├── Home.css (optional)
  │   │   │   └── index.js (optional, for exporting multiple pages)
  │   │   └── ...라우팅 하는 페이지
  │   ├── api/
  │   │   └── ...api 호출
  │   ├── hooks/
  │   │   └── ...커스텀 훅
  │   ├── App.js
  │   ├── index.js
  │   └── types/  ...interface 정의
  |   └── styles/  ...styles 정의
  ├── node_modules/
  ├── package.json
  ├── package-lock.json (or yarn.lock if using Yarn)
  └── ...other configuration files (e.g., .babelrc, .eslintrc, etc.)

3. 스킬

React, 
React-Router-Dom,
TypeScript,
Axios,
Recoil,
Material-UI,
Socket-io-client

4.역할분담

taeheonk :

daskim :

hyunjung :