meepin 컨벤션&스택
사용 라이브러리
분류
라이브러리
코어
react,stackflow
코드 품질
biome,husky
네트워크
axios,@tanstack/react-query
상태관리
zustand,immer,zustand/combine
유틸
es-toolkit,classnames
폼 처리
react-hook-form
UI
swiper,react-day-picker
Git 컨벤션
브랜치
개발용 브랜치: main
배포 브랜치: dev, prod
브랜치 전략
기능 개발 시 다음 규칙을 따라 브랜치 명명
기본 형식:{{story이슈번호}}/{{subTask이슈번호}}__{{간략한 작업 설명}}
예:EL-3/EL-4__signup-login
subTask가 없을 경우:{{story이슈번호}}/{{간략한 작업 설명}}
예:EL-3/signup-login
서브태스크 유무와 무관하게 일관된 구조 유지
이유: 초기에는 단일 작업이더라도 협업 중에 서브태스크가 추가될 수 있기 때문
유의사항
짧은 수명 브랜치 유지: 브랜치는 가급적 1~2일 이내 머지. 장기간 작업은 분할하거나 main에서 직접 개발.
주기적 pull & rebase: main 브랜치 기준으로 작업 브랜치를 주기적으로 업데이트
병합 시--no-ff사용: 작업 단위 명확화 및 커밋 추적을 위해 fast-forward 병합은 지양
테스트 필수: main에 병합 전 로컬에서 기능 확인 필수.
폴더 구조나 파일 이동 시 확인 필수: 구조 변경은 후속 작업에 영향이 크므로 공동 작업자에게 확인 필수.
머지 자동 알림 시스템 (GitLab → Google Chat)
main브랜치에 머지 후 별도 공유 없이도 팀 전체가 실시간으로 변경사항을 인지할 수 있도록
GitLab → Google Chat 연동을 통해 자동 알림설정
알림 위치:[Git] culturepass-fo스페이스
트리거:main브랜치로 푸시 발생 시
커밋 컨벤션
제목은 명령형으로 작성하며, 마침표를 붙이지 않습니다.
본문운 제목과 한 줄 띄운 뒤 작성합니다.
Jira 이슈 트래킹을 위한 규칙
커밋 메시지 prefix로 해당 이슈 번호를 괄호로 명시 (브랜치명에 마지막 이슈번호가 자동으로 삽입되도록 husky세팅 되어있음)
예:[EL-3] 회원가입/로그인 기능 구현
Merge 방식
Merge Request 사용 ❌
빠른 개발을 위해 main브랜치에 바로 머지
Squash Merge ❌ - 기능 브랜치의 커밋을 개별적으로 유지
Squash는 개별 작업 브랜치에서 메인 브랜치에 머지하기 전에 WIP커밋을 처리할때만
파일 및 폴더 네이밍 컨벤션 예시
/activity /act-login /_local (act-login에서만 사용되는 정의, 로직, 컴포넌트 파일 등) /step step-1.tsx step-2.tsx act-login.tsx act-login.css /api /component /core /ui /hook /library /stackflow /store store-user.ts /type /util
컴포넌트 기본 템플릿
interface ComponentProps {} const Component = (props: ComponentProps) => { const {} = props return ( <div> <div>Component</div> </div> ) } export default Component
코드 스타일 및 규칙
열거형 상수
as const사용
주석
슬래시 주석(//) 사용
아래 위치에는 요약된 설명을 주석으로 반드시 작성:
컴포넌트의Props
주요function
useEffect내부 로직
주석은 해당 로직의 목적과 흐름을 빠르게 파악할 수 있도록 간결하게 작성합니다.
이벤트 핸들러
함수명은handle+ 대상 + 이벤트명의 형태로 작성
(예:handleSubmitForm,handleLoginButtonClick)
정확한 타입 명시
(예:MouseEventHandler)
이벤트 객체는 일반적으로e로 표기
단, 사용하지 않는 경우에는_e와 같이 접두어에 언더바를 붙여 명시
핸들러의 동작 목적을 슬래시 주석(//)으로 함수 위에 간결하게 작성합니다.
// 예시 버튼 클릭 - 클릭하면 어떤일이 일어납니다 const handleButtonClick: MouseEventHandler
로직이한 줄이고 사이드 이펙트가 단순한 경우에만 인라인 핸들러를 허용하며,
복잡하거나 재사용이 필요한 로직은 별도 함수로 분리하여 작성합니다.
Linter 설정
항목
설정값
semicolons
⭕️
lineWidth
100
quoteStyle
'홑따옴표
HTML/CSS/JS 을 전달 받으면
HTML → React 컴포넌트로 분리
core 영역 및 기능 밀집 영역 위주로 우선 분리
분리 기준은 작업 중 조율 예정
CSS 분리 및 적용
클래스명이 글로벌 스코프 기준으로 구성되어 있어 CSS Module 미사용, 일반 CSS로 관리