코딩 컨벤션

폴더 구조

기존의 컴포넌트 구조를 따르나, components 폴더 내에서 feature와 common으로 나눈다.

common

• 다른 여러 곳에서 사용이 가능한 컴포넌트를 가진다.
• ui컴포넌트, 레이아웃을 다루는 컴포넌트, 아이콘 등
• 각각은 역할에 맞추어 폴더를 나누어 정리

feature

• 페이지 단위로 폴더를 나눈다. 해당 폴더 하위에는 section 단위로 나눌 것.
• section은 특정 역할을 가지는 독립적인 컴포넌트이다. 동작 자체는 하나가 아닐 수 있다. 다만 다른 section 컴포넌트에 영향을 주지 않는 독립적인 컴포넌트를 이야기 한다.
• section 내에서는 component 단위로 나눈다. 컴포넌트는 역할에 따라서 ui만 가지거나, 내부 데이터 및 로직을 가지거나, 도메인을 가질 수 있다. 이들을 폴더로 분리하도록 한다.

컴포넌트

분리 기준

• page.tsx
  • 여러 section 컴포넌트로 이루어진다.
  • 무조건 서버 컴포넌트로 구성한다.
• layout.tsx
  • 해당 도메인에 필요한 컴포넌트 혹은 전체적인 레이아웃 컴포넌트들로 이루어진다.
  • 무조건 서버 컴포넌트로 구성한다.
• 타 컴포넌트
  • 기본적으로 headless pattern 기반으로 추상화를 한다.
  • 외부 데이터(도메인)와 내부 데이터 및 ui 컴포넌트를 분리한다.
  • 이후 필요에 따라 내부 데이터와 ui컴포넌트를 분리한다.

데이터(혹은 상수)

• 상수 데이터의 기본적으로 사용하는 곳에 가깝게 두도록 한다.
• 다만 여러곳에서 사용하게 된다면 해당 데이터를 constants로 빼서 관리한다.