알고바로 프로젝트 컨벤션(FE)

📋 목차

🚩 기술 스택

구분	기술	비고
번들러	Vite	`CRA vs Vite`

CRA는 무겁고 느린 단점이 있다.
가볍고 추후 배포 연계를 위해 가벼운 Vite를 선택했다. | | 라이브러리 | React | | | 슈퍼셋 | TypeScript | - 동적 타입핑으로 일어날 수 있는 이슈를 막을 수 있다.
일관성 있는 코드를 작성할 수 있다.
미리 타입을 지정함으로서 코드 자동완성을 통해 개발 경험을 향상시킬 수 있다.
협업에 있어 팀원이 작성한 코드에 대한 이해도를 높여준다. | | 라우터 | React-router | | | 스타일링 | styled-components, MUI | styled-components (결정) vs Emotion | | 코드 포맷팅 | ESLint, prettier, husky | | | 배포 | Vercel | | | API | axios | axios vs fetch
axios interceptor 기능을 활용하면 에러 핸들링, 응답 처리를 한 번에 할 수 있다. | | 서버 상태 관리 | React-query | | | 전역 상태 관리 | Zustand | - recoil에 비해 번들 사이즈가 작음, recoil은 업데이트 된 지 오래됨
store와 action을 한 번에 관리할 수 있다. | | 협업 툴 | Github, Slack, Gather, Discord, Notion, FigJam, Figma | 원활한 문서화 및 회의를 위해 목적에 따라 다른 협업 툴을 사용했다. |

🚩 코드 컨벤션

📌 코딩스타일

풀네임 사용 여부	축약형보다는 풀네임을 권장
길이 제한	4음절로 제한
컴포넌트 작성 순서	styled-components > hook(상태) > 상수 > 변수 > 함수 > jsx
JSDoc	공통 컴포넌트, 함수 등
함수 형태	컴포넌트는 함수 선언식 `export default function Component(){}`
그 외 함수는 함수 표현식 `export const Fn = () ⇒ {}`

📌 네이밍 컨벤션

분류	규칙	예시
상수	SNAKE_CASE	const MAX_USERS = 10;
변수	camelCase	let userName = 'JohnDoe';
let isActive = true;
let hasLoggedIn = false;
함수	camelCase, 동사+명사	const getUserProfile = () ⇒ { ... }
이벤트 핸들러	camelCase
컴포넌트에 props 넘겨줄 때는 on 접두사
이벤트 함수는 handle 접두사	props -> onChangeHandler
func -> handleChange
타입, 인터페이스	- type : 유니언 타입, 유틸리티 타입

interface : 타입 외 나머지
접미사 Props | interface AvatarProps {…} type AvatarProps {…} | | 타입 별칭 | - 접미사 Type | type ButtonType = …; | | 인터페이스 | PascalCase | | | 컴포넌트 | PascalCase | Avatar |

📌 스타일 컴포넌트 컨벤션

tsx 컴포넌트 파일에서 기본값 설정, 스타일 분기 처리
스타일 컴포넌트에서는 props를 사용하기만 하는 방식으로 props 및 theme은 상단에서 선언한 것을 재사용하기 위해 css 선택자로 묶어주기

export default function Button({
  type = 'button',
  disabled = false,
  width = '13.3rem',
  height = '4.3rem',
  shape,
  ...props
}: ButtonProps) {
  const theme = useTheme();

  return (
    <BaseButton
      type={type}
      disabled={disabled}
      $width={width}
      $height={height}
      $shape={shape || theme.shape.round}
      {...props}
    >
      {isLoading && <CircularProgress size={20} />}
      {!isLoading && children}
    </BaseButton>
  );
}

import styled, { css } from 'styled-components';

export const BaseButton = styled.button<StyledButtonProps>`
  ${({
    $width,
    $height,
    theme,
  }) => css`
    width: ${$width};
    height: ${$height};
    // theme 사용 예시
    border-radius: ${$theme.shape.round};
    color: ${theme.color.black_primary};
  `}
`;

🚩 디렉터리 구조

AlgoBaro
├─ 📂 public // 파비콘 등 자료나 이미지
│  └─ favicon.ico
└─ 📦 src
   ├─ 📂 assets 
   ├─ 📂 components
			├─ index.ts
			└─ 📂Common // 공용 컴포넌트 폴더
	    └─ 📂Avatar
				 ├─ index.ts // 폴더 내 .tsx 파일이 하나일 경우 생략
				 ├─ Avatar.tsx
				 └─ Avatar.style.ts
   ├─ 📂 constants
   ├─ 📂 hooks
   ├─ 📂 pages
   ├─ 📂 routes
   ├─ 📂 services
			├─ 📂 auth
			└─ apiconfig.ts
   ├─ 📂 store
   ├─ 📂 styles
   ├─ 📂 types
   ├─ 📂 utils
   ├─ App.tsx
   └─ main.tsx
├─ .gitignore
├─ index.html
└─ README.md