1. 설계 계획

• 공통 컴포넌트 및 로직을 관리할 수 있는가
• 유지보수에 용이한가
• 팀원 리뷰 요청 시 빠르게 컴포넌트를 찾을 수 있는가
• 확장성과 재사용성을 향상시킬 수 있는 가

2. 폴더 구조

💡 파일 유형에 의한 분류

├── public
│   ├── fonts
│   ├── icons
│   └── images
│   
└── src
    ├── @types
    ├── common
    ├── components
    ├── config
    ├── constant
    ├── hooks
    ├── pages
    ├── styles
    └── utils

📁 public

assets 관리

📁 types

타입 관리

• user.ts
• theme.ts
• wine.ts

📁 common

공용 컴포넌트 관리 (파일명은 대문자로 시작)

• Error.tsx
• Loading.tsx
• Route.tsx
• Button.tsx
• Tag.tsx

📁 components

컴포넌트 관리 (페이지별로 폴더를 생성, 각 페이지에서 사용하는 컴포넌트 분류)

• user/Profile.tsx
• user/Setting.tsx
• main/CardContainer.tsx
• main/Card.tsx
• main/Notice.tsx

📁 constants

공통 상수 관리 (api, 미디어 쿼리, 색상)

• API ENDPOINT

  export const API_ENDPOINT = http://localhost:3000"

• MEDIA QUERY

  export const MEDIA_QUERY_END_POINT = {
    MOBILE: "640px",
    TABLET: "1280px",
    DESKTOP: "1920px",
    LARGE: "2560px",
  };

• THEME

  export const lightTheme = {
      BACKGROUND: "#fdfdff",
      MAIN_FONT: "#202124",
      SUB_FONT: "#30373e",
      BUTTON_MAIN: "#8080b8",
      BUTTON_SUB: "#b6b1e9",
      WARNING_MAIN: "#ef5350",
      WARNING_SUB: "#ff867c",
  }

📁 config

옵션 관리

export const EDITOR_CONFIG = {...}

📁 hooks

공통 hooks 관리 (파일명은 use로 시작)

• useData.ts
• useDarkMode.ts
• useUser.ts

📁 pages

router 페이지 관리 (nextJS)

• sign-in.tsx
• sign-up.tsx
• post/[id].tsx

📁 styles

style 관리

• globals.css

📁 utils

로직(순수 함수) 관리

• fetcher.tsx
• getDate.tsx

3. 규칙

의미 있는 변수명 사용

• 의미 있고 직관적인 변수명 사용
  ex) pfImgNm(x), profileImage(o)
• 같은 유형의 변수에 같은 어휘 사용
  ex)handleUserData, getUserSetting(x)

  ex)getUser(o)

단일 책임 원칙

• 하나의 컴포넌트는 한 가지 일만 한다.

중복 배제 원칙

• useState의 최소화
  • 부모로부터 props가 전달되는가?
  • 시간이 지나면 변하지 않는가?
  • 컴포넌트 안의 다른 state와 props로 계산이 가능한가?

Import 순서

• import 는 외부 패키지 부터 내부 패키지 순
• 멀리 있는 컴포넌트부터 가까이 있는 컴포넌트 순

단축평가 사용

• 삼항연산자를 사용하기 전에 && , || 적용 체크해보기

스타일 정의

• styled-component, emotionJS를 쓸 경우 컴포넌트 상단이 아니라 하단에서 스타일 정의