react-floating-profile
Version:
React component to display your github profile <p align="left"> <a href="https://www.npmjs.com/package/react-floating-profile"><img src="https://flat.badgen.net/npm/v/react-floating-profile" alt="react-floating-profile version" /></a> <a href="http
41 lines (29 loc) • 1.41 kB
Markdown
# React 프로젝트 코딩 컨벤션
## 🧱 파일 구조
- 컴포넌트는 `src/components/` 아래에 폴더 단위로 분리
- 페이지는 `src/pages/`, hooks는 `src/hooks/`, utils는 `src/utils/`
- 컴포넌트 하나당 `.tsx`, `.module.css` 또는 `.ts` (Hook) 파일로 구성
## 📛 파일 및 폴더 네이밍
- **폴더, 파일**: `camelCase` (`userProfile`, `postList`)
- **컴포넌트**: `PascalCase` (`UserProfile.tsx`)
- **Hooks**: `use`로 시작 (`useScroll.ts`)
- **파일 확장자**: `.tsx` (JSX 포함 시), `.ts` (로직만 있을 때)
## 🧩 컴포넌트 작성 규칙
- 반드시 `function ComponentName()` 또는 `const ComponentName = () => {}` 형태 사용
- props는 `interface` 또는 `type`으로 명시
- props destructuring 사용
- 반드시 `React.FC`는 사용하지 않음
```tsx
type Props = {
title: string;
onClick: () => void;
};
const Button = ({ title, onClick }: Props) => {
return <button onClick={onClick}>{title}</button>;
};
```
## 🔧 ESLint 규칙 준수
프로젝트에서 사용하는 ESLint 규칙을 반드시 준수해야 합니다:
- **eslint-plugin-react-hooks**: React Hooks 사용 규칙 준수
- **eslint-plugin-react-refresh**: Vite Fast Refresh 호환성을 위한 컴포넌트 export 규칙 준수
- **@typescript-eslint**: TypeScript 타입 안전성 및 코드 품질 규칙 준수