• .eslintrc.js 설정

extends: [
    'eslint:recommended', //JS 기본 규칙 활성화
    'plugin:react/recommended', //React를 위한 규칙 활성화
    'plugin:react/jsx-runtime', //JSX Runtime 관련 규칙 활성화
    'prettier', //Prettier와 충돌 부분 해결. Prettier는 스타일, ESLint는 코드 품질 검사
  ],

• .prettierrc.json 설정

{
  "printWidth": 80, //코드라인 최대 너비, 줄바꿈 자동
  "trailingComma": "es5", //객체 및 배열 리터럴 마지막 요소 끝에 쉼표 추가
  "semi": true, //문장 끝에 세미콜론 추가
  "tabWidth": 2, //탭 = 2칸 공백
  "singleQuote": true //문자열은 작은따옴표로 감싼다
}

• 텍스트 단위

  • rem으로 통일한다. (1rem = 10px (62.5%))
  • 텍스트 외 이미지, border-radius 등은 px 고정값으로 설정한다.

  //StyleGlobal.js
  html,
  body {
    font-size: 62.5%; //1rem=10px
  }
  

• 주석

  • 한줄은 // 두줄이상은 /* */ 를 사용한다

• style 코드 순서

  • 작성 순서는 아래를 따른다.

  순서	속성	의미
  1	display	표시
  2	overflow	넘침
  3	float	흐름
  4	position	위치
  5	z-index	정렬
  6	width & height	크기
  7	margin & padding(그룹)	간격
  8	border(그룹)	보더
  9	background(그룹)	배경
  10	font(그룹)	폰트
  11	기타	기타 속성은 순서 무관