모각GO 프론트엔드팀 개발규칙

모각GO 프론트엔드 개발규칙

브랜치 전략

main ← dev ← [prefix]#이슈번호

prefix 목록

✨vx.y.z: dev ⇒ main 브랜치용 (예: v0.1.0) 참고 링크1, 참고 링크2

init	프로젝트 생성 및 초기 설정
feat	새로운 기능 추가
style	디자인(css, 레이아웃)추가, 변경
fix	버그, 오류 수정 및 변경된 기능 수정
hotfix	급하게 치명적인 버그를 고쳐야하는 경우
refactor	기능의 변화가 아닌 코드 리팩터링 ex) 변수 이름 변경, 최적화, 가독성 개선, 중복 최소화, 컴포넌트 분리 등
cleanup	콘솔 로그 및 주석 삭제, 파일 삭제, 불필요한 함수 삭제, 코드 위치 변경
merge	pull 과정 중 현재 commit과 자동병합이 일어날때 필수적으로 적어줘야하는 commit에 적어줌
chore	패키지 매니저 업데이트, 빌드 관련 ex) .gitignore, package.json 관련
test	테스트 코드 추가, 수정
docs	README 수정

---

이슈/PR 컨벤션

• 이슈 컨벤션

1. 이슈 제목:[prefix] 작업내용 요약
2. 이슈 내용:

# 📌 작업 내용
 - task 1

• PR 컨벤션

1. PR 제목: 이슈 제목과 같음([prefix] 작업내용 요약)
2. PR 내용:

# 📌 작업 내용
// 구현 내용 및 작업 했던 내역, 사진필요한 경우 선택적으로 첨부
 - [x] 작업 내용

# 🚦 특이 사항
//주의깊게 봐야하는 PR 포인트 & 말하고 싶은 점

디렉토리 구조

├── app
│   └── _common
│       ├── components
│       ├── hooks
│       ├── constants
│       ├── types
│       └── utils
│   ├── api
│   └── main
│       ├── page.tsx
│       ├── _components
│       ├── _utils
│       ├── _types
│       └── _api
│   └── mypage
│       ├── page.tsx
│       ├── _components
│       ├── _utils
│       ├── _types
│       └── _api
└── public

파일 내 import 순서

• eslint로 import 순서 설정

components
hooks
constants
types
utils

각 파일명 규칙

• 컴포넌트 → 컴포넌트 이름.tsx
• 타입 → 컴포넌트 이름.ts
• 스타일 → 컴포넌트 이름.styles.ts

개발 컨벤션(규칙)

1. 줄임말은 쓰지않는다. (ex. event => e)
2. 함수 export 방식 선언 후 export

컴포넌트를 제외한 함수 선언 방식은 const 를 사용합니다.

🍞 vscode 단축키 tsrfce

• 예:

function Component() { ... }
export default Component;

3. tsx를 반환한다면 확장자 이름을 .tsx를 사용합니다.

4. ASI를 이용하지 않고 세미콜론을 필수적으로 써줍니다. (prettier로 관리).

5. 리터럴 값은 상수로 만들어서 사용합니다. 상수는 스네이크 케이스(ex. BASE_URL)를 사용합니다.

6. 변수명은 camelCase로 작성합니다.

7. .tsx 파일의 파일(폴더)명은 PascalCase를 사용합니다. ex) LoginPage.tsx.

8. alias를 이용해서 파일 절대 경로로 import, export 사용합니다. src: @, test: #

9. export 할때 barrel export 방식을 사용하지 않습니다.

10. 타입을 분리할 경우(여러 곳에서 타입이 생성될 경우(2군데 이상)) types 디렉토리에 관리한다.

11. 최대한 코드에 대한 설명 주석은 적지 않습니다. 이름만 읽어도 무슨 일을 하는 함수인지 알 수 있어야합니다.

12. 이벤트 핸들러를 정의할때 handle + 메서드명로 정의합니다.

13. on 접두사가 붙은 경우, 이 Prop에 실제 이벤트가 연결되어 있다는 걸 뜻하고, handle 접두사가 붙은 경우, 이벤트가 발생했을 때 호출되는 실제 Function을 의미합니다.

• 예:

function DateTypeToggleButton ({ onClick }) {
	return <button onClick={onClick} />
}

function ModalButton ({ onClick }) {
	return <button onClick={onClick} />
}

function Calendar () {
	const handleClickDateType = () => {}
  const handleModalOpen = () => {}

	/* 
		주의!!
		컴포넌트의 props로 핸들러를 넘길때도 handle 접두사를 사용해야 합니다.
	*/
	return (
		<>
			<DateTypeToggleButton onClick={handleClickDateType} />
			<ModalButton onClick={handleModalOpen} />
		</>
	)
}

14. 컴포넌트 props 지정 방식

• 예:

interface CommentListItemProps{...}

const CommentListItem = (props: CommentListItemProps) => {
	const { id, author, loginId, createdAt, comment, isMyComment } = props;
}

15. image, svg는 카멜 사용하여 네이밍합니다.(ex. eraseCheck.svg)