Code Convention & 네이밍 규칙

☑️ 코드 컨벤션

✔ 컴포넌트 / CSS 파일명

PascalCase 사용(단어마다 첫 글자가 대문자, 단어 사이에 구분 기호 없음.)

예) Homepage.tsx, RecipeCard.tsx , UserProfile.tsx
css폴더를 파서 css 파일 거기에 다 넣기

예)

Homepage/
 ├── Homepage.tsx
 └── Homepage.css

✔ 아이콘/이미지 파일명

**kebab-case(**단어 사이를 하이픈(-) 으로 연결)
의미가 직관적으로 드러나도록 작성

예) heart-icon.svg, star-fill.svg, upload-photo.png

</aside>

참고) 대표적인 코드 표기법(네이밍 컨벤션) 종류

✔ 변수 / 함수 네이밍

camelCase 사용 (첫 단어는 소문자, 이후 단어는 대문자로 시작)
함수명은 동사로 시작

예) getUserData(), handleSubmit(), isLoading, userName

✔ 컴포넌트 구조 규칙

컴포넌트 최상단은 항상 import 순서 정리

라이브러리
hook/컴포넌트/css
이미지/자료

예:

import { useEffect } from "react";
import UserCard from "@/components/UserCard";
import "./Homepage.css";
import mainBanner from "@/assets/main-banner.png";

</aside>

☑️ 코드 컨벤션이 필요한 이유

팀원끼리 코드를 공유하기 때문에 일관성있는 코드를 작성하면 서로 이해하기 쉽다.
나중에 입사 지원 시 프로젝트를 하며 코드 컨벤션을 만들어 진행했다고 하면 협업 면에서 유리하게 작용할 수 있다.