프론트

👥 스크럼 규칙

• 매일 2번

• 2시 스크럼 : 각자 할 일 배분

• 6시반 스크럼 : 이슈/ PR/ 버그 등에 대해 토론 + 다같이 의논해서 merge

💻 코딩 컨벤션

📍  스타일 속성 선언 규칙

1. display, position(top, left,right, bottom) 관련

2. box model(width, height, padding, border, margin ...)

3. box style(background ...)

4. font(color, font-size,font-family)

5. 그 외 자유

📍 컴포넌트 생성 규칙

• /컴포넌트_이름
• index.jsx
• style.js (필요시)
• import * as Style from ‘./style’

📍 컴포넌트 코드 작성 규칙

• 코드 작성 순서
1. styled (길어지면 style.js로 분리)
2. 컴포넌트
3. propTypes
4. defaultProps

📍 함수 작성 규칙

• 화살표 함수

📍 네이밍 규칙

• PascalCase : React component(function, class)

• camelCase : variable(const, let), JavScript function, custom hook, props

• UPPER_SNAKE_CASE : tuple(as const 등)

📍 프로젝트 아키텍쳐

• components
• base - 가장 작은 단위 text, input, image
• common - 모든 페이지에 적용되는 공통 컴포넌트
• domain - base, common 제외 나머지 (완성형)

• hooks

• pages
• 라우터
• NotFound

• styles
• theme.js
• color, fontsize 상수값 저장
• reset.js

• assets
• fonts
• images

• constants
• environment → .env에 저장한 api end point를 변수화 하여 저장 및 관리

🐈‍⬛ github 규칙

📍 브랜칭 전략

• git flow 전략
• main
• develop
• develop으로부터 브랜치 파생

• 이슈 별로 브랜치
• develop에서 브랜치 가져와서 feat/#이슈번호 브랜치 생성하기
• 그날 할 일 완료 후 develop에 다시 merge하기
 

📍 커밋 메세지 작성 규칙

• commitzen 사용

• 커밋 내용
• 커밋 타입: commitizen에서 사용하는 타입 그대로 작성
• 커밋 제목 : 간단하게 작성 (완성형 문장 X) ex) 헤더 반응형 수정
• 커밋 내용 : 간략하게 설명 ex) 헤더를 반응형으로 수정했음

• 한글로 작성하기 (✨ Feat: 헤더 반응형 수정)

📍 PR, issue 작성 규칙

• 다른 사람 코드를 건드렸다면 reviewer에 태그해주기

• PR 템플릿

## 📝 PR 내용

// 수정/추가한 내용

## 📸 스크린샷

// 필요시 스크린샷 첨부

• 이슈 템플릿

## 👀 기능 설명

// 어떤 기능을 구현할 건가요?

## 📆 예상 작업 기간

// 얼마정도 걸릴까요?

• issue 제목 작성 규칙
<emoji> <type>: 할 일
ex) ✨ Feat: Input 컴포넌트 개발
 

📍 issue 관리 및 projects 사용

• issue 관리
• 모든 기능 쪼개서 issue에 다 올려놓기 - 좋아요 기능, 댓글 기능 등등
• issue 마다 man day 써놓기
• man day는 다같이 계산
 

• github projects
• 매일 아침 스크럼 때 각자 할 일 배분
• 저녁 시간에 스크럼하면서 머지하고 done으로 옮김
• github issue, project 쓰는 법
https://zeddios.tistory.com/1194