Convention

✔️ Basic

기본 룰

• airbnb style guide (eslint)를 따르며, 개발하면서 필요한 옵션만 따른다.
• 파일 하나당 하나의 컴포넌트만 정의한다.
• 모든 컴포넌트는 기본적으로 함수형 컴포넌트를 사용한다.
• 예시

function Listing({ hello }) {
  return <div>{hello}</div>;
}

네이밍

• 컴포넌트의 확장자는 항상 .tsx를 사용한다.
• jsx를 사용하지 않는 파일의 확장자는 .ts를 사용한다.
• 컴포넌트의 디렉토리 명은 항상 파스칼 표기법을 사용한다. (ReservationCard/)
• 컴포넌트를 제외한 다른 파일들은 항상 카멜 표기법을 사용한다. (customHooks.ts)
• 디렉토리 명과 컴포넌트의 이름을 일치시킨다.

✔️ 디렉토리 구조

전체 디렉토리

src/
  api (fetch)
  assets (이미지, 아이콘 등 정적 자원)
  components (모든 컴포넌트)
  layout (컴포넌트들을 감싸 페이지의 레이아웃을 정의하는 곳)
  pages (레이아웃을 가져와 최종적으로 뷰로 보여지는 곳)
  helpers (문자열 유팅, 배열 유틸 등)
  hooks (비즈니스 로직을 위한 커스텀 훅들(dispatch to redux, get data))
  models (타입스크립트 인터페이스)
  store (리덕스 store)
  slices (createSlice for redux toolkit)

components

src/
  components/
        Button/
          index.tsx (component)
          style.ts (styled-components)
        Card/
          index.tsx
          style.ts

• 재사용이 수월하게 가장 작은 단위의 엘리먼트만 정의한다.
• 각 요소의 세부적인 스타일을 정의한다.
  • ex: 버튼크기, 버튼색상 등

layout

src/
  layout/
      Header/
        index.tsx
        styled.ts
      Footer/
        index.tsx
        styled.ts

• 컴포넌트들이 모여 하나의 섹션을 이룬다.
• 개인적인 생각으론 레이아웃 단계는 재사용이 쉽지 않아 이부분에서 state, props를 사용하면 어떨까 한다.
• 섹션 단위의 스타일을 정의한다.
  • ex: 헤더, 푸터, 글 작성 폼 등

pages

src/
  pages/
      Home/
        index.tsx
        styled.ts
      About/
        index.tsx
        styled.ts

• 레이아웃들이 모여 하나의 페이지를 이룬다.
• 페이지 단위의 스타일을 정의한다.
  • ex: 배경색, 크기 등