🌹Commit
Commit Type만 영어로
👉 commit 메세지가 마음에 안들면 언제든 조언해주기
📌Branch
- dev: 작업한 내용이들이 최종적으로 합쳐지는 branch
- feature branch: 기능 완성 시, dev로 PR 요청
- feature branch별 PR 전에 rebase 중요!
- state: QA를 위한 branch(해당 프로젝트에서는 필요 없음)
- main: 배포를 위한 branch
🔥코드리뷰
- 기능이 정상적으로 동작하는지 검사
- 가독성 / 컨벤션
- 컨벤션은 코드 리뷰를 통해서 맞춰가기
🧅 lint
- Airbnb Eslint를 사용
🍿 Formatter
- Eslint
- Prettier
🎉 파일 구조
Component/Styled
src ┣ components ┃ ┗ Header ┃ ┃ ┣ Header.jsx ex) export default Heade ┃ ┃ ┣ Header.style.js ┃ ┃ ┗ index.js ┣ context ┣ hooks ┣ modules ┣ recoil ┗ pages ┃ ┣ components ┃ ┗ hooks
전역 context, module도 src 밑에
Header.jsx
import * as S from “./Header.style.js’ export default Header { return <S.Wrapper>Header</S.Wrapper> }
Header.style.js
import styled from ‘styled-components’ export const Wrapper = styled(div)``
index.js
export { Header} from ‘./Header’
사용할 때 import Header from “@components/Header”
🚧 개선사항
- 컴포넌트 단위로 브랜치를 생성하여 작업을 진행하면, 필요한 다른 컴포넌트들을 사용하는데 문제 발생
- 컴포넌트 단위라 필요한 컴포넌트를 생성하지 못하는 문제
- dev_baseComponent 브랜치를 생성하여 공통으로 자주 사용하는 컴포넌트들을 미리 만들어놓고, 리베이스를 통해 필요한 컴포넌트를 사용할 수 있도록 개선