| 표기법 | 예시 | 설명 |
|---|---|---|
| PascalCase | UserProfile |
각 단어의 첫 글자를 대문자로 |
| camelCase | userName |
첫 단어는 소문자, 이후 단어는 대문자로 시작 |
| kebab-case | user-profile.ts |
단어를 하이픈으로 연결 |
| snake_case | user_name |
단어를 언더스코어로 연결 |
| UPPER_SNAKE_CASE | MAX_COUNT |
모두 대문자, 언더스코어로 연결 |
| 대상 | 표기법 | 예시 |
|---|---|---|
| 컴포넌트 | PascalCase | TodoItem |
| 타입, 인터페이스 | PascalCase | UserProfile |
| 클래스 | PascalCase | UsersService |
| 상수 | UPPER_SNAKE_CASE | MAX_COUNT |
| 이미지 (컴포넌트) | PascalCase | LogoIcon |
| 그 외 변수, 함수 | camelCase | getUserName |
| DB명, 테이블명, 컬럼명 | snake_case | user_profile |
모든 파일은 kebab-case로 작성한다.
# Good
user-profile.tsx
create-user.dto.ts
users.service.ts
# Bad
UserProfile.tsx
CreateUser.dto.ts
useUsersService.ts
Type Alias를 기본으로 사용하되, Interface가 더 적합한 경우 허용한다.
유틸리티 타입과의 호환성
type UserDTO = { id: number; loginId: string; password: string; nickname: string };
type CreateUserDTO = Pick<UserDTO, 'loginId' | 'password'>; // 간결
interface CreateUserDTO extends Pick<UserDTO, 'loginId' | 'password'> {} // 보일러플레이트 필요
안전성 (선언 병합 방지)
type UserDTO = { id: number };
type UserDTO = { name: string }; // Error: Duplicate identifier
interface IUserDTO { id: number; }
interface IUserDTO { name: string; } // 병합됨 (의도치 않은 확장 위험)
개발 경험 (DX)
에디터에서 호버 시 Type Alias는 객체 구조를 즉시 보여주고, Interface는 이름만 표시된다.