• 코드 컨벤션

  함수

  • Arrow function 사용

  // Good
  const name = () => {}  // (스니펫 단축키 rafce)
  
  // Bad
  function name() {}
  

  함수명

  • on + 동작 + Handler 형태로 생성

  // Good
  const onChangeHandler = () => {};
  
  // Bad
  const changeHandler = () => {};
  const handleChange = () => {};
  

  export

  • export가 필요한 각 함수, 변수의 앞에 export를 붙임

  // Good
  export const name1 = () => {};
  export const name2 = () => {};
  
  // Bad
  const name1 = () => {};
  const name2 = () => {};
  export {name1, name2};
  

  if문

  // Good
  if(true) { 
    alert("");
    return;
  }
  
  // Bad
  if(true) {
    return alert("");
  }
  

  event는 e로 쓰기

  const onChangeHandler = (e) => {}
  

  Typescript 규칙

  • types/index.ts 폴더 안에만 type 작성
  • 타입 import할 때 import type “interface 명“
  • interface로 통일하기

  interface Todo {
  id: string;
  title: string;
  content: string;
  isDone: boolean;
  }
  

  작명

  • 변수, 함수 : camelCase
  • 상수: snake_case
  • 컴포넌트 : PascalCase

  시맨틱 태그(Semantic tag)

  (1) <div> 남발하지 말고 <main>, <nav>, <section>, <article>

  (2) <article> <<< <section> <<< <main>

  변수 관리

  • 공통적으로 사용하는 값들은 상수화하기
  • QueryKey를 constant화 시키기
  • URL 등 중요하거나 긴 파일은 .env 파일에 넣고 상수로 설정하기 (ex. URL, Supabase API Key)

• 깃플로우 전략

깃허브 규칙

Issue (이슈)

• Project에서 create issue
• 형태: [타입] - 이슈 제목 [feat] - 헤더 UI 제작
• 입력 항목: 이슈 타입, 내용
  • 이슈 타입: 커밋 메시지 타입 활용
• 설정 항목
  • assignee: 본인으로 설정
  • labels: 일치하는 내용으로 설정
  • Project 관련 설정 항목
  • Priority: 우선순위
  • Start Date: 시작일
  • End Date: 종료일

Commit (커밋)

커밋 메시지 타입

작성 방법

• 형태: [타입/#이슈번호] - 커밋 내용 [feat/#81] - header 컴포넌트 생성 , [style/#81] - header 컴포넌트 tailwind 적용

PR(Pull Request)

• 설정 항목
  • Reviewer: 팀원 전체 (우리의 목표(Goals) 참조!!)
  • Assignee: 본인 설정
  • labels
  • project
• 본문
  • 관련된 issue를 닫으려면 close 키워드를 이슈 번호 앞에 사용함 close #81
  • 관련된 issue를 닫지 않은 채 PR에 반영하려면 이슈번호만 작성함 #81
  • 코드 기반, 자세한 설명으로 PR 내용을 작성하여 모든 팀원들이 알기편하도록 함

Review

• 코드를 보고 코멘트를 달고 싶은 코드에 +를 클릭하여 코멘트 작성하기
• 우측 위의 Review 버튼을 사용하여 comment / approve / request changes 중 하나를 선택하여 Submit
  • comment : 단순 코멘트
  • approve : 머지 승인
  • request changes : 다른 코드 제의 (=반려)