Home

브랜치 전략

브랜치명	설명	예시
main	배포를 위한 브랜치
develop	개발을 위한 브랜치
feature	이슈단위 기능 작성을 위한 브랜치	feature/#80
hotfix	급한 이슈가 생겼을 시, main에서 파생되어 문제를 해결하는 브랜치

커밋 메시지 컨벤션

커밋 헤더	설명
feat	새로운 기능
refactor	기존 기능 자체는 변하지 않고 로직만 변경
design	css 등 사용자 UI 디자인 변경
chore	기타 변경사항(환경설정, 주석제거 등)
fix	버그 수정
rename	파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
remove	파일을 삭제하는 작업만 수행한 경우
style	코드 스타일 변경 (코드 형식, 세미콜론 추가: 비즈니스 로직에 변경 없음)
docs	문서 정리
test	테스트 코드(테스트 코드 추가, 수정, 삭제: 비즈니스 로직에 변경 없음)
!HOTFIX	급하게 치명적인 버그를 고쳐야하는 경우
!BREAKING CHANGE	CHANGE 커다란 API 변경의 경우

코드 컨벤션

1. 네이밍

변수, 함수 변수명, 함수명은 camelCase로 한다.

const myObject = {};
const myFunction = () => {};

상수 상수명은 SNAKE_CASE로 한다.

const MY_OBJECT = {};

컴포넌트, 타입 컴포넌트명, 타입명은 PascalCase로 한다.

const MyComponent = () => { ... };
interface MyType { ... };

컴포넌트 props 컴포넌트 Props 타입명은 컴포넌트 이름 + Props로 한다.

interface MyComponentProps { ... }

Boolean Boolean 타입 변수는 is,has,can과 같은 접두사를 붙인다.

const isChecked = false;
const hasImage = true;
const canClick = false;

이벤트 핸들러 이벤트 핸들러명은 handle--* prefix를 가진다.

const handleModalOpen = () => { ... }

props로 넘길 때는 on--* prefix를 사용한다.

<Modal onModalOpen={handleModalOpen} />

api api 함수명은 각 api HTTP 메소드 명을 prefix로 사용한다.

const getUserName = () => { ... }
const postReview = () => { ... }

const deleteReview = () => { ... }

html 태그에 따른 스타일 컴포넌트 네이밍

모든 스타일 컴포넌트의 이름에는 기능을 암시하는 단어를 사용한다.

스타일 컴포넌트 네이밍	의미
Layout	최상위 레아웃을 설정할 때 사용한다.
Container	여러개의 요소를 묶을 때 사용한다.
Wrapper	하나의 요소를 묶을 때 사용한다.
Box	div태그를 사용할 때 권장한다.
List	ul, ol태그를 사용할 때 권장한다.
Item	li태그, 반복되는 요소를 사용할 때 권장한다.

타입 import 타입 import할 때는 type only import를 한다.

import type { myType } from @types/myTypes

컴포넌트 import 컴포넌트를 export할 때는 default export를 사용한다.

const MyComponent = () => { ... }
export default MyComponent;

함수, emotion 컴포넌트, 상수 export 함수, emotion 컴포넌트, 상수를 export할 때는 named export를 사용한다.

export const myFunction = () => { ... };
export const Container = styled.div; export const buttonStyle = css;
export const MY_CONSTANT = {};

2. 역할 분리

Hook View Component에서는 받아온 상태(데이터)를 그대로 받아온 표현하는 역할만 수행한다. 나머지 역할은 hook에서 한다.

3. 폴더구조

📦src
┣ 📂assets
┃ ┣ 📂svg
┃ ┣ 📂png
┣ 📂api
┣ 📂components
┃ ┣ 📂common
┃ ┃ ┣ 📂Button
┃ ┃ ┃ ┣ 📜Button.tsx
┃ ┃ ┃ ┗ 📜Button.style.ts
┃ ┣ 📂layout
┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┣ 📜Header.tsx
┃ ┃ ┃ ┗ 📜Header.style.ts
┃ ┃ ┣ 📂Flex
┃ ┃ ┃ ┣ 📜Flex.tsx
┃ ┃ ┃ ┗ 📜Flex.style.ts
┃ ┣ 📂product
┃ ┃ ┣ 📂ProductItem
┃ ┃ ┃ ┣ 📜ProductItem.tsx
┃ ┃ ┃ ┃ 📜ProductItem.stories.tsx
┃ ┃ ┣ 📂ProductList
┃ ┃ ┃ ┣ 📜ProductList.tsx
┃ ┃ ┃ ┗ 📜ProductList.stories.tsx
┣ 📂constants
┣ 📂mocks
┃ ┣ 📂handlers
┃ ┣ 📂data
┃ ┣ 📜browser.ts
┣ 📂store
┃ ┣ 📂product
┣ 📂hooks
┃ ┣ 📂common
┃ ┃ ┣ 📜useModal.ts
┃ ┣ 📜useProduct.ts
┣ 📂pages
┃ ┣ 📜ProductListPage.ts
┣ 📂styles
┣ 📂types
┣ 📂utils
┣ 📂router
┃ ┣ 📜index.tsx
┣ 📜App.tsx
┣ 📜index.tsx