팀 프로젝트 8분 읽기

컨벤션 정하기

const StyledDiv = styled.div ...styles import 순서는 기본 린트 설정을 따른다. // 외부 라이브러리 패키지 // 컴포넌트 // 스타일 관련 파일

팀 프로젝트

FE RULES

코드 컨벤션

문장이 종료될 때 세미콜론을 붙인다.

const [value, setValue] = useState('');

들여쓰기는 공백 2칸으로 한다.

function foo(){
  console.log('test');
}

주석은 설명하려는 구문에 맞춰 들여쓰기한다.

// Good
function someFunction() {
  ...
  // statement에 관한 주석
  statements
}

연산자 사이에는 공백을 추가해 가독성을 높인다.

a+b+c+d // bad
a + b + c + d // good

콤마 다음에 값이 올 경우 공백을 추가하여 가독성을 높인다.

var arr = [1,2,3,4]; //bad
var arr = [1, 2, 3, 4]; //good

따옴표는 작은 따옴표를 사용한다.

import App from './App';

컴포넌트 생성은 화살표 함수를 이용한다.

const App = () => {
  return <div>App</div>
}

스타일드 컴포넌트를 본 컴포넌트 코드 export문 아래에 작성한다.

const App = () => {
  return <div>App</div>
}
export default App;

const StyledDiv = styled.div`
  ...styles
`

import 순서는 기본 린트 설정을 따른다.

// 외부 라이브러리 패키지
// 컴포넌트
// 스타일 관련 파일

네이밍 컨벤션

함수, 변수명은 카멜케이스로 작성한다.

const value = 1;
const getData = () => {};

상수는 스크리밍 스네이크 표기법으로 작성한다.

const RADIUS = 10;
const ERR_MSG = 'error message';

컴포넌트명의 첫 글자는 파스칼 케이스로 작성한다.

const App = () => {
  return <div>App</div>
}

스타일드 컴포넌트는 앞에 Styled를 붙인다.

const StyledList = styled.li`
  ...styles
`;
const StyledWrapper = styled.div`
  ...styles
`;

css 클래스명을 사용할 때는 BEM방식을 사용한다.

.card
.card__icon
.card__icon--red
.card-list
BEM 
1. 모두 소문자 

2. 두단어의 조합은 대시로 연결
   (O) "red-box"
   (X) "redBox" 

3. 자식 class name은 부모 class name 뒤에 언더바 **두개**를 붙인 후 시작한다. 
   (O) 부모 class name: "card" --> 자식 class name: "card__icon" 
   (X) 부모 class name: "card" --> 자식 class name: "card_icon" 
   (X) 부모 class name: "card" --> 자식 class name: "card icon" 

4. 같은 컴포넌트지만 스타일링만 다를때는 대시 두개를 붙인다. 
   (O) "background" & "background--dark"
   (X) "background" & "background dark"

컴포넌트가 아닌 파일은 카멜케이스를 이용해서 작성한다.

src
 ┣ hooks
 ┃ ┗ customHooks.ts

컴포넌트 확장자는 .tsx를 사용한다.

src
 ┣ components
 ┃ ┗ components.tsx

props로 전달받는 인자가 컴포넌트일 때는 파스칼케이스를 사용한다. 그 외는 카멜케이스를 사용한다.

const Card = ({ value, Component }) => {
  return <div>
    { value }
    <Component/>
  </div>
}

커밋 컨벤션

  • 커밋 유형은 영어 소문자로 작성한다.

    깃모지커밋 유형의미
    :sparkles:feat새로운 기능 추가
    :bug:fix버그 수정
    :memo:docs문서 수정
    :lipstick:style코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우
    :recycle:refactor코드 리팩토링
    :white_check_mark:test테스트 코드, 리팩토링 테스트 코드 추가
    :package:chore패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
    :art:designCSS 등 사용자 UI 디자인 변경
    :bulb:comment필요한 주석 추가 및 변경
    :truck:rename파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
    :fire:remove파일을 삭제하는 작업만 수행한 경우
    :label:type타입을 추가하거나 수정하는 경우
    :tada:init초기 세팅 및 초기화할 경우

  • 깃모지를 이용하여 의미를 추가한다. ex) 🎉, 🐛, 🔥 …

  • 커밋 메시지는 한글로 작성하여 내용 전달을 쉽게 한다.

  • 본문에는 변경 내용과 이유를 설명한다. (필요할 때)

  • 제목의 끝에는 .을 붙이지 않는다.

  • 본문에 여러 항목이 있다면, 글머리 기호를 통해 가독성을 높인다.

- 변경 내용1
- 변경 내용2

깃 브랜치 관리

깃 브랜치는 다음과 같이 추가하고 사용한다.

# 개발 브랜치 fe-dev
git checkout fe-dev

# 작업 브랜치
git checkout -b fe-feat/home # 작업 브랜치 생성 후 이동

# push할 때
git push origin fe-feat/home # 이후 fe-dev에 pr을 보낸다.

# pr 시 충돌 발생
git checkout fe-dev
git pull origin fe-dev # 원격 저장소에 변경 사항 반영
git checkout fe-feat/home #  작업 브랜치로 이동
git merge fe-dev # 작업 브랜치에서 개발 브랜치 머지 이후 로컬에서 충돌 해결
git add . # 충돌 해결된 파일들 add
git commit -m ':bug: fix: 머지 충돌 해결' # 커밋 메시지 작성
git push origin fe-feat/home # 충돌 해결 후 push ( 자동으로 pr에 반영됨 )

merge는 오후 1시에 진행한다.

폴더 구조

src
 ┣ asset
 ┣ constants
 ┣ types
 ┣ store
 ┣ components
 ┣ ┣ elements # html element 한 개를 담당하는 컴포넌트
 ┣ ┣ ui # 모달, 페이지네이션과 같은 ui를 담당하는 컴포넌트
 ┣ ┗ common # 공통으로 사용하는 컴포넌트
 ┣ data
 ┣ slice
 ┣ utils
 ┣ hooks
 ┣ layouts # 레이아웃 담당 컴포넌트 폴더 생성 후 작업
 ┣ pages # 페이지 담당 컴포넌트 폴더 생성 후 작업
 ┣ styles # 공통으로 사용하는 스타일드 컴포넌트
 ┣ App.tsx
 ┗ index.tsx