폴더 구조 및 변수명 협의

폴더 구조

• 📂 public
• 📂 assets
• svg 와 같은 정적 자산
• favicon

• 📂 src
• 📂 pages
• 라우터로 이동하는 컴포넌트를 page 라고 부른다
• 📂 components



• 📂 shared
• 여러 페이지에서 재사용될 가능성이 매우 높은 컴포넌트
• text~
• button~
• card~
• input~
• 📂 layouts
• 전체 페이지에 걸쳐 사용되는 레이아웃 컴포넌트
• layout~
• header~
• navbar~
• 📂 store
• redux toolkit 으로 만든 store
• API 에서 가져온 데이터 처리로직
• 📂 hooks
• 범용으로 사용할 수 있는 hook
• ex) useForm()
• 📂 api
• API 인터페이스 - hook에서만 호출
• 📂 types
• 필요한 타입 선언
• component props 는 해당 컴포넌트 파일 최상단
• 📂 styles
• 전역 스타일만 위치
• global, dark theme
• 📂 utils
• 다들 생각하는 “그거”
 

네이밍, 변수명

const API_END_POINT = ‘https://’

component prop type

interface ComponentProps extends HTMLAttributes<HTMLDivElement> {

}

emotion tag name

const ButtonStyled = styled.button``;
=> 가장 루트 태그만.
=> 내부에 또 styled 가 필요하면 재량껏...

type name

type Hello = {};

enum 필요 시 → constants 폴더에

const Hello = {
} as const;

component 네이밍

styled 관련 규칙

• emotion 사용

• emotion 통일

const AvatarStyled = styled(Avatar)<{ width: number; height: number }>(
  ({ width, height }) => ({
    width: `${width}px`,
    height: `${height}px`,
  }),
);

• styled 위치는 컴포넌트 아래, export default 위

Page 컴포넌트 이름

hook 위치

boolean타입의 props는 값을 넣어서 사용하기

• <Box isSeen={true}/> ✅

• <Box isSeen/> ❌