-
Notifications
You must be signed in to change notification settings - Fork 3
컨벤션 | 코드 컨벤션
Kled Yu edited this page Sep 8, 2023
·
8 revisions
- 컴포넌트 함수 컨벤션 (함수 선언 방식)
컴포넌트 함수는 PascalCase 함수 선언 방식으로 규정합니다.
// ❌ bad
function component () {
return ()
}
export default component
// 💎 ok
function Component () {
return ()
}
export default Component
- 컴포넌트 함수 외 모든 함수 컨벤션 (함수식 방식)
컴포넌트 함수 외에는 함수식 방식으로 규정합니다.
const fetchData = () => {}
함수이외의 블록 (if나 while같은) 안에서 함수를 선언하지 않습니다
// ❌ bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// 💎 ok
let test;
if (currentUser) {
test = () => {
console.log('Yup.');
};
}
- type 선언 컨벤션
- interface나 type 등 타입 변수명에 prefix를 붙이지 않습니다.
// ❌ bad
interface IAuth {}
type TAdmin = {}
// 💎 ok
interface Auth {}
type Admin = {}
- 정규식 관련 컨벤션
- 정규식에 관련된 변수명에는 prefix
r
을 붙입니다.
// ❌ bad
const regex = ''
// 💎 ok
const rRegex = ''
- 상수(constant) 컨벤션
상수를 선언하는 변수병은 UpperCase로 작성하고, 여러개의 단어가 합성될 경우 underscore (_)로 구성합니다.
// ❌ bad
export const modalData = ''
// 💎 ok
export const MODAL_DATA = ''
- 변수명 컨벤션
- 6-1 변수
변수는 camelCase로 규정합니다
const accountList = ['a', 'b', 'c'];
- 6-2 boolean 변수
boolean 값을 갖는 변수는
is
를 접두사로 붙입니다.
const isLoading = false
- 6-3 이벤트 핸들러 함수명
이벤트 핸들러 함수명은
on
+ 이벤트명 +Handler
로 구성합니다.
const onClickHandler = () => {}
- 파일명 컨벤션
- 7-1 컴포넌트 파일
컴포넌트로 분리된 파일은 PascalCase로 규정합니다.
Header.tsx
Main.tsx
PopUpNews.tsx
- 7-2 컴포넌트 이외의 파일
컴포넌트 이외의 파일은 camelCase로 규정합니다.
constants.ts
userContext.ts
- 7-3 연관된 컴포넌트들
서로 연관된 컴포넌트 파일은 동일한 폴더 내에서 동일한 접두사로 관리합니다.
📦 src
└─ components
└─ Signup
└─ SignupForm
└─ SignupForm.tsx
└─ SignupForm.test.tsx
- URL 구성 컨벤션
RESTful 규칙을 참고하여 URL을 구성합니다.
8-1. 소문자 사용
// ❌ bad
users/Comments
// 💎 ok
users/comments
8-2. 하이픈(-) 사용
// ❌ bad
users/common_comment
// 💎 ok
users/common-comment