개발환경세팅 & 팀규칙추가_20210511_Day13

금일 진행 사항

- 개발환경 세팅(Eslint)

- 팀규칙 추가

---

전역 스타일 설정

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  /* box sizing속성은 상속이 되지 않음.
  페이지 전체에 border box를 적용하기 위해 */
  box-sizing: inherit;
}
/* root 글꼴 크기 정의
유저의 글꼴 정의 적용 & 개발 편의상 10px -> 62.5% */
html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
}

단위

• rem, %, px(5px 이하), vw, vh

반응형 고려 사항

• 반응형 이미지 구현: 이미지 div 크기에 맞게 확대 및 축소
• 글자 크기: 반응형(viewport height)에 따라 설정

BAD

• 특정 device에 너비에 따라 작업함.
• 특정 장치를 중단점으로 잡는다면 추후 유지보수가 어려울수도 있음

GOOD

• 우리가 가장 많이 사용하는 모든 장치 너비를 살펴본다.

PERFECT

• 모바일 혹은 데스크탑 우선으로 디자인을 하고 크기를 조정해본다.
• 크기를 조정할 때 디자인이 이상하다면 미디어 쿼리를 작성한다.
• 이는 device를 고려하지 않는 방법임.

600px 이하 PHONEONLY
600px ~ 900px TABLET PORTRAIT(세로모드)
900px ~ 1200px TABLET LANDSCAPE(가로모드)
1200px ~ DESKTOP

변수명

• camelCase

Styled Components Theme(Global style)

• https://wonit.tistory.com/366

React Component Naming Rule(Ref)

• https://www.educative.io/blog/best-practices-react-developer

Atomic Design Style

: https://github.com/connect-foundation/2019-12

 

---

도움 받은 곳

• eslint: https://www.howdy-mj.me/typescript/cra-typescript-eslint-prettier/
• styled components
  • styled-tools: https://www.npmjs.com/package/styled-tools