코딩 컨벤션

1. 네이밍 규칙

배열은 ~Arr, ~List와 같은 축약형 대신 복수형 명사 사용

동사 + 목적어 구조로 명확한 동작을 나타내는 이름 사용

항목	규칙	예시
스타일 가이드	Airbnb JavaScript Style Guide 준수	https://github.com/airbnb/javascript/tree/master/react
문자열	쌍따옴표 사용	"코드 스타일"
함수 정의	함수 표현식 사용	const updateProfile = () => {}
컴포넌트 정의	화살표 함수 사용(rsc (reface) 단축키)	const Header = () => {}
props 타입 정의	prop-types 패키지 사용	Header.propTypes = {}
절대 경로	@/로 시작 (src 기준)	alias 사용
import 순서	외부 → 내부 → 스타일	설정으로 자동 정렬

특징	설명
성능	기존 CSS 프레임워크 대비 불필요한 스타일 정의가 없어 빠른 로딩 속도를 제공
활용성	- React, Vue, Next.js, Astro 등 다양한 프레임워크에서 간편하게 적용 가능

기존 CSS 스타일을 덮어쓰지 않고, 유틸리티 클래스만으로 강력한 스타일링 가능
tailwind.config.js를 활용하여 프로젝트에 맞게 테마 및 스타일을 커스터마이징 가능 | | 강점 | - 잘 정의된 디자인 시스템: 재사용 가능한 유틸리티 클래스 기반으로 일관된 UI 구현 가능
태그와 스타일을 함께 사용: 별도의 CSS 파일 없이 HTML과 함께 직접 스타일을 적용 가능
유지보수 편의성: CSS 스타일이 컴포넌트 내에서 직접 관리되므로, 유지보수가 쉬워짐
반응형 디자인 지원: sm:, md:, lg: 등의 접두어로 반응형 디자인을 직관적으로 적용 가능 | | 확장성 | - 컴포넌트 기반 개발에 최적화: 복잡한 UI를 간결한 클래스 조합으로 표현 가능
디자인 시스템과의 자연스러운 통합: 일관된 UI 스타일을 유지하면서 빠르게 커스터마이징 가능
빠른 개발 속도: 클래스 네이밍 고민 없이 직관적으로 UI를 구성하여 프로토타입 제작 속도가 향상됨 |