Convention

Style

1. styled-components 컴포넌트 네이밍

S-dot 네이밍을 활용

• 스타일 컴포넌트를 리액트 컴포넌트와 구분

html 태그에 따른 네이밍 규칙

• Layout: 최상위 레이아웃 설정 컴포넌트

• Container: 여러개 요소를 감싸는 컴포넌트

• Wrapper: 1개의 요소를 감싸는 컴포넌트

• Box: div 태그 컴포넌트의 권장 네이밍

• List: ul 태그 컴포넌트의 권장 네이밍

• Item: li 태그, 반복되는 컴포넌트의 권장 네이밍, 반복되는 컴포넌트

• 모든 컴포넌트의 이름에는 기능을 암시하는 단어를 추가

styled-components 적용하여 스타일링한다.

2. CSS 속성 순서

3. rem vs px

• 폰트 관련(font-size, line-height 등): rem
• 나머지: px (px 단위는 미세한 조정이 필요한 경우를 제외하고 가능하면 8의 배수로 맞추기: 8px, 16px, 24px, …)

rem + px 계산하기

예) 텍스트가 포함된 컴포넌트의 height를 계산하는 방법

→ line-height(rem) + 위아래 padding(px) + 위아래 border(px): calc(rem + px)

⚠️ 주의: font-size가 1rem이라고 해서 해당 텍스트의 높이가 1rem인 것은 아닙니다. line-height가 적용된 높이가 해당 텍스트의 높이가 됩니다. (나는 line-height 설정 안 했는데? 그렇다면 어디 상위 CSS에서 상속받아서 적용되고 있을 겁니다.) 따라서 폰트 사이즈를 고려해서 높이를 설정하고 싶다면 line-height: 1rem;으로 설정해준다면 이 텍스트가 가지는 높이가 1rem이라는 것을 보장할 수 있습니다.

🔗 rem 관련 참고하면 좋은 글

---

Commit Convention

1. Commit 메시지 구조

type: subject

body

footer

2. Commit Type

<타입>: <제목> 형식으로 작성하며 제목은 최대 50글자 정도로만 입력, 마침표 금지

• feat: 새로운 기능 추가
• fix: 버그 수정
• docs: 문서 수정
• test: 테스트 코드 추가
• refactor: 리팩토링
• style: 코드 의미에 영향을 주지 않는 변경사항
• chore: 빌드 부분 혹은 패키지 매니저 수정사항

3. Commit Body

본문(추가 설명)을 아랫줄에 작성

4. Commit Footer

꼬릿말(footer)을 아랫줄에 작성 (관련된 이슈 번호 등 추가)