GitHub
©-2 kd02109 All rights reserved.

프로젝트 컨벤션 결정하기(git, code)

  • project
  • sharepetment
June 30, 2023

React vs React Native

  • 현재 SNS 및 커뮤케이션 기능이 주요 기능이기 때문에, 웹 어플리케이션을 만들기 보다는 앱 어플리케이션을 만드는 것이 유저에게 더 친화적이라고 생각했습니다. SNS 사용 비율은 컴퓨터 보다는 휴대폰 앱으로 더 많이 사용하기 때문입니다. 하지만 React Native를 도입하기가 어려웠던 점은 아무리 React와 비슷하다고 하여도 웹 기반 프로그래밍과 휴대폰 기반 프로그래밍에 대한 차이에 대한 이해가 없다는 점이 어려웠습니다. 기본적인 기능을 구현할 수 있다고 해도 휴대폰 환경에서 최적의 css 작업과 기능 개선을 할 수 있는가? 하는 질문에서 팀원 모두 회의감을 느꼈습니다. 이러한 점에서 리엑트를 사용해서 웹을 기반으로 작업을 하도록 결정했습니다.

PWA를 통한 대안책 도입

  • 리엑트를 통해 웹 기반 어플리케이션을 만들기로 결정을 했습니다. 이에 따라 앱 설치는 포기를 하였지만, pwa를 통해 대안을 도입하기로 하였습니다. 인프런, pinterest 등이 별도의 앱을 출시하지 않고 pwa를 통해 휴대폰 앱 기능을 제공하고 있다는 점을 참고하여 기능 작업을 마무리 하고 pwa를 도입하기로 결정했습니다.

Git Convention

일관된 commit, pr, isuue 작성을 위한 convention을 작성했습니다. 이때 commit 컨벤션은 git commit시 커스텀 컨벤션 파일을 통해 commit을 하도록 설정하였습니다.

Git Commit Convention

git commit convention template

  • 해당 template을 복사해서 .git-commit-template으로 저장합니다.
  • convetion 예시 양식은 다음과 같습니다.
Feat: Add signin, signup

회원가입 기능, 로그인 기능 추가(예시를 위해 간단히 작성)

Resolves: #1
  • Subject Rule, Body Rule, Footer Rule에 대한 개괄적 설명은 template에 포함되어 있습니다.
# <[type]>: <subject>
##### Subject 50 characters ################# ->

# Body Message
######## Body 72 characters ####################################### ->

# Issue Tracker Number or URL (optional) ->

# --- COMMIT END ---
# Type can be
#   feat    : 새로운 기능 추가
#   fix     : 버그/오타(typo)/로직 등 코드를 수정한 경우
#   refactor: 코드 리팩토링
#   style   : 코드 포맷팅, 세미콜론 누락 수정 등 내부 로직 변경이 없이 코드를 수정한 경우
#   docs    : README 문서 수정
#   test    : 테스트 코드, 리팩토링 테스트 코드 추가
#   chore   : 빌드 업무 수정, 패키지 매니저 수정
#   remove  : 코드/파일 삭제
#   dep     : 패키지 설치/삭제 등 의존성 관련 수정
#   etc     : 기타
# ------------------
# Remember me ~
#   Capitalize the subject line
#     제목줄은 대문자로 시작한다.
#   Use the imperative mood in the subject line
#     제목줄은 명령어로 작성한다.
#   Do not end the subject line with a period
#     제목줄은 마침표로 끝내지 않는다.
#   Separate subject from body with a blank line
#     본문과 제목에는 빈줄을 넣어서 구분한다.
#   Use the body to explain what and why vs. how
#     본문에는 "어떻게" 보다는 "왜"와 "무엇을" 설명한다.
#   Can use multiple lines with "-" for bullet points in body
#     본문에 목록을 나타낼때는 "-"로 시작한다.
# ------------------
#   <꼬리말>
#   필수가 아닌 optioanl
#   Fixes        : 이슈 수정중 (아직 해결되지 않은 경우)
#   Resolves     : 이슈 해결했을 때 사용
#   Ref          : 참고할 이슈가 있을 때 사용
#   Related to   : 해당 커밋에 관련된 이슈번호 (아직 해결되지 않은 경우)
#   ex) Fixes: #47 Related to: #32, #21

Subject Rule

  1. 제목은 최대 50글자 넘지 않기
  2. 마침표 및 특수기호 사용x
  3. 첫 글자 대문자, 명령문 사용
  4. 개조식 구문으로 작성(간결하고 요점적인 서술)
  5. 처음 커밋 컨벤션 이외에는 한글로 기입

Body Rule

  1. 한 줄당 72자 내로 작성
  2. 최대한 상세히 작성
  3. '무엇을', '왜' 변경했는지에 대해 작성 + **'어떻게'**도 간략하게 기입

Footer Rule

  1. **유형: #이슈 번호**의 형식으로 작성
  2. 이슈 트래커 ID를 작성
  3. 여러개의 이슈 번호는 ,로 구분

4.  이슈 트래커 유형은 아래와 같다

Issue Tracker설명
Fixes:이슈 수정중(아직 해결되지 않은 경우)
Resolves:이슈를 해결한 경우
Ref:참조할 이슈가 있을 때 사용
Related to:해당 커밋에 관련된 이슈 번호(아직 해결되지 않은 경우)

ex) Footer에 Fixes: #1 이라고 작성하고 commit을 할 경우, 자동으로 issue #1과 매칭이 된다.

또한, **Resolves: #1**으로 이슈를 해결했다고 명시하면 그 이슈는 사라진다.한 번 써보면 감이 온다

Template 적용시키기

  1. 원하는 경로에 .git-commit-template파일을 생성합니다.

  2. 파일에 내용은 위의 템플릿 양식을 복사 붙여넣기 합니다.

  3. 터미널에 다음과 같이 명령어를 입력합니다.

    **$ git config --global commit.template C:\*\*.git-commit-template \*\***

    git config --global commit.template <.git-commit-template 경로>

    해당 경로는 본인이 .git-commit-template을 저장한 경로를 입력합니다.

  4. CLI가 아닌 VScode에서 template 창을 띄우고 싶다면 다음과 같은 명령어를 cli에 추가로 입력합니다.

    git config --global core.editor "code --wait"

  • 이 설정을 통해서 git commit을 입력하면 vim의 메시지가 보입니다.

Git PR Convention

pr 컨벤션 또한 commit convention과 유사하게 결정을 하였습니다.

  • PR 제목 컨벤션
# PR Naming Convention
#   feat    : 새로운 기능 추가
#   fix     : 버그/오타(typo)/로직 등 코드를 수정한 경우
#   style   : 코드 포맷팅, 세미콜론 누락 수정 등 내부 로직 변경이 없이 코드를 수정한 경우
#   test    : 테스트 코드, 리팩토링 테스트 코드 추가
#   remove  : 코드/파일 삭제

ex. [Feat]: 질문 페이지 생성
		[Feat]: sql 연동
# [Feat] : 질문 생성
### What is this PR?
- 간략하게 구현한 기능 작성 ex) ~~ 기능 구현
- 이슈 close
    - close #이슈

### TODO
- 이슈 복붙

### Screenshot
- (필수) ⇒ gif, video, png 상관없음

추가적으로 각 pr이 담당했던 기능이 무엇인지를 명시하기 위해 자체적으로 label을 작성하였습니다. 라벨은 다음과 같이 정하였습니다.

  • 빌드, 리첵토링, 문서, 버그, 부기능, 삭제, 수정, 스타일, 주기능, 추가, 테스트

Git Issue Convention

프로젝트 진행 방식을 스크럼 방식을 채택했습니다. 스크럼 방식으로 칸반을 도입하였고 이를 github issue와 연동해야 했습니다. 이를 위해서 issue 또한 convention을 작성하기로 하였습니다. 이를 위해 issue template을 작성하였습니다. template 형식은 다음과 같습니다.

Issue Template

Template name
[FE]/[BE][Feat]: backlog

About 할 일을 작성해주세요

# Todo
- [ ]
- [ ]
- [ ]
- [ ]

Bug Template

Template name
[FE]/[BE][Bug]: backlog

About
버그를 작성해주세요

## 설명
발견한 버그에 대한 간단한 설명을 작성해주세요

## 파일 경로
- */*

## 참조
- [link test](link addr) 해결을 위해 참고했던 url을 올려주세요
- 스크린 샷을 올려주세요

Code Convention

Prettier, ESlint, husky, tailwind, TS를 적용해서 코드 컨벤션을 맞추어서 진행했습니다.

Prettier

{
  "singleQuote": true,
  "endOfLine": "auto",
  "tabWidth": 2,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "printWidth": 80,
  "trailingComma": "all"
}

ESlint

  • 기본적인 react와 eslint recommended를 설정해서 코드 작성 규칙을 통일했습니다.
  • import가 무분별하게 작성이 되기 때문에 "eslint-import-resolver-typescript": "^3.5.5", "eslint-plugin-import": "^2.27.5" 를 적용해서 자동으로 import 규칙이 통일되도록 설정을 했습니다. 기본적인 import 순서는 다음과 같습니다. groups: ['builtin', 'external', 'parent', 'sibling', 'index']
    • error
      • 순서를 위반할 경우 에러메시지를 뛰웁니다.
    • group
      • bultin은 내장 모듈을 의미합니다.
      • external은 외부 모듈을 의미합니다.
      • parent는 부모 폴더로부터 가까이 있는 모듈 순으로 import가 진행됩니다.
      • sibling은 상위 폴더에서 하위 폴더 순으로 정렬합니다.
      • index는 현재 디렉토리에 있는 파일을 정렬합니다.
    • alphabetize
      • order: 'asc' 오름차순
      • caseInsensitive: true 대소문자 구
npm install eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript
module.exports = {
  env: {
    browser: true,
    es2020: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
    'plugin:import/typescript',
    'plugin:import/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react-refresh', 'prettier', 'import'],
  settings: {
    'import/resolver': {
      node: {},
      typescript: {
        directory: './src',
      },
    },
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
  },
  rules: {
    'react-refresh/only-export-components': 'warn',
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
        'newlines-between': 'never',
      },
    ],
    'import/no-unresolved': 'off',
    'import/export': 'off',
    'import/named': 0,
    'import/no-named-as-default': 0,
  },
};

Husky

  • husky 설정은 이전에 작성한 글을 토대로 진행을 하였습니다. ESlint

Tailwindcss

Install Tailwind CSS with Vite - Tailwind CSS

  • 처음으로 tailwind css를 적용해서 css 작업을 진행하였습니다.
  • tailwind를 component에 직접 작성하면 코드가 길어지기 가독성이 떨어지기 때문에 이를 css-in-js 방식을 도입해서 작업을 진행하였습니다.
  • 공통 색, 변수, 애니메이션을 지정해야 하기에 다음과 같이 tailwind.config.js 파일을 수정하였습니다.
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    fontFamily: {
      sans: ['IBMPlexSansKR-Regular', 'Arial', 'sans-serif'],
    },
    extend: {
      colors: {
        defaultbg: '#fafafa',
        defaulttext: '#171717',
        deepgray: '#a1a1aa',
        lightgray: '#d4d4d8',
        deepgreen: '#69B783',
        lightgreen: '#CCE7C2',
        white: '#FFFFFF',
        popup: '#a1a1aa',
        yellow: '#EAE784',
      },
    },
    keyframes: {
      fadeInUp: {
        from: { opacity: 0, transform: 'translate3d(0, 30%, 0)' },
        to: { opacity: 1, transform: 'translateZ(0)' },
      },
      smoothAppear: {
        '0%': { opacity: 0, transform: 'translateY(-5%)' },
        '50%': { opacity: 1, transform: 'translateY(0)' },
        '100%': { opacity: 0, transform: 'translateY(-5%)' },
      },
      spin: {
        from: {
          transform: 'rotate(0deg)',
        },
        to: {
          transform: 'rotate(360deg)',
        },
      },
    },
    animation: {
      fadeInUp: 'fadeInUp 0.4s ease-in-out',
      smoothAppear: 'smoothAppear 1.5s ease-in-out',
      spin: 'spin 1s linear infinite',
    },
  },
  pl
@config "../tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@font-face {
  font-family: 'IBMPlexSansKR-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff')
    format('woff');
  font-weight: normal;
  font-style: normal;
}
@layer utilities {
  @variants responsive {
    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
 
    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
    }
  }
}
 
body {
  background-color: #fafafa;
}

그 이외의 것들

  • 이벤트 관련 함수
    • handle—
      • ex) handlePopUp, handleLogIn
  • 상수
    • ex) const MAX_NUMBER = 10
  • state 변수같은 변수는 명사처리
    • const [ isLogIn, setIsLogIn ] = useState( );
  • 함수
    • 동사로 처리한다.
    • ext) const getLocalStorage = () ⇒
  • types
    • 객체 타입 지정은 interface 이외에는 type을 사용한다.
    • 중복으로 사용되는 type은 types 폴더 내에서 정의한다.
Content Table
  • React vs React Native
  • PWA를 통한 대안책 도입
  • Git Convention
  • Git Commit Convention
  • git commit convention template
  • <[type]>: <subject>
  • Body Message
  • Issue Tracker Number or URL (optional) ->
  • --- COMMIT END ---
  • Type can be
  • feat : 새로운 기능 추가
  • fix : 버그/오타(typo)/로직 등 코드를 수정한 경우
  • refactor: 코드 리팩토링
  • style : 코드 포맷팅, 세미콜론 누락 수정 등 내부 로직 변경이 없이 코드를 수정한 경우
  • docs : README 문서 수정
  • test : 테스트 코드, 리팩토링 테스트 코드 추가
  • chore : 빌드 업무 수정, 패키지 매니저 수정
  • remove : 코드/파일 삭제
  • dep : 패키지 설치/삭제 등 의존성 관련 수정
  • etc : 기타
  • ------------------
  • Remember me ~
  • Capitalize the subject line
  • 제목줄은 대문자로 시작한다.
  • Use the imperative mood in the subject line
  • 제목줄은 명령어로 작성한다.
  • Do not end the subject line with a period
  • 제목줄은 마침표로 끝내지 않는다.
  • Separate subject from body with a blank line
  • 본문과 제목에는 빈줄을 넣어서 구분한다.
  • Use the body to explain what and why vs. how
  • 본문에는 "어떻게" 보다는 "왜"와 "무엇을" 설명한다.
  • Can use multiple lines with "-" for bullet points in body
  • 본문에 목록을 나타낼때는 "-"로 시작한다.
  • ------------------
  • <꼬리말>
  • 필수가 아닌 optioanl
  • Fixes : 이슈 수정중 (아직 해결되지 않은 경우)
  • Resolves : 이슈 해결했을 때 사용
  • Ref : 참고할 이슈가 있을 때 사용
  • Related to : 해당 커밋에 관련된 이슈번호 (아직 해결되지 않은 경우)
  • ex) Fixes: #47 Related to: #32, #21
  •    - Subject Rule
  •    - Body Rule
  •    - Footer Rule
  • Template 적용시키기
  • Git PR Convention
  • PR Naming Convention
  • feat : 새로운 기능 추가
  • fix : 버그/오타(typo)/로직 등 코드를 수정한 경우
  • style : 코드 포맷팅, 세미콜론 누락 수정 등 내부 로직 변경이 없이 코드를 수정한 경우
  • test : 테스트 코드, 리팩토링 테스트 코드 추가
  • remove : 코드/파일 삭제
  • [Feat] : 질문 생성
  •    - What is this PR?
  •    - TODO
  •    - Screenshot
  • Git Issue Convention
  • Issue Template
  • Todo
  • Bug Template
  • 설명
  • 파일 경로
  • 참조
  • Code Convention
  •    - Prettier
  •    - ESlint
  •    - Husky
  •    - Tailwindcss
  • 그 이외의 것들

Sharepetment

2023.06.30
8 / 9