00. Git Flow, Commit Convention, Directory Structure

00. Git Flow, Commit Convention, Directory Structure

Git Flow

---

1. 페이지별, 기능별 new branch 파서 작업.
2. branch 팔 때, 마일스톤 및 이슈 지정해서 목표 세운 다음 작업.
3. 페이지, 기능 작업 완료 후, branch merge PR 날리기.
4. PR은 아주 급한 경우 아니면 다른 사람 1인 이상이 검증 및 merge.

Directory Structure

---

// react

- src/
--- feature/  기능별, 페이지별 구분
----- User/
------- Profile/
------- Avatar/
----- Message/
------- MessageItem/
------- MessageList/
----- Payment/
------- PaymentForm/
------- PaymentWizard/
----- Error/
------- ErrorMessage/
------- ErrorBoundary/
--- components/  재사용 가능한 것들 모음. UI 관련.
----- App/
----- List/
----- Input/
----- Button/
----- Checkbox/
----- Radio/
----- Dropdown/

📂 server
    📂 config
    ├── 📄 baseResponseStatus.js
    ├── 📄 database.js  
    ├── 📄 express.js
    ├── 📄 jwtMiddleware.js
    ├── 📄 response.js
    📂 src
    └── 📂 app           				
        ├── 📂 User          		
        |    ├── 📄 userController.js          	
        |    ├── 📄 userDao.js 		
        |    ├── 📄 userProvider.js   		
        |    ├── 📄 userRoute.js   		 
        |    └── 📄 userService.js   	 
    📄 .gitignore                     		
    📄 app.js
    📄 server.js
    📄 package.json                      
    📄 README.md

---

[참고1(react 파일 구조)](https://www.robinwieruch.de/react-folder-structure/)

[react 공식 페이지 참고](https://ko.reactjs.org/docs/faq-structure.html)

[https://velog.io/@hopsprings2/견고한-node.js-프로젝트-아키텍쳐-설계하기](https://velog.io/@hopsprings2/%EA%B2%AC%EA%B3%A0%ED%95%9C-node.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90-%EC%84%A4%EA%B3%84%ED%95%98%EA%B8%B0)

[[NodeJS] 프로젝트 폴더 구조 만들기](https://dev-wnstjd.tistory.com/90)

Commit Convention

1. commit message structure

[#issueNumber] type : Subject(제목)
	*한 줄 띄워 분리*
body(자세한 내용)
	*한 줄 띄워 분리*
footer(꼬리말)

#예시
[#14] Feat : 로그인 기능 추가

- 회원가입 페이지 이후에 로그인 기능을 추가.
- 로그인 시 서버 api로 post 보내서 인증.

Related to
- 3050c3 (commit hash id)
- #5 (issueNumber)

2. commit type (첫 글자만 대문자)

<기능/코드 변경>

• Feat : 새로운 기능 / 페이지 추가
• Fix : 버그 수정 (issue 태그도 함께 걸어주세요..)
• Design : CSS, UI 관련 사항 변경

<개선사항>

• Style : 코드 포맷팅, 코드 모양 수정 (코드의 직접적인 수정이 없는 경우)
• Comment : 주석 추가 및 변경
• Refactor : 코드 리팩토링 ⇒ 새로운 기능 없이 현재 구현을 개선.

<그 외>

• Docs : readme, 기능 명세 수정
• Test : 테스트 기능 추가 (코드, 페이지 등)
• Chore : 빌드 자동화 코드 등록, 패키지 매니저 수정 등.
• Rename : 파일명 수정, 폴더구조 변경 등
• Remove : 사용하지 않는 파일, 폴더 삭제 시

3. 작성 규칙

Subject 제목 작성

제목의 처음은 동사 원형으로 시작.

50자 이내, 개조식 구문으로 작성.

마지막에 특수문자 삽입 안함(. ! ? 등)

<영어>

Fix, Add, Change 등으로 시작

<한글>

고침, 추가, 변경 등으로 시작

예시)
Feat: "추가 get data api 함수"

Body 본문 작성

한 줄 당 72자 이내.

양에 제한받지 않고 최대한 상세히 작성.

어떻게 변경했는지보다 무엇을 변경했는지, 왜 변경했는지를 위주로 작성

Footer 꼬리말 작성

꼬리말은 꼭 적어야 하는 건 아니다.

<이슈 트래커 유형>

Fixes : 아직 수정중인 이슈

Resolves : 해결한 이슈

Ref : 참고할 이슈/커밋

Related to : 해당 커밋에 관련된 이슈/커밋 번호

[#숫자] 형식으로 쓰면 github에서 자동으로 해당 이슈 링크 걸어준다.

[000000] 형식으로 쓰면 github에서 자동으로 해당 커밋 링크 걸어준다.

---

[협업을 위한 커밋 컨벤션](https://overcome-the-limits.tistory.com/entry/%ED%98%91%EC%97%85-%ED%98%91%EC%97%85%EC%9D%84-%EC%9C%84%ED%95%9C-%EA%B8%B0%EB%B3%B8%EC%A0%81%EC%9D%B8-git-%EC%BB%A4%EB%B0%8B%EC%BB%A8%EB%B2%A4%EC%85%98-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0) 👍

[커밋 컨벤션에 대한 요약 정리](https://doublesprogramming.tistory.com/256)

Issue Convention(tag, template)

이슈는 tag를 붙여서 기능/역할 별로 구분이 가능.

대부분 Commit Type 대로 만들어 놓으면 편하다.

To Do : 해야 할 일(milestone에 포함시키는 issue 용도) Bug : 개발된 코드에서 찾아낸 버그

Question (질문/건의사항) : 특정 기능 / 코드에 대한 질문

github에서 issue template을 만들어서 빠른 생성 가능

++

front 관련된 것은 frontend / back 관련된 것은 backend 라벨 맨 앞에 추가, 공통 사항이면 둘다 붙이지 않기.

---

https://taekki-dev.tistory.com/40

https://hyeonic.tistory.com/181

브랜치 전략 / git flow

main : 우리의 주된 코드들 / 잘 작동되는, 배포가능한 코드들

frontend : 프론트 코드들

backend : 백 코드들

gh-pages : 추후 github page로 배포할 때??

frontend/feature

frontend/feature/login

형태의 브랜치 생성?

⇒ git에서 하위 브랜치로 / (슬래시)를 쓰는 것은 오류를 뿜는다.

⇒ frontend-feature , frontend-feature-login과 같은 형태