Home

📁 가져도댕냥 위키

1. 서비스 소개

가져도댕냥은 사용하지 않는 반려동물용품을 판매하는 중고 거래 플랫폼입니다.
가져도댕냥의 사용자는 중고 거래 뿐만 아니라 다른 사용자와 소통하기, 날씨에 따른 반려견 산책 여부 확인하기, 가까운 동물병원 확인하기 등 반려동물 커뮤니티 서비스도 이용할 수 있습니다.

2. 개발 규칙

2-1. Git-flow 전략

• 프로젝트 규모가 크지 않으므로 3종류의 브랜치를 사용한다.
  • main : 제품으로 출시될 수 있는 브랜치
  • develop : 다음 출시 버전을 개발하는 브랜치
  • feature : 기능을 개발하는 브랜치
    • 브랜치명 규칙 : feat/#이슈번호
    • 예) feat/#1

2-2. 커밋 메시지 컨벤션

• 커밋 메시지는 타입: 주제 (#이슈번호)와 같이 작성한다.
  • 예) add: ListView에 빠진 문구 추가 (#2)
• 타입의 종류
  • fix: 올바르지 않은 동작을 고친 경우
  • feat: 새로운 기능을 추가한 경우
  • refactor: 내부 로직은 변경하지 않고 코드를 개선한 경우
  • style: 코드 개선과 상관없이 사소하게 코드를 수정한 경우
  • design: 사용자 UI를 추가, 수정한 경우 (마크업, 퍼블리싱 작업)
  • add: 폴더, 파일 등을 추가한 경우
  • move: 폴더, 파일, 코드 등의 위치를 이동한 경우
  • rename: 폴더명, 파일명 등을 수정한 경우
  • remove: 폴더, 파일, 코드 등을 삭제한 경우
  • assets: 에셋을 추가, 수정한 경우
  • docs: 문서를 추가, 수정한 경우
  • chore: 위의 모든 경우에 포함되지 않는 기타 수정사항
• 타입은 종류 중 하나만 선택하며, 영어 소문자로 시작한다.
• 주제는 한글로 간단명료하게 작성한다.
• 주제의 마지막 문자로 .(마침표)를 사용하지 않는다.
• 주제는 '-다', '-음'과 같은 어미로 끝내지 않고, 과거형을 사용하지 않는다.
  • 올바르지 않은 예) feat: 카카오 로그인 연동 기능을 추가했다 (#3), feat: 카카오 로그인 연동 기능을 추가함 (#3)
  • 옳은 예) feat: 카카오 로그인 연동 기능 추가 (#3)
• 주제는 소스 코드를 보지 않고도 변경 사항이 무엇인지 알 수 있도록 작성해야 한다.
  • 올바르지 않은 예) design: CSS 조정 (#4)
  • 옳은 예) design: text box와 layout frame 사이에 left padding 추가 (#4)
• 커밋 메시지는 제삼자가 봤을 때 무엇을 했는지 파악할 수 있게 자세히 작성한다.
• 커밋 메시지는 어떻게 보단 무엇과 왜를 설명한다.
• 한 커밋에는 한 가지 기능만 담는다.
  • 예) 화면 개발의 경우 : 컴포넌트 단위로 커밋
  • 예2) 기능 개발의 경우 : 각 기능 단위로 커밋

2-3. 코드 컨벤션

• 들여쓰기(tab) 2칸 사용한다.
• JavaScript ES6+ 문법 사용한다.
• var 사용 금지한다.
• 세미콜론 필수로 사용한다.
• 작은 따옴표 사용한다.
• for, if문은 길이가 짧더라도 중괄호로 사용한다.
• CSS 속성 선언 순서는 우선 신경쓰지 않고, 코드 리팩토링 단계에서 수정한다.
• 리액트 컴포넌트를 만들때는 rafce 명령어를 사용하여 만든다.
• 리액트 컴포넌트 확장자는 jsx로 통일한다.
• 함수 선언시에는 화살표 함수 사용한다. (화살표 함수를 사용할 수 없는 상황에는 예외)
• prettier & ESlint 사용한다
• 삼항연산자는 짧으면 한줄, 길면 개행으로 줄바꿈 규칙을 정한다.
• import ... from 구문은 큰 분류만 신경쓰고 분류 안에서 자유로운 순서로 배치한다.

2-4. 네이밍 컨벤션

2-4-1. 폴더명

• camelCase : 직접적으로 바로 React 컴포넌트가 들어있지 않은 간접적인 관계의 폴더
• PascalCase : React 컴포넌트가 바로 들어 있는 폴더

2-4-2. 파일명

• React 컴포넌트 : PascalCase
  • 페이지명은 __page로 작성 (예 : HomePage.jsx, LoginPage.jsx)
  • 네이밍은 종류 - 역할 - 컴포넌트 순으로 (예 : LoginSubmitButton.jsx)
• 이미지파일 : kebab-case
  • 네이밍은 이미지명-image로 (예 : logo-image.png, happy-lion-imgae.png)
• jsx : PascalCase
• js : camelCase
• 스타일드 컴포넌트 파일 : ~~Style.jsx로 표현

2-4-3. 변수명

• 일반적인 변수, 함수 : camelCase
  • 변수 : '명사형'으로 작성. 무엇을 담고있는지 정확히 표현 (예 : numberOfPeople)
  • 불린형 변수 : is로 시작 (예 : isOpen)
  • 함수 : '동사형'으로 작성. 무엇을 하는 함수인지 정확히 표현
    • 어떤 값으로부터 다른 값을 계산하는 함수는 get으로 시작 (예 : getinputValue)
• 커스텀 훅 : use로 시작 (예 : uesGetWindowsSize)
• 이벤트 함수 props ( on_ ) + 네이밍 + handler 으로 짓기 (아래 예시 참조)

import { MouseEvent as ReactMouseEvent, useCallback, useState } from 'react'

function FunctionComponent() {
  const [searchTerm, setSearchTerm] = useState('')

  // 이벤트 핸들러 함수
  const onClickSearchButtonHandler = useCallback(e) => { ... })

  const onChangeSearchTermHandler = useCallback(e => { ... }) 

  // 이벤트 핸들러 prop
  return (
    <>
      <SearchInput onChange={onClickSearchButtonHandler} />
      <SearchButton onClick={onChangeSearchTermHandler} />
    </>
  )
}

export default FunctionComponent

• 상수 : UPPER_SNAKE_CASE
• 생성자 함수, 클래스 : PascalCase

2-5. 디렉토리 구조 컨벤션

src
  ㄴ assets
    ㄴ images
    ㄴ fonts
  ㄴ components
    ㄴ Header
      ㄴ Header.jsx
    ㄴ Button
      ㄴ Button.jsx
  ㄴ pages
    ㄴ HomePage
      ㄴ HomePage.jsx

2-5-1. assets

• 말 그대로 자산을 의미한다.
• 프로젝트에서 사용할 이미지, 비디오, 폰트 등 미디어 파일들을 모아 저장하는 곳

2-5-2. components

• 공통 컴포넌트 관리 (Header, Footer, Nav 등)

2-5-3. assets

• 페이지 단위의 컴포넌트 폴더로 구성

💡 components vs pages

• 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리
• 페이지 컴포넌트의 경우 pages 폴더에서 관리
• 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리하는 것이 좋음!