Code Convention

html

• 모든 html 태그는 시맨틱하게 작성한다.

url 규칙

• 단어 띄어쓰기는 하이픈으로 대체한다.

  👉 /leagueoflegends ❌ / /league-of-legends ⭕️

<Image> vs <img>

• svg는 <img>태그를 사용하고, png는 <Image> 태그를 사용한다.

밀리세컨드 시간 값 쓸 때의 순서

• 밀리세컨드 * 초 * 분 순으로 적는다.

  👉 25분을 밀리세컨드로 나타낸다면, 25 * 60 * 1000 ❌ / 1000 * 60 * 25 ⭕️

import 구문

• 같은 폴더 내에 있는 scss 파일을 제외하고는, 절대경로를 사용한다.

함수명, 변수명

• 불리언 변수명은 is-로 시작한다.
• 사용자 정의 함수는 handle-로 시작한다.
• props로 받은 함수는 on-으로 시작한다.
• 익명 함수의 사용을 최소화한다.
• 상수는 영문 대문자 스네이크 케이스를 사용한다.
• 명확하고 이해하기 쉬운 변수명으로 작성한다.

svg png 경로

• public에서 가져오는 이미지 파일 경로와 alt는 constants 폴더에서 관리한다.

• 변수명은 축약하지 않고, 전체단어를 포함해서 작성한다.

  👉 pw ❌ / password ⭕️

  👉 error-msg ❌ / error-message ⭕️

  👉 idx ❌ / index ⭕️

• 훅, 함수, 변수를 명확하게 구분할 수 있는 이름으로 작성한다.

  👉 훅: useAxios, useForm

  👉 유틸 함수: getDateDiff, getFormatDate

  👉 변수: folderData, filteredCardList

  👉 핸들러 (event) , 에러 (error)

• 매직넘버 사용을 최소화한다. (constants 폴더 안에 변수로 지정해서 사용 / z-index 등)

• console.log(), 의미없는 주석은 삭제한다.

• 한 줄 조건문일 경우에도 {} 중괄호 안에 작성한다.

  👉 if (조건) {처리}

• 한 줄짜리 함수는 중괄호를 생략한다.

  👉 const hasCount = (item) => item.count !== undefined;

  👉 const handleChangeCount = (count) => setCount(count);

• handler를 비롯한 모든 함수들 사이에는 줄바꿈이 있어야 한다.

• use훅 → 커스텀훅 → 변수 → 함수 순으로 사용하고, 사이를 한줄씩 띄운다.

• 커스텀 훅에서 한 줄인 애들은 붙여쓰고, 파라미터를 많이 주어야 하는 긴 애들은 위아래 줄바꿈 해야한다.

SCSS

• @include로 변수 쓸 때 싱글쿼트를 사용하지 않는다.

  👉 &.btn-sm { @include text-style(14, $gray70, normal) } ⭕️

  👉 &.btn-sm { @include text-style(14, $gray70, 'normal') } ❌

• SCSS 파일은 대문자로 시작한다.

• rem 단위로 작성한다. (blur, break point 제외)

• 아래 명령어 git에서 실행하면 파일 이름 대문자/소문자 변경도 stage에 반영된다.

git config core.ignorecase false

SCSS property 순서

1. @extend
2. @include
3. 이외에는 stylelint-config-clean-order의 정렬 순서를 따른다.

classname

• classname은 classnames 라이브러리 문법으로 작성한다.