Skip to content

Home

Jump to bottom
tare edited this page Dec 20, 2024 · 4 revisions

그라운드 룰

  • 버그 또는 이슈 발생 시 팀원 전체에게 빠르게 공유하기
  • 안풀리는 문제가 있다면 장시간(3시간 이상) 고민하지말고 다같이 함께 공유하여 고민하기
  • 시간 약속 꼭꼭 잘 지키기 => 불가피한 상황일때는 전체 팀원에게 미리 고지하기
  • 본인이 맡은 업무에 대해 끝까지 책임감 갖고 하기
  • 적극적인 커뮤니케이션 하기
  • 상대방을 배려하는 언행으로 부드럽게 말하기
  • 구글링, GPT 적극 활용하기(단, 빠른 작업과 효율을 높히기위한 수단으로만 사용하기 => output에 대한 코드를 그대로 복붙만 하지않기, 코드 이해하기)
  • 문서화 하는 습관화 하기
  • 연락 가능한 시간에는 꼭 연락 잘 받기(디스코드)
  • (각자) 미리 안건 정리하여 회의 참석하기
  • 코어 타임 지키기 (오후 2시~ 오후 6시)

회의 룰

  • 회의 내용을 미리 정해놓고, 애자일 한 회의 하기
  • 10분동안 프로젝트 현황 공유하기(문서로 공유)
    • 어디까지 진행
    • 앞으로의 계획
  • 회의가 끝난 후 회의록 작성하기

PR 규칙

  • PR은 가장 작은 단위로 진행 => 추가 이슈 방지
  • 페이지 PR의 경우, 기능 또는 컴포넌트 PR
  • PR 리뷰는 2명 이상 또는 담당 컴포넌트 관련 리뷰어가 Approve 했을 경우 머지
    • 리뷰어 양정화 고정
    • 외 1인은 담당 컴포넌트 개발자
  • 모든 리뷰에 완료처리가 되어야 머지

컨벤션

코드 네이밍 컨벤션

문장 종료

  • 반드시 세미콜론을 사용

명명 규칙

  • 상수는 영문 대문자, 스네이크 표기법을 사용
const NAME_ROLE;
  • 변수 및 함수는 카멜케이스를 사용
// 배열: 복수형 이름으로 사용
const datas = [];

// 정규표현식: 'r'로 시작
const = rName = /.*/;

// 반환 값이 불린인 경우: 'is'로 시작
const isLoading = false;

// Fetch함수: method(get, post, put, path, del)로 시작
const getEnginList = () => {...}

함수

  • 함수는 함수 표현식을 사용하며, 화살표 함수를 사용한다.
// Badfunction fnName() {};
[1,2,3].map(function(x){
    retrun {};
})

// Goodconst fnName = () => {};
[1,2,3].map(x => x);
  • 바로 return 하는 경우
// bad
const foo = () => { return "bar"; }

// good
const foo = () => "bar";

주석

  • Comment Anchors를 사용한다.
    • VS code의 Extension에서 앵커를 다운 받는다.
    • 주석을 좀 더 직관적으로 볼 수 있다.

img

태그 네이밍

  • Styled-component태그 생성 시 아래 네이밍 규칙을 준수하여 의미 전달을 명확하게 한다.
  • 태그명이 길어지더라도 의미 전달의 명확성에 목적을 두어 작성한다.
  • 전체 영역: Container
  • 영역의 묶음: {Name}Area
  • 의미없는 태그: <>
<Container>
  <ContentsArea>
    <Contents>...</Contents>
    <Contents>...</Contents>
  </ContentsArea>
</Container>

폴더 네이밍

  • 카멜 케이스를 기본으로 하며, 컴포넌트 폴더일 경우에만 파스칼 케이스로 사용한다.
  • pages는 path 경로에 따라 유동적으로 사용(해당 규칙에서 제외)
// 카멜 케이스
camelCase
// 파스칼 케이스
PascalCase

파일 네이밍

  • 컴포넌트일 경우만 .jsx 확장자를 사용한다. (그 외에는 .js)
  • customHook을 사용하는 경우 : use + 함수명

이벤트 핸들러 네이밍

  • Props의 경우: on (onClick 등등)
  • 함수인 경우: handle (handleClick 등등)
<MyComponent onclick={this.handleClick} />

이미지 파일 네이밍

  • icon-
  • img-

커밋 컨벤션

gitmoji 활용

  • gitmoji 사용법

  • 너무 많은 이모지를 모두 사용하려 한다기보다는, 자주 사용되는 이모지를 사용하며, 최대한 커밋의 내용에 크게 벗어나지 않는 선에서 이모지를 선택해 사용하면 좋을 듯 합니다.

  • gitmoji를 사용한다 하더라도 커밋 컨벤션의 중요한 핵심은 “다른사람이 봐도 쉽게 알 수 있도록 간략하게 적기”

  • 자주 사용하는 리스트

⚡️ :zap: 성능 개선
💄 :lipstick: UI/스타일 파일 추가/수정
✨ :sparkles: 새 기능
📝 :memo: 문서 추가/수정
🐛 :bug: 버그 수정
🔥 :fire: 코드/파일 삭제
🚚 :truck: 리소스 이동, 이름 변경
📦 :package: 컴파일된 파일 추가/수정
🔨 :haer: 개발 스크립트 추가/수정
♻️ :recycle: 코드 리팩토링
  • 예를 들어, 스크립트의 수정이 있었는데 💩 이모지를 사용하거나, 👽 이런 이모지를 사용하는 것은 금합니다(커밋의 내용과 너무 상반되는 이모지)

Clone this wiki locally