<aside> 💡 빠른 구현도 중요하지만 코드를 짤 때 컨벤션을 생각하면서 짜보는것도 좋은 경험인거 같아요. 꼭 이렇게 할 필요는 없지만 롤떼그룹 프론트엔드팀의 규칙이 필요할 거 같아요.

</aside>

Git 커밋 컨벤션

• Feat - 새로운 기능 추가
• Fix - 버그 수정
• Docs - 제품 코드 수정 없음
• Style - 코드 형식, 정렬, 주석 등의 변경
• Refactor - 코드 리팩토링
• Test - 테스트 코드 추가
• Chore - 환경설정, 빌드 업무, 패키지 매니저 설정등..

Branch 전략

• main - 배포
• develop - 배포 전 workplace
• option/content
  • option: feat, fix, docs 등...
  • content: 내용 ex) lazyImage 와 같은 camelcase로 작성

디자인 패턴1

[리액트] VAC 패턴 적용 후기 및 장단점

디자인 패턴2 (순서 바꿔도 됨)

├──src	
	├── index.tsx
	├── App.tsx
	├── components
	│   ├── common //공통된 컴포넌트
	│   ├── Login  //가장 작은 단위 ex) 버튼, text, 수평선...
	│   │      └── Button
	│             ├── index.jsx          //컴포넌트 함수
	├── store  //전역상태 관리
	├── hooks  //커스텀 Hook 폴더
	├── styles //기본 스타일 전역 선언 및 theme사용
	├── routes // 리액트 라우터 함수 
	├── constants // 상수
	├── apis //API모음 
	└── utils //재사용 함수모음, reducer 포함
├──pages

//index.(jsx | ts)
// 1. import 라이브러리, 연관된 것, 멀리있는것부터 순서대로

// 2. 컴포넌트 정의 (함수선언식으로 정의)

// 3. propType TS 쓸 때는 types.ts로 선언

// 4. 간단한 상수 설정(컴포넌트 함수 외부)

// 5. 해당 컴포넌트에서만 사용할 함수