컨벤션

매주 무슨요일이든 정해서 프론트엔드 회의 진행 (간단한 30분)

• 이번주 어떤 이슈를 클리어하였는지, 어떤 이슈가 목표인지 이슈및 프로젝트 공유
• 에러사항공유
• wiki에 추가해야하는 컨벤션이라던가 규정이 있다면 공유

커밋 컨벤션

• ✨ : 새 기능
• 🔧 : 기능 개선
• 🐛 : 버그 수정
• 🔖 : 릴리즈 커밋
• ♻️ : 리팩토링
• ✅ : 테스트코드 작업
• 🚚 : 파일구조 개선, 리소스이동, 이름변경
• 📦 : 패키지 업데이트
• 🙈 : .gitignore 파일 업데이트
• 🔀 : 머지 충돌 해결 또는 머지 커밋

커밋 예시

:truck: 파일구조이동

코드 컨벤션

절대 경로 사용

• 상위 경로 2개 초과 시 ? ("../../" 를 초과) "components/Test" 로 import

함수, 변수 네이밍 컨벤션

• 모든 함수는 arrow function을 사용한다.
• 함수는 평소에 동사로 시작 되어야 하며, 함수에 목적이 대략적으로 알 수 있도록 이름을 정해야 한다.
• 이벤트 핸들러 (click, select, submit, hover, 등) naming은 아래대로 만든다
  • 접두사 (required): handle (props에 넣을 경우에 on으로 쓴다)
  • 이벤트 (required): ~Click, ~Select, ~Hover, 등
  • Name (optional): 이벤트와 관련 상세 정보를 명사 형태로 작성한다
• CRUD 관련 액션을 아래 동사들은 선언한다:
  • CREATE: create, add
    • 피할 동사: make, generate
  • READ: get
    • 피할 동사: fetch
  • UPDATE: update, set
    • 피할 동사: patch (PATCH 메소드를 사용하는 API 호출 예외로 사용이 가능하다)
  • DELETE: remove, delete

Bad:

// 1. 기본적인 함수 
userInformation();
errorHandle();

// 2. 이벤트 핸들러
<MyForm
  alertClick={this.openAlert} 
  submit={this.submit}
/>

<MyButton 
  onClick={this.onClick} // onClick은 props에서만 사용! 
  hover={this.hover}
/>

// 3. CRUD
makeUser();
generateReferralLink();
patchPosition();
fetchJobList();

Good:

// 1. 기본적인 함수
userInformation();
errorHandle();

// 2. 이벤트 핸들러
<MyComponent 
  onClickAlert={this.handleClickAlert} 
  onSubmitForm={this.handleSubmitForm}
/>

<MyButton
  onButtonClick={this.handleClickButton} 
  onHover={this.handleHover} 
/>

// 3. CRUD
createUser();
createReferralLink();
updatePosition();
getJobList();

스타일 컨벤션

• 스타일을 수정해주는 컴포넌트들은 따로 .style.ts로 분리하여 작성한다.
• 공통적으로 사용되는 부분이 있다면,

style/Test.ts

export const TestComponent = styled.div``;

파일 컨벤션

• 한 폴더 내부에 최소한의 파일을 넣을 수 있도록 할 것
• interface관련해서 해당 컴포넌트의 props에 관련된 타입만 존재하는 경우 type을 파일로 분리하지 않으며 한 파일에 같이 존재하도록 제작
• 스타일 코드는 따로 분리
• svg같은 아이콘 파일은 next에서 지원해주는 Image태그 사용