✍🏻 code convention

1. styled-components

• 자동 정렬
  (참고) 현업에서 사용중인 CSS 작성 순서와 쉽게 자동 정렬하기(VScode 확장프로그램)

• 모질라에서 제안한 CSS 속성 기술 순서 따르기
  (참고) CSS 선언순서

• 코드 하단에 작성

• 스타일.ts 따로 빼지 않고 컴포넌트.tsx 한 파일에 같이 작성

• px 단위 대신 rem 단위 사용 (10px === 1rem)

• 항상 맨 앞에 St 붙여주기

• 최상단 태그 이름은  St[컴포넌트명]

  function Home() {
    return (
      <StHome>
      ...
      </StHome>
    );
  }

• container와 wrapper 구분해서 사용하기

  container는 주로 여러 개의 요소를 감싸는 div이고, wrapper는 단일 요소의 레이아웃을 위한 div를 말한다.

• (자율) 가독성과 추후 확장을 고려하여 css 속성 간 개행을 생활화

• (자율) 네이밍 참고

  • div : '컴포넌트명'Box
  • section : '컴포넌트명'Section
  • ul : '컴포넌트명'List
  • li : '컴포넌트명'Item
  • p : '컴포넌트명'Paragraph
  • span : '컴포넌트명'Span

2. 폴더명

• components 폴더 아래에서 소문자 폴더명 사용
  • page명(home, learn, review)
  • 두 단어 이상이면 camel case 사용

3. Event handler

• Function Names

  on~~ = {handle~~}

  <MyComponent onClick={handleClick} />

• 좀 더 복잡한 네이밍

  on특징~~ = {handle특징~~}

  <MyComponent
    onAlertClick={handleAlertClick}
    onFormSubmit={handleFormSubmit}
  />

• 상황에 맞게 2가지 방식 혼용

4. 변수

• camel case 사용 (ex. camelCase)
• 변수는 var 사용 금지, 그냥 const !
• 예외 : 상수는 무조건 대문자, 언더바 조합 → EXAMPLE_NAME
• 배열과 관련된 변수명은 __List (s 사용 금지)
• 변수 네이밍 아래 참고

  buttonSearch
  searchButton ✅
  btnSearch
  searchBtn

5. 함수

• camel case 사용 (ex. camelCase)
• 함수명은 동사로 시작
• 화살표 함수 사용

  const 함수명 = () => {}

6. 컴포넌트

• pascal case 사용 (ex. PascalCase)
• 아래 형식대로 사용

  interface 컴포넌트명Props
    
  function 컴포넌트명(props: 컴포넌트명Props) {
    const { 변수1, 변수2, 변수3 } = props;
      return (
    )
  }
    
  export default 컴포넌트명;
    
  // styled-components

7. 이미지

피그마에서 svg를 export해서 src/assets/icons 혹은 src/assets/images에 저장하고, src/assets/icons/index.ts와 src/assets/images/index.ts에 아래처럼 추가해 사용

// 아이콘 예시
export { default as icSample } from './icons/ic_sample.svg';
export { ReactComponent as IcSetting } from './ic_setting.svg';

// 이미지 예시
export { default as imgSample } from './images/img_sample.svg';
export { ReactComponent as ImgNewLink } from './img_new_link.svg';

8. 주석

릴리즈 시, 주석 제거 예정 코드 바로 위에 주석 달기

// 한 줄짜리
/* 여러 줄 */