💻 웰시코딩 프론트엔드 협업 규칙

7월 27일 | 프론트엔드 회의록 정리

🛠 기술스택

• React(Next.js)
• Typescript
• redux
• redux-saga
• axios
• emotion.js
• yarn

🏷 브런치 전략

Git-flow

• main : 제품 출시 버전
• develop : 다음 버전 개발
• feature/{Task번호} : 기능 개발
• hotfix : 라이브(master) 긴급 버그 수정

처음에는 master와 develop 브랜치가 존재합니다. 물론 develop 브랜치는 master에서부터 시작된 브랜치입니다. develop 브랜치에서는 상시로 버그를 수정한 커밋들이 추가됩니다. 새로운 기능 추가 작업이 있는 경우 develop 브랜치에서 feature 브랜치를 생성합니다. feature 브랜치는 언제나 develop 브랜치에서부터 시작하게 됩니다. 기능 추가 작업이 완료되었다면 feature 브랜치는 develop 브랜치로 merge 됩니다.

develop에 이번 버전에 포함되는 모든 기능이 merge 되었다면 QA를 하기 위해 develop 브랜치에서부터 release 브랜치를 생성합니다. QA를 진행하면서 발생한 버그들은 release 브랜치에 수정됩니다. QA를 무사히 통과했다면 release 브랜치를 master와 develop 브랜치로 merge 합니다. 마지막으로 출시된 master 브랜치에서 버전 태그를 추가합니다.

참고자료 : https://techblog.woowahan.com/2553/

📃 Commit 메시지 규칙

• add : 코드나 테스트, 예제, 문서 등의 추가에 대한 커밋
• feat : 새로운 기능에 대한 커밋
• docs : 문서 수정에 대한 커밋
• fix : 수정에 대한 커밋
• refactor : 코드 리팩토링에 대한 커밋
• test : 테스트 코드 대한 커밋
• Remove : 삭제에 대한 커밋
• update : (ex) Update A to B | a를 b로 업데이트에 대한 커밋

📝 디렉토리 & 파일 관리

• 이런 식으로 한 컴포넌트를 생성할 때 폴더명을 컴포넌트 이름으로 하고 index와 style로 구분합니다.
• 단, pages 폴더내 컴포넌트는 jsx와 style을 분리하지 않고 하나의 페이지 컴포넌트에 구현 (url 생성 이슈)

🗂 네이밍 규칙

Components

• 파스칼 케이스 기법 : 첫 글자 대문자, 중간 포인트 단어도 대문자
• 디렉토리 경로 : Header/Back.tsx, Header/Alarm.tsx 이런 식으로 컴포넌트는 전부 첫글자 대문자로 생성하기.

(ex) HeaderTitle, FooterMenu

Pages

• 스네이크 기법 : 첫 글자 소문자로
• 디렉토리 경로 : login 폴더 안에 여러 파일이 들어있을 경우, login/index.tsx , login/login_error.tsx 이런식으로 생성하기.

(ex) login_error, login_succses

⭐️ 정리 ⭐️

만약 컴포넌트와 페이지 작업을 할 때 함께해요 페이지 (together) 관련 된 작업을 할 것이면

pages 경우 : 소문자

(예시)

• pages/together.tsx

컴포넌트 경우 : 파스칼 케이스

(예시)

• components/Together/Content.tsx
• components/Together/TitleBox.tsx

이런 식으로 생성해주시면 됩니다.

Object Styles Convention

• 카멜 기법 : 첫 글자 소문자, 중간 포인트 단어부터 대문자

(ex) hotpink, hotpinkHoverOrFocus, hotpinkWithBlackBackground

🙆🏻‍♀️ 협업툴 네이밍 규칙

트렐로 일감번호

• [wsc-001] PR 테스트

브랜치명

• feature/wsc-001

PR 제목

• [wsc-001] PR 테스트

👩🏻‍🎤 emotion 작업

이런식으로 작업하기. 이렇게 작업하면 좋은점 알아봤습니다.

• tsx 안에서 이게 어떤 태그인지 바로 알 수 있다는 점 (styled-components 같은 경우에는 컴포넌트 이름에 div나 p를 써놓지 않으면 이게 어떤 태그인지 알 수 없습니다.)

참고자료 : https://www.howdy-mj.me/css/emotion.js-intro/