ES Lint - airbnb
상기 의견
'implicit-arrow-linebreak': 0, // 화살표 함수 몸체의 위치적용
'function-paren-newline': 0, // 함수 괄호 안에 일관된 줄 바꿈 적용
'jsx-a11y/no-static-element-interactions': 0, // 클릭 핸들러가 있는 비대화형, 가시적 요소가 역할 속성을 사용하도록 강제 합니다.
'jsx-a11y/click-events-have-key-events': 0, // 클릭 가능한 비대화형 요소에 최소한 하나의 키보드 이벤트 리스너가 있어야 합니다.
지은 의견
종관 의견
- react/function-component-definition : 0 // 리액트 컴포넌트는 함수 선언식 → 화살표 함수로 합시다!
윤성 의견
"consistent-return": 0,
"react/jsx-no-useless-fragment": 0,
"react/jsx-props-no-spreading": 0, //
"implicit-arrow-linebreak": 0, // 화살표 함수, ⇒ 다음줄에 본문에 넣는 방법
"no-useless-return": 0, // if 에서 값없이 리턴 하는 문장
"no-else-return": 0 // else 에서 리턴 하는 문장
Prettier
디렉토리 구조 - 정/오 합의를 보고 해보면 된다고 생각을해서
종관 - 제가 했던 프로젝트 폴더 구조… 레퍼런스, 의견 하나씩 달아주시면 감사드리겠습니다.
종관 의견
루트 src폴더
- config
- resources
- images
- data (json, txt파일, 더미 데이터 등)
- utils : hook을 사용하지 않는, 재사용되는 함수 또는 변수
- ex. colorUtils, storage, iconUtils, dateUtils…
- modules : redux를 쓸 경우..?
- hooks: customHooks
- index.js 로 관리하는 것은 어떤가요?
- pages
- components
- base
- ex. BaseForm
- ex. BaseButton
- ex. BaseProfileImage
- index.js?
- FEAT별로..!
- ex. PostComponent
- index.js :
import * as S from ‘./styles.js’ - styles.js : styled components
- ex. NavigationBar
폴더구조
기타 컨벤션
- 세미콜론: true
- 화살표함수? vs function vs class
- var 는 사용하지 않는다.
- 호이스팅 원천 배제
위로 빼거나, 헬퍼함수는 따로 파일로 빼는 것.
index.js 와 style.js로 나눠서 파일로 빼기.
- 변수명 - 카멜 케이스
- 폴더명, 파일명 파스칼케이스? LoginPage, SignUpPage
- 절대경로(필요한 부분은 해줘야한다. 개발 환경 세팅과 연동…)와 상대경로 - 나중에..?
- 주석 컨벤션 : TODO, TOBEREMOVED…
- 변수명 적당히 짧게? vs 최대한 명시적으로?
- is, get, … 접두 접미
- 이벤트 헨들러는 handle+aptjemaud(메서드명)?