파일명

• 파일 안에서 import 할때

  • react → react-router-dom → component → 일반함수 → img 순으로 불러온다.

  • 일반함수는 camelCase로 작성하고, 동사 + 명사로 구성한다. ex) getUserInformation

  • 컴포넌트

    • PascalCase로 작성한다 ex) HeaderSection.js
    • 파일명과 일치시킨다.
    • 최소 단위로 사용하고 export default해서 사용한다.

  • styled-component

    • 컴포넌트 마다 만들고 와일드 카드(*)를 사용해서 불러온다. ex) import * as Styled from~ 사용시 Styled.Button 으로 사용되고 여기서 Button은 styled component라고 이해한다.

    const Button = styled.button
    

  • 이미지, 아이콘

    • 파일명은 kebab으로 작성한다. ex) selected-star.png
    • import 시 camelcase로 작성하고 약어사용이 가능하다. ex) import selectedStarImg from './selected-star.png'

변수명 : camelCase로 작성한다.

• 상수는 대문자 스네이크 표기법을 사용한다. ex) CODE_IT_PROJECT = ~
• state
  • boolean으로 사용되는경우 접두사로 is, has, should를 사용해준다. ex) isLoading
  • state는 명확한 단어로 사용하고 약어를 사용하지 않는다. ex) items(o) → it(x)
• event handeler
  • 이벤트 핸들러의 경우 접두사로 handle을 붙여준다. ex) function handleClick()
• 특수문자는 가급적 사용하지 않는다.

Prettier, Lint 컨벤션 정하기

https://www.daleseo.com/js-prettier-config/

https://tyoon9781.tistory.com/entry/vscode-React-Prettier-ESLint-setting